Slide Show Script & Lightbox

[spede18]

1) Slide Show Script & adding Lightbox effect

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

3) Describe problem:
I am having trouble where to add the lightbox onlick function or rel= in order to get it working properly.
I can get everything else working but can't seem to get lightbox to open the photos.

// JavaScript Document
/******************************************
* DHTML slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="images/scroll1.jpg"
photos[1]="images/scroll2.jpg"
photos[2]="images/scroll3.jpg"
photos[3]="images/scroll4.jpg"
photos[4]="images/scroll5.jpg"


//Specify whether images should be linked or not (1=linked)
var linkornot=1

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]="image/remodeling.jpg"
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}


Code from file:

<tr valign="middle">
<td width="25" align="center"><div align="center">
<p><a href="#" class="style26" onclick="backward();return false"><img src="images/back.jpg" alt="#" /></a></p>
</div></td>
<td width="635" align="center"><div align="center">
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</div></td>
<td width="26" align="center"><p align="right"><a href="#" class="style26" onclick="forward();return false"><img src="images/next.jpg" alt="#" width="25" height="25" /></a></p>
</td>
</tr>

I have seen and read similar issues but none relating to this slide effect.

Thanks in advance.

[jscheuer1]

Which lightbox script are you using? If it is either of the two featured here on dynamic drive, you would need to change:

document.write('<a href="javascript:transport()">')

to:

document.write('<a id="lightboxlink" href="' + photoslink[0] + '" rel="lightbox">')

And change:

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

to:

function backward(){
if (which>0){
which--
document.getElementById('lightboxlink').href = photoslink[which];
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
document.getElementById('lightboxlink').href = photoslink[which];
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

This:

//Specify whether images should be linked or not (1=linked)
var linkornot=1

must remain as is, set to 1.

Once you have all that, you configure your larger images here:

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]="image/remodeling.jpg"
photoslink[1]=""
photoslink[2]=""

There must be one for each of your smaller images which are configured here:

//define images. You can have as many as you want:
photos[0]="images/scroll1.jpg"
photos[1]="images/scroll2.jpg"
photos[2]="images/scroll3.jpg"
photos[3]="images/scroll4.jpg"
photos[4]="images/scroll5.jpg"

[spede18]

Awesome thanks got that working!

Is it possible to have lightbox link the photos so the previous & next tabs show up? and show a caption with the modified code?

Last thing is there a way to display more then one picture at a time?

[jscheuer1]

This question leads me to believe that you are using Lightbox 2.03a fron Dynamic Drive:

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

There are however various versions of Lightbox out there, including 2.04 and 2.04a, as well as numerous 'clones' which use other script libraries other than Prototype (which the official Lightbox uses).

To really answer this, I need to know precisely what Lightbox you are using.

If you are unsure, post a link to your page where you are using this code.

[spede18]

Yes in order to get things working as you had suggested I downloaded lightbox 2.03a.

The coding you helped me out with is working great and I really don't need to put captions into the photos I was just wondering how I could if I wanted to.

I am trying to accomplish something along the lines of these posts:
http://www.dynamicdrive.com/forums/blog.php?b=37
http://www.dynamicdrive.com/forums/s...ad.php?t=38294

In the end I want to have multiple sliders on one page which I would like to incorporate the lightbox effect for each individual photo.

[spede18]

I set up iframes and have the code working via different script files.

In your opinion is there a better way to be doing this or a better script I should be using to accomplish what I am trying to do?

It would be nice if I didn't have to use the iframes if possible.

[spede18]

Searching through posts today it seems like swiss army is my best option?
http://www.dynamicdrive.com/dynamici...army/index.htm

you had helped someone get it working with lightbox
http://www.dynamicdrive.com/forums/s...+army+lightbox

Will this work with multiple slide shows using the manual cycling?


Thanks for all your help!

[jscheuer1]

OK, it looks as though I've got a reprieve on the issue I mentioned to you via email. Have you downloaded and familiarized yourself with the Ultimate Fade In Slide Show?

http://www.dynamicdrive.com/dynamici...nslideshow.htm

[spede18]

I haven't really had a chance to as much as I would have liked.

The project I was going to use this on has changed a bit, I found a different slider that I am able to use multiple instances of and it incorporates multiple frames and a lightbox effect. http://www.php-help.ro/examples/slideitmoo_1.1/
I am working with this at the moment but on another note I have also incorporated nivo slider http://nivo.dev7studios.com/ on the same page which is a jquery base and I am having trouble combining the two, I have read about the no conflict script but can not figure out how to use it.

I am almost finished with everything this is my last snag.

Does the ultimate fade slide show have the ability to show multiple slides at once? If not then something more along the lines of slidemoo will be needed used.

Sorry for all the questions and going back and forth with things.

[spede18]

Nevermind, I figured out the jquery issue by using var $j = jQuery.noConflict(); then changing the $ symbol to to $j in my code for nivo slider to work.

Any tips or advice or ways you would have gone about this?
I will post my page when I am done with it and it has been uploaded.