PDA

View Full Version : Resolved Combining the Fade-in slideshow with a reflection effect



gemini84
04-19-2011, 08:50 PM
1) Script Title: Ultimate Fade-in slideshow (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe the question: Is it somehow possible, to add a reflection effect to the images used in a slideshow (based on javascript, e.g reflection.js or on PHP)?

Many thanks for your appreciated support!


EDIT
-------

SUCCESS! I found a solution (PHP based):

1. I used this PHP script from http://reflection.corephp.co.uk/v3.php and added the following code in line 355 (in order to merge the original image and the reflection in one single image):


if (isset($_GET['merge']) && $_GET['merge'] == true) {
$merged_output = imagecreatetruecolor($width, $new_height + $height);
imagealphablending($merged_output, false);
imagesavealpha($merged_output, true); // Copy the source image
imagecopy($merged_output, $source, 0, 0, 0, 0, $width, $height); // Copy our new reflection
imagecopy($merged_output, $output, 0, $height, 0, 0, $width, imagesy($output)); // Replace the output with this new version
$output = $merged_output; }

Source: http://www.corephp.co.uk/archives/48-Easy-Reflections-v2.1-Released.html (Comment #4 by James)

2. I then put the PHP file in the same directory as the images and called the images in the Ultimate Fade In Slideshow JS array as follows:


var mygallery=new fadeSlideShow({
wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
dimensions: [960, 478], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/path/to/images/slideshow/reflect.php?img=image.jpg&merge=true&fade_start=50&cache=1", "/url", "", "Title"],

It works quite good, however there is an increased load on the webserver. The loading of the images may get a bit delayed, you can prevent this with the caching option of this PHP script.

Cheers!
Gemini