PDA

View Full Version : Slide Show Script & Lightbox



spede18
05-28-2010, 03:11 AM
1) Slide Show Script & adding Lightbox effect

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/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
05-28-2010, 01:06 PM
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
05-28-2010, 08:50 PM
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
05-29-2010, 05:52 AM
This question leads me to believe that you are using Lightbox 2.03a fron Dynamic Drive:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/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
05-30-2010, 10:07 PM
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/showthread.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
06-01-2010, 12:32 AM
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
06-01-2010, 01:25 AM
Searching through posts today it seems like swiss army is my best option?
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

you had helped someone get it working with lightbox
http://www.dynamicdrive.com/forums/showthread.php?t=54023&highlight=swiss+army+lightbox

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


Thanks for all your help!

jscheuer1
06-05-2010, 12:44 AM
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/dynamicindex14/fadeinslideshow.htm

spede18
06-06-2010, 10:20 PM
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
06-07-2010, 01:22 AM
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.

jscheuer1
06-07-2010, 01:44 AM
That's as good a method (there are several) as any for that particular issue. When I master a site though, If I'm to use scripts that require a script library, I first do the best I can to use only scripts that require one particular library. The reasoning here is that these various libraries (Prototype, jQuery, MooTools, Dojo, YUI, etc.), are meant to consolidate frequently used routines in one place for maximum efficiency and ease of use. Using more than one library kind of defeats that purpose. However, it still affords the desired functionality. There is something to be said for that. At the same time, jQuery is the only one I'm aware of that supplies methods for doing so (working with other javascript libraries).

There has been a trend of late, due to increasing bandwidth and possibly other factors, to make a site with whatever works and looks good once its loaded. I believe it's still best to use the minimum code and resources as possible. This means validating code, optimizing code and images, sticking to one library, using resource intensive things like Flash sparingly, etc.

spede18
06-10-2010, 02:17 AM
OK site is uploaded to site.mcnamaraconst.com if you wouldn't mind checking it out and letting me know if anything jumps out at you.

The gallery I was having you help me with is under project gallery.

Also for some reason my contact form isn't performing correctly not sure why. was wondering if maybe it is because of jquery and somewhere I need to add the no conflict code in my php file?

Thanks again john you have been a great help and I will work on getting multiple instances of the ultimate slide show working and let you know how it goes.

jscheuer1
06-10-2010, 11:27 AM
What's the form supposed to do that it's not?

When you say:


if maybe it is because of jquery and somewhere I need to add the no conflict code in my php file

Once jQuery.noConflict() appears on a page, that's good for everything on the page. The safest way is to place the main jQuery script as the first script on the page then immediately after that use jQuery.noConflict():


<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

After that, you can have your mootools or other library, and it will not overwrite the jQuery $ because after jQuery.noConflict(), jQuery is no longer using $ except internally. If you set it up like that, then when you get to the Nivo init it can be like:


<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fold', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:4000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>

None of that seems to be an issue here, it's just a cleaner way to do it. And if jQuery was interfering with anything before, if there is any way to stop that short of extreme no conflict mode, this will do the trick.

One should bear in mind that some libraries may not work with jQuery even in extreme no conflict mode.

But the "php file" - I'm not sure what you mean by that. If it's a PHP script without javascript, jQuery will have no effect on that.