Hi Everyone!
I have encountered an issue trying to use the cycle plugin to show a
very simple image slideshow in ASP.Net. I have the cycle plugin in a
master page and it works great until a postback is performed on a
page. When I perform a postback an empty slide is inserted between
every image. The slideshow becomes: blank -> image 1 -> blank -> image
2 -> blank -> image 1 ...
Once I navigate to another page the slideshow is fine again until a
postback is performed.
Has anyone had any experience with this?
Mike
Just in case anyone finds it helpful, here is what I am doing ...
Here is my master page:
<%@ Master Language="C#" AutoEventWireup="true"
CodeBehind="Master.master.cs"
Inherits="WebProject" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head runat="server">
<title>Untitled</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="Stylesheet" type="text/css" href="Master/
HeaderSlideshow.css" />
</head>
<body style="margin-left: 0px; margin-right: 0px;">
<form id="form" runat="server">
<script src='<%=ResolveUrl("~/Scripts/jquery.js" ) %>' type="text/
javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery.cycle.plugin.js" )
%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Master/HeaderSlideshow.js" ) %>'
type="text/javascript"></script>
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<div class="headerSlideshow">
<asp:Repeater runat="server" ID="slideshowRepeater">
<ItemTemplate>
<dxe:ASPxImage runat="server" ID="image"
ImageUrl='<%# Container.DataItem %>' EnableViewState="false">
</dxe:ASPxImage>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</form>
</body>
</html>
Here is my javascript (HeaderSlideshow.js):
$(document).ready(function() {
$('.headerSlideshow').cycle({
fx: 'scrollDown',
speed: 1000,
cleartype: true,
cleartypeNoBg: true,
timeoutFn: calculateSlideTimeout
});
});
function calculateSlideTimeout(currElement, nextElement, opts,
isForward) {
// Set odd number slides (which will always be the eas logo) to
have 11 second timeouts
// and even number slides (which will be R&AC, broker or
association logos) to have 4 second timeouts
var index = opts.currSlide;
return index % 2 ? 4000 : 11000;
}
Here is my css (HeaderSlideshow.css):
.headerSlideshow
{
width:300px;
height:80px;
margin:1px;
overflow:hidden;
border:0px;
}
.headerSlideshow img {
top: 0;
left: 0;
}
