www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Integrate Fade Slideshow with Navitation into a Lightbox?

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    resolved [RESOLVED] Integrate Fade Slideshow with Navitation into a Lightbox?

    I have a lightbox but I want to integrate some slildeshow features. Problem is, I'm terrible at Javascript.

    I want to add Previous and Next buttons, I need a way to identify which images are a "set" and I need to have it auto-play and cross-fade between images or fade to black between images.
    *EDIT: Or, just for images that are in a specific DIV together, that would be even easier... So that I could generate "all" of the images within the Lightbox and they could just cycle through them or something...? I have no idea.

    Any links, tutorials, tips, advice, or code-snippets would be greatly-appreciated.

    Thanks!

    Also, if it helps, here's the PHP Function that I use to create the image-links for my Lightbox:
    PHP Code:
    // My Lightbox Function

    function buildSlideshowElement($customID,$floorplanName,$photoFileName){
        
    $onClickMeON "document.getElementById('".$customID."').style.display='block';document.getElementById('fade').style.display='block'";
        
    $onClickMeOFF "document.getElementById('".$customID."').style.display='none';document.getElementById('fade').style.display='none'";
        
    $planFName substr($floorplanName,0,strpos($floorplanName,'-'));
        
    $xPhoto = ('http://www.newhometeam.net/gallery/floorplan/'.urlencode($floorplanName).'/'.$photoFileName);
        return (
    '
        <a href="javascript:void(0)" onclick="'
    .$onClickMeON.'"><img src="'.$xPhoto.'" alt="'.$planFName.'" class="imgThumb" /></a><span id="'.$customID.'" class="white_content"><img src="'.$xPhoto.'" alt="'.$planFName.'" class="imgFull" /><a href="javascript:void(0)" onclick="'.$onClickMeOFF.'"><img src="img/graphic/grayX.png" class="closeMe" /></a></span>');

    Then at the end of a page there's this to black-out the background:
    HTML Code:
    <div id="fade" class="black_overlay"></div>
    Last edited by amandaNHT; 06-14-2012 at 03:10 PM.

  2. #2
    Join Date
    Jul 2011
    Posts
    131
    You can add some identifier to your active image, for example class "active".
    If I understood you right, you have next HTML structure for your images:
    <a> with <img> inside for the thumbnail
    <span> with full image inside.
    For "NEXT" button you should do next steps:
    1. Find your full active image (it will have class "active")
    2. Return to its parent element (it will be <span> with class "white_content")
    3. Take next element.
    4. Check if it is <a> element and if it has child <img> with class "imgThumb".
    5. If result is true, then take its child <img>
    6. Remove class "active" from previous full image and hide that image.
    7. Simulate onclick event for <a> and add class "active" to your new active image.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles