Ultimate Fade In that work with thumbnails?

[soren]

1) Script Title: Ultimate Fade In

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I have been looking for an solution to make DD's beautiful transitions between images by using thumbnails instead of "Next" and "Previous" buttons. When you do "mousedown" on the thumbnails the image will change to the desired image with the transition of "Ultimate Fade In". I have looked at different Spry galleries etc and they all starts from white or black before the image starts to fade in. I prefer much more the effect from Ultimate Fade In but I have not been able to make it work. Is there a solution to use this wonderful script on thumbnails instead? I have started by using only "swapimage" I have also tried with "fade/appear" effect but they are not what I want.

http://www.digitalworkflow.se/CN_gallery01.html

Thanks
Soren

[soren]

Here is another test, but can't make the thumbnails to interact with the slideshow. This one I am using the older version (v1.51) as I had problems with the border style in CSS using the newer version of Ultimate Fade In. What I am looking for here is when the user clicks on the thumbnail the image change with the fade in effect that you can see on this webpage. I don't want the slideshow to be automatic...

http://www.digitalworkflow.se/CN_gallery02.html

Soren

[soren]

Is there no solution to use Ultimate Fade-In effect for an image gallery by using click on thumbnails instead of "previous - next - auto"?

soren

[jscheuer1]

I'm not sure what your css problem is, but the version 2.0 script is much easier to control for what you want to do. The css issue can likely be worked out.

OK, to control version 2.0 manually to a particular image instead of just next/previous all you need is to call its navigate function with the number of the slide to go to (slides are numbered 0 to whatever).

So, let's say your slide show is defined:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [468, 500], //width . . .

And has 5 images. To go to its 3rd image you would use:

mygallery.navigate(2);

To go to its 1st image:

mygallery.navigate(0);

etc. I think you get the idea. Then to make that a thumbnail you can click, there are various ways. The simplest would be something like so:

<img src="thumb_1.jpg" onclick="mygallery.navigate(0);" alt="">

Many people prefer to use a link for this, if so:

<a href="#" onclick="mygallery.navigate(0); return false;"><img src="thumb_1.jpg" alt=""></a>

[soren]

Thanks John!

But this is very strange.... I can make it work with preview (except the border) on both Firefox and Safari but when putting it on the server it does not show the images!!! It only shows my applied border via CSS and a question mark..

http://www.digitalworkflow.se/CN_gallery02.html

and in the preview the image is not centered in the border

I have the images OK in the preview but not the border, downloading to the server I have OK border but no images!!!

I have updated all linked files so there should not be any problem...

Soren

[jscheuer1]

As for the images not showing up on the server, for example - this one's not there:

http://www.digitalworkflow.se/images/conny/galleries/sanddyner_02.jpg

It may just be missing, or you may have uploaded it to a different location or the path and or filename might not agree with what's in your source code. Paths and filenames are case sensitive on the server, not so locally.

Once we can actually see the images on the live page, then we can worry about any other issues that may remain.

[jscheuer1]

I see another problem. If you are starting out in manual mode (I started my test gallery in auto - it would stop if an individual image was clicked for), you need to provide a dummy toggler id, ex:

	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow1toggler"
})

[soren]

John,

Yes you are correct it was "S" and not "s" I also fixed the togglerid.

Now you can see how the border shows up, I also want to have text inside the border as I have in this version..

http://www.digitalworkflow.se/CN_gallery01.html

But the text does not show up.. guess it is behind the images..

Soren

[soren]

For more information in CSS rule for the div id "galleryContent" I use for this images

Display "block"
float "right"
padding 10,10,25,10 (top, right, bottom, left)
margin 40,auto,60,auto
border
style solid
width 1px

[jscheuer1]

OK, your CN_gallery02.html looks pretty good. I think your problem is the padding and boarder on galleryContent. You are right, there is no text where padding is, so if it is there at all, it is under the images. But I see no text in your source code. Here is what I would do - remove all the style from that division, let the script handle that. Put another division around it with slightly larger dimensions but no padding, some other styles similar to but possibly not identical to the other styles you were using for galleryContent and place your text in there, in that outer division. With a bit of tweaking, or if you are lucky - no tweaking, you should be able to get the look you want fairly easily.

Also, I don't think you need:

<div id="fadeshow1togler"></div>

just the dummy definition for it in the script code.