ultimate fade-in slideshow with lightbox

[rosy]

Hello,

I would like to combine the
http://www.dynamicdrive.com/dynamici...nslideshow.htm
with the lightbox.

I found the description to do that for the 'drop in image slideshow' and tried to adapt it, but - i'm a very beginner in javascipt - of course I failed.
And now I finally capitulate and have to ask for help.

Is there any possibility to combine these two scripts? I need multiple fade-in slideshows on one page.

It would be great if someone could help me.

Thanks
Rosy

[Jesdisciple]

Please post your attempt; that will save us from redoing anything you've already done.

[jscheuer1]

If you use Lightbox v2.04a:

http://www.dynamicdrive.com/forums/s...470#post163470

then all you need for a basic setup is to add (highlighted red):

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="lightbox" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

to the function from Ultimate Fade-in slideshow (v1.51), as shown above.

[rosy]

Hello,

thanks for your immediate response.
It works until the loading gif of the lightbox is coming up. this loading gif turns and turns and.... but the big image doesnt appear.

I tried a lot of possible combinations, but I did'nt succeed.
Below there is one of a dozen attempts.

------
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=[ <a href="brille1-gross.jpg" rel="lightbox[test]"> brille1-klein.jpg</a>]
fadeimages[1]=[ <a href="brille3-gross.jpg" rel="lightbox[test]"> brille3-klein.jpg</a>]
----------

Where is the mistake? As I told in my previous post, concerning java script I'm in the state of try and error.

Thanks

Rosy

[jscheuer1]

You shouldn't alter the format of the fadeimages array(s). So, for what you have there, it should be:

fadeimages[0]=["brille1-klein.jpg", "brille1-gross.jpg", ""] //image with link
fadeimages[1]=["brille3-klein.jpg", "brille3-gross.jpg", ""] //image with link

[rosy]

Thanks,

it works perfect

Rosy

[saratonin]

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

and
http://www.dynamicdrive.com/dynamici...box2/index.htm

Thought I had a handle on combining these two by reading this thread, but I have tried multiple solutions, mostly confused about where to put the script that calls the slideshow, and its appropriate name. If thats not it, I dont know what is. The lightbox works perfectly, but no slideshow ever happens.

Link to the page I am referring to here: http://khecari.org/imagesT.html

your help is much appreciated!
sara

[jscheuer1]

Start over with a fresh copy of Ultimate Fade-In Slideshow (v1.51). The one you have now has been edited incorrectly. Follow the recommended syntax for the array. Where you now have:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/gallery/big/p4choke.jpg", "/gallery/big/p4jjfly.jpg", "/gallery/big/p4roll.jpg", "/gallery/big/p4snailmouth.jpg"]

It needs to follow this pattern:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/gallery/p4chokeTN.jpg", "/gallery/big/p4choke.jpg", ""]
fadeimages[1]=["/gallery/p4jjflyTN.jpg", "/gallery/big/p4jjfly.jpg", ""]
fadeimages[2]=["/gallery/p4rollTN.jpg", "/gallery/big/p4roll.jpg", ""]
fadeimages[3]=["/gallery/p4snailmouthTN.jpg", "/gallery/big/p4snailmouth.jpg", ""]

And in the main part of the script only edit the one function exactly as shown (highlighted):

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="lightbox" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

In your version it appears as though you clipped the code of the function above that, breaking the script. As I say though, start over with a fresh copy.

[saratonin]

John
So that worked, thank you.

http://khecari.org/imagesT.html

I actually thought the slideshow would occur within the larger images, at least thats what I wanted to happen. I can see now that it would probably require a whole different code (or may not be possible with this method). It does seem like if you can connect the large images through buttons like previous and next, then you should also be able to make it run by itself. But Im no code expert, to say the least.

Since this is my first forum post ever, I would first like to say MANY thanks for your help!

I am curious though, do you think what I am after is possible?

[jscheuer1]

I think perhaps you want something like:

http://www.justinbarkhuff.com/lab/lightbox_slideshow/

But to tell you the truth, I'm not real clear what you're after.