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

[amandaNHT]

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:

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

<div id="fade" class="black_overlay"></div>

[kromol]

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.