I'm trying to use Cycle2 slideshow plugin with ASP .NET. Images are dynamically loading from server.
Slideshow doesn't work and images are loaded/shown one after the other in the page but when I check the page html in chrome inspect element, html looks fine.
I just wont to know how to load images from server side(dynamically) to the slideshow.
Here is my HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#imageUrls").load("LoadImages.aspx", function() {
$('.cycle-slideshow').cycle();
});
})
</script>
</head>
<body>
<div id="imageUrls" class="cycle-slideshow"></div>
</body>
</html>This is the server response
<img src="http://example.com/images/1.jpg">
<img src="http://example.com/images/1.jpg">
This is how it's looks in chrome inspect element and works fine when I run this code in browser.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="http://example.com/images/1.jpg">
<img src="http://example.com/images/2.jpg">
</div>
</body>
</html>How to create a slide show with dynamic image loading using ASP .NET?
Finally found the mistake. Corrected code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#imageUrls").load("ImageLoad.aspx", function() {
$('#imageUrls').cycle();
});
})
</script>
</head>
<body>
<div id="imageUrls"></div>
</body>
</html>Shouldn't use class="cycle-slideshow" which automatically initialize a slide show.
Cycle2 slideshows can be automatically initialized simply by adding the classname cycle-slideshow to your slideshow container element.
<div class="cycle-slideshow" ...
Cycle2 will automatically find and initialize a slideshow for any element that contains this classname. If you do not want this behavior then do not add the cycle-slideshow class to your slideshow and instead initalize the slideshow programmatically by invoking the cycle method on the slideshow container element:
$( '.mySlideshows' ).cycle();
Auto-initialization is not supported for slideshows that are added to the DOM after jQuery's ready event has fired. In this case you will need to programatically initialize your slideshow by invoking the cycle method as shown above. You do not need to qualify your selector to the part of the DOM that has been updated as Cycle2 will not re-initialize a running slideshow if you invoke cycle on it more than once. So it is perfectly safe to run the code above multiple times without having to worry about slideshows that are already running.