Monday, March 26, 2012

Updating Slideshow PlayInterval with Slider

I am updating the Slideshow PlayInterval with a SliderControl. I have the SlideShow in an UpdatePanel and all is working fine EXCEPT the entire slide show starts over when I change the slider. I would like ONLY the PlayInterval property to update and the SlideShow to continue from the image it is displaying.

Does anybody know if this is possible?? If so, any suggestions....

Thanks,
Jim

Hi Jim,

You may save current image index in a hiddenfield before the PlayInterval is updated, and restore it after that.

For instance:

before:

var index = $find("behaviorIDofSliderShow")._currentIndex;

after:

$find("behaviorIDofSliderShow")._currentIndex = index;


Raymond,

I am thinking this is C# code. I am using VB and the $find isn't working. I am using something like:

Index = SlideShowExtender1.BehaviorID.IndexOf() but can't figure out what goes in the brackets because the $find doesn't work...

Wonder if you can help me out in a VB sort of way?

Thanks,

Jim


Jim,

It's javascript, which runs on the client. It should be embedded in the html source directly. Below is an example of using javascript:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("SliderShowImages/Blue hills.jpg", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("SliderShowImages/Sunset.jpg", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("SliderShowImages/Winter.jpg", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide("SliderShowImages/Water lilies.jpg", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide("SliderShowImages/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
}

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides2(string contextKey)
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("http://forums.asp.net/Themes/FAN/style/i/logo.png", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("http://forums.asp.net/themes/fan/style/i/avatar_null_59x59.jpg", "Sunset", "Setting sun")};
}

protected void Page_Load(object sender, EventArgs e)
{
this.slideshowextend1.ContextKey = Request.QueryString["qs"];
string script = "window.open(imgUrl);";
Image1.Attributes.Add("onclick", script);
}
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body text="#1000">
<form id="form1" runat="server">
<div
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager
<asp:Image ID="Image1" runat="server"
Height="300" Style="border: 1px solid black;width:auto"
ImageUrl="/SlideShowImages/Blue hills.jpg" AlternateText="Blue Hills image" />
<asp:Label runat="server" ID="imageDescription" CssClass="slideDescription"></asp:Label><br /><br />
<asp:Button runat="Server" ID="prevButton" Text="Prev" />
<asp:Button runat="Server" ID="playButton" Text="Play" />
<asp:Button runat="Server" ID="nextButton" Text="Next" />
<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server"
TargetControlID="Image1" BehaviorID="ss1" SlideShowServicePath="slidershowextender.aspx" SlideShowServiceMethod="GetSlides"
AutoPlay="true" ImageTitleLabelID="imageTitle" ImageDescriptionLabelID="imageDescription" NextButtonID="nextButton"
PlayButtonText="Play"
StopButtonText="Stop" PreviousButtonID="prevButton"
PlayButtonID="playButton" Loop="true" />
<input id="Button1" type="button" value="Change Interval" onclick="return Button1_onclick()" />
<asp:Button ID="Button2" runat="server" Text="Stop" OnClientClick="stop();return false;"/>
<input id="Text1" type="text" value="1000" /></div>
</form
<script type="text/javascript">var slider1;
function pageLoad(){
slider1 = $find("ss1");
slider1.add_slideChanging(onSlideChanged);
slider1._currentIndex = 1;
}
var imgUrl = "http://www.microsoft.com";

function onSlideChanged(sender, args){
// var index = sender.get_imageTitleLabelID();
imgUrl = slider1._currentImageElement.src;
// alert(args.get_slideIndex());
}

function stop()
{
var s=$find('ss1');
if(s._inPlayMode)
s._play();
}

function Button1_onclick() {
alert(slider1.get_playInterval());
var interval = $get("Text1").value;
slider1.set_playInterval(interval);
alert(slider1.get_playInterval());
}

</script>

</body>
</html>

No comments:

Post a Comment