The AJAX SlideShowExtender is pretty useful. It does what it says and works without much fuss. There was one trick I needed it to perform that I could not find natively within the control. That was to set the slide’s current index. With a little JavaScript however I could make the control do what I wanted.
The example below assumes a few things. First you already have a SlideShowExtender setup and working (or see this post). Second this SlideShowExtender is on a page all by itself so the index to set the slide to is passed in the URL. The scenario I had was this SSE was showing full images, the index was passed from another page that had a SSE showing thumbnails.
JavaScript in <head>
<script type="text/javascript">
function pageLoad() {
var slider = $find("sse");
var photoIndex = GetQuerystring('Index', 0);
slider._currentIndex = photoIndex - 1;
slider._slides = '';
slider.setCurrentImage();
}
function GetQuerystring(key, default_) {
if (default_ == null) default_ = '0';
key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null)
return default_;
else
return qs[1];
}
</script>
The GetQuerystring function is what grabs the Index value I pass from the page with the thumbnails. It does not have anything else to do with setting the slide index. The code in the pageLoad function sets the index on the slide_currentIndex line. The slider.setCurrentImage() line does pretty much what it says. I added the slider._slider = ‘’ to avoid an error (not a show stopper just a bit annoying).
Control in <body>
<cc1:SlideShowExtender ID="ssePhotos" runat="server" TargetControlID="imgFull" AutoPlay="false"
PreviousButtonID="btnPrev" NextButtonID="btnNext" SlideShowServicePath="PlacePhotos.asmx"
SlideShowServiceMethod="GetPlaceFullPhotos" BehaviorID="sse" ImageDescriptionLabelID="lblPictureDescription">
</cc1:SlideShowExtender>
The main property to set with the SSE is the BehaviorID. This is what a JavaScript function can use to find the control rather than the control’s ID value.
Technorati Tags: AJAX,ASP.Net,JavaScript
