Gallery buttons (prev/next) or thumbnails visible in full-page mode

Thank you Aseem,
Can you give me an insight on how I could do this myself the best way? I'm thinking of reappending the thumbs div could that be possible?
Also, an automatic slideshow option with play/pause buttons would be great too :)

Here is how I did it (I am waiting on our design dept to make me pretty hover buttons...and yeah this is a .aspx page so there is some clientID fun...this is not the full code and wouldn't function but it should give an idea on what you need to do to get buttons added to the nav control... They appear to inherit the button group of the other nav controls). When we actually launch the darn thing I will try to remember to come back and give a link to the finished product.... it's a javascript/seadragon based slideshow with filmstrip control.

.... notes:
MakeSpacerImg() is a function that returns a small 5px blank image.

I am using ajax page methods to return the next/prev DZI image since for our use the images are all database driven.

---Code

var viewer = null;
var navControl = null;

function init()
{
viewer = new Seadragon.Viewer('<%= divSlideshow.ClientID %>');

nextButton = new Seadragon.Button(
"Next Image",
"/slideshow/next.gif",
"/slideshow/next.gif",
"/slideshow/nextOver.gif",
"/slideshow/next.gif",
null,
onNextClick,
null,
null,
null);

prevButton = new Seadragon.Button(
"Previous Button",
"/slideshow/prev.gif",
"/slideshow/prev.gif",
"/slideshow/prevOver.gif",
"/slideshow/prev.gif",
null,
onPrevClick,
null,
null,
null);

playButton = new Seadragon.Button(
"Play Slideshow",
"/ourlives/images/slideshow/right_arrow.gif",
"/ourlives/images/slideshow/right_arrow.gif",
"/ourlives/images/slideshow/right_arrowOver.gif",
"/ourlives/images/slideshow/right_arrow.gif",
null,
onPlayClick,
null,
null,
null);

navControl = viewer.getNavControl()
navControl.appendChild(makeSpacerImg());
navControl.appendChild(prevButton.elmt);
navControl.appendChild(makeSpacerImg());
navControl.appendChild(playButton.elmt);
navControl.appendChild(pauseButton.elmt);
navControl.appendChild(makeSpacerImg());
navControl.appendChild(nextButton.elmt);

playButton.elmt.style.display = "none";
pauseButton.elmt.style.display = "inline-block";

}

-- I hope this gives you some leads on how to get something like this going.

I have not, however, managed to add the thumbs to it....but fortunately I didn't need too.

hey, thanks for your post!
but onNextClick, onPrevClick, onPlayClick, onPauseClick how are these functions working?

onNextClick, onPrevClick, onPlayClick, onPauseClick are all javascript functions that are also in the file.... I didn't include them because they were specific to my implementation. I am not sure how useful they are but here they go:

function onPlayClick()
{
counter = setTimeout("onNextClick()", COUNTDOWN);
playButton.elmt.style.display = "none";
pauseButton.elmt.style.display = "inline-block";

var fadeOutAnimationSeq = new AjaxControlToolkit.Animation.SequenceAnimation();
var fadeOutAnimationParallel = new AjaxControlToolkit.Animation.ParallelAnimation();

var addAnimation = new AjaxControlToolkit.Animation.FadeOutAnimation(document.getElementById('<%= pnlSelectedPictureEditOuter.ClientID %>'), .25, 25, 0, 1, true);

fadeOutAnimationParallel.add(addAnimation);
addAnimation = new AjaxControlToolkit.Animation.FadeOutAnimation(document.getElementById('<%= pnlSlideshowOptionsEditOuter.ClientID %>'), .25, 25, 0, 1, true);
fadeOutAnimationParallel.add(addAnimation);
addAnimation = new AjaxControlToolkit.Animation.FadeInAnimation(document.getElementById('<%= divPauseToEdit.ClientID %>'), .25, 25, 0, 1, true);
fadeOutAnimationParallel.add(addAnimation);
fadeOutAnimationSeq.add(fadeOutAnimationParallel);

addAnimation = new AjaxControlToolkit.Animation.StyleAction(document.getElementById('<%= lbtnHideShowEditPnl.ClientID %>'), .1, 25, 'display', 'none');
fadeOutAnimationSeq.add(addAnimation);
addAnimation = new AjaxControlToolkit.Animation.StyleAction(document.getElementById('<%= lbtnHideShowSlideshowPnl.ClientID %>'), .1, 25, 'display', 'none');
fadeOutAnimationSeq.add(addAnimation);

fadeOutAnimationSeq.play();

document.getElementById('<%= hfPlayPauseState.ClientID %>').value = '1';
}

function onPauseClick()
{
clearTimeout(counter);
counter = null;
playButton.elmt.style.display = "inline-block";
pauseButton.elmt.style.display = "none";

document.getElementById('<%= lbtnHideShowEditPnl.ClientID %>').style.display = '';
document.getElementById('<%= lbtnHideShowSlideshowPnl.ClientID %>').style.display = '';
AjaxControlToolkit.Animation.FadeInAnimation.play(document.getElementById('<%= pnlSelectedPictureEditOuter.ClientID %>'), .25, 25, 0, 1, true);
AjaxControlToolkit.Animation.FadeInAnimation.play(document.getElementById('<%= pnlSlideshowOptionsEditOuter.ClientID %>'), .25, 25, 0, 1, true);
AjaxControlToolkit.Animation.FadeOutAnimation.play(document.getElementById('<%= divPauseToEdit.ClientID %>'), .25, 25, 0, 1, true);

document.getElementById('<%= hfPlayPauseState.ClientID %>').value = '0';
}

function onNextClick()
{
slideshowControl = document.getElementById('<%= hfSlideshowID.ClientID %>');
PageMethods.GetNextDZI(document.getElementById('<%= hfCurrentDZI.ClientID %>').value, slideshowControl.value, OnSucceeded, OnFailed);
}

function onPrevClick()
{
slideshowControl = document.getElementById('<%= hfSlideshowID.ClientID %>');
PageMethods.GetPrevDZI(document.getElementById('<%= hfCurrentDZI.ClientID %>').value, slideshowControl.value, OnSucceeded, OnFailed);
}

// Callback function invoked on successful
// completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
if (methodName == "GetNextDZI")
{
switchTo(result);
}

if (methodName == "GetPrevDZI")
{
switchTo(result);
}

if (methodName = "GetInitialDZI")
{
switchTo(result);
}
}

// Callback function invoked on failure
// of the page method.
function OnFailed(error, userContext, methodName)
{
if (error !== null)
{

}
}

function switchTo(dzi)
{
if (dzi)
{
//in the array, index 0 is the DZI file, index 1 is the photoID
var dziFile = dzi.split(",")[0];
var photoID = dzi.split(",")[1];

/*Get the JSON object that contains the list of thumbnail clientIDs and their associated photoIDs. Since the photoID is the key, to get the clientID of the image we need to highlight, just find the value for the property in thumbnailList that is named the photoID. */

var hfThumbnailList = document.getElementById('<%= hfThumbnailList.ClientID %>').value;
thumbnailList = eval(hfThumbnailList);
var thumbnailImg = document.getElementById(thumbnailList[photoID]);
//Get the image that was previously selected to unhighlight it
var prevPhotoID = document.getElementById('<%= hfDispID.ClientID %>').value;
var prevImg;

if (prevPhotoID.length > 0)
{
prevImg = document.getElementById(thumbnailList[prevPhotoID]);
prevImg.style.border = 'solid 2px #CCCCCC';
prevImg.style.paddingLeft = '3px';
prevImg.style.paddingRight = '3px';

}

thumbnailImg.style.border = 'solid 2px black';
thumbnailImg.style.paddingLeft = '3px';
thumbnailImg.style.paddingRight = '3px';

viewer.openDzi(dziFile);
document.getElementById('<%= hfCurrentDZI.ClientID %>').value = dziFile;
document.getElementById('<%= hfDispID.ClientID %>').value = photoID;

setScroll();

//reset the counter if it is running, it is null if it is not
if (counter !== null)
{
clearTimeout(counter);
counter = setTimeout("onNextClick()", COUNTDOWN);
}

}
else
{
viewer.close();
}

}

--- end code

In a nutshell what happens is when the next or prev buttons are pressed a call is made to a pagemethod that retrieves the filename of the next DZI file from our database and returns it and the callback function calls the switchto function which changes the DZI being shown in the viewer (as well as muck around with the filmstrip piece which I don't want to get into as it's the most complex part of this whole thing).

I am looking at overhauling this and putting a JSON string in a HF that would contain the information I need but for now I am sticking with the database calls.