Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Slide Show Script & Lightbox

  1. #1
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Slide Show Script & Lightbox

    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.
    Last edited by spede18; 05-28-2010 at 03:52 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

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

    Code:
    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:

    Code:
    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:

    Code:
    //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:

    Code:
    //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:

    Code:
    //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"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    spede18 (05-28-2010)

  4. #3
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by spede18; 05-28-2010 at 10:37 PM.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #7
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  11. #10
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •