PDA

View Full Version : ultimate fade-in slideshow with lightbox



rosy
11-03-2008, 10:32 AM
Hello,

I would like to combine the
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
11-03-2008, 03:47 PM
Please post your attempt; that will save us from redoing anything you've already done.

jscheuer1
11-03-2008, 03:53 PM
If you use Lightbox v2.04a:

http://www.dynamicdrive.com/forums/showthread.php?p=163470#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
11-03-2008, 05:48 PM
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
11-03-2008, 06:09 PM
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
11-03-2008, 06:40 PM
Thanks,

it works perfect

Rosy

saratonin
02-17-2009, 05:22 AM
Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

and
http://www.dynamicdrive.com/dynamicindex4/lightbox2/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
02-17-2009, 01:31 PM
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
02-18-2009, 03:44 AM
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
02-18-2009, 03:51 PM
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.

saratonin
02-20-2009, 03:33 AM
John
thats it exactly! Thank you so much!

sara

Ulxaaf
05-26-2010, 02:21 PM
Hello.
I think I can add my post here, it fits quite well.

But my problem is, my lightbox when loading "fulscreen image" and darkening everything around the image, it doesnt darken the fadeslideshow.
Fadeslideshow stays active even when Lightbox is turned to view the images.
How to fix that? Thanks.

jscheuer1
05-26-2010, 04:00 PM
Hello.
I think I can add my post here, it fits quite well.

But my problem is, my lightbox when loading "fulscreen image" and darkening everything around the image, it doesnt darken the fadeslideshow.
Fadeslideshow stays active even when Lightbox is turned to view the images.
How to fix that? Thanks.

It probably would have been better to start a new thread and list the exact scripts that you are using, and link back to your page.

Best I can say is your problems is probably because this is an old thread and you are using a more recent version of the slide show script. However, it's hard to tell what you are using. What version of lightbox, what slideshow? I really can't read minds.

But, if it's like I'm guessing, you need to go into the lightbox.css file and increase all z-index values in there (there should be three if you are using the version I'm thinking of) by multiplying each by 100. So if it shows, like:


z-index: 100;

that becomes:


z-index: 10000;

Make sure to get them all. As I say though, I'm just assuming you are using Ultimate Fade In Slide Show v2.x and Lightbox v2.04a. If you are not, this may still solve your problem, but the chances are less.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Ulxaaf
05-26-2010, 05:53 PM
I am using Lightbox v2.04 and Ultimate Fade-in slideshow (v2.4).

I had 3x z-index in my lightbox.css. After multiplying them by 100, my code looks like this:



#lightbox{ position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1000; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 9000; width: 100%; height: 500px; background-color: #000; }



And now it works great. Do I need to change something more?
If not, thank you so much for your fast help.

jscheuer1
05-26-2010, 07:12 PM
I am using Lightbox v2.04 and Ultimate Fade-in slideshow (v2.4).

I had 3x z-index in my lightbox.css. After multiplying them by 100 . . .

And now it works great. Do I need to change something more?
If not, thank you so much for your fast help.

If everything is working out for you as desired, you're fine. That's close enough to the combination of scripts I was guessing you were using to resolve the issue you mentioned about the slide show showing through the lightbox.

Elisha
06-01-2010, 01:03 AM
Hi,

The Slideshow script has been edited since this super helpful post, and consequently I can't find where to add rel="lightbox" to the script?

Any thoughts?

Elisha

misterprez
11-11-2010, 06:59 AM
Me too! Please help?

I've added rel="lightbox" to:

var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="lightbox" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?

...but it does not work?

I'll be glad to post more info if there's anyone around who can help!

Cheers,

M

jscheuer1
11-12-2010, 01:08 AM
Please start a new thread for a new question. Include a link to the problem page.