Philadelphia, PA +267 235 3589 info@proficiencyconsulting.com

Article

Add fade effect to SlideShowExtender using jQuery

Rating: 12889 user(s) have rated this article Average rating:4.33
Posted by: orest, on 4/9/2010, in category ".NET Articles "
Views: this article has been read 22054 times

Asp.NET Ajax Control toolkit has a number of useful controls. One of them is a SlideShowExtender. It allows you to do number of different things, but the main drawback of this extender is its inability to add transitions between slides. There are different approaches that descried on the different articles, mine is using jQuery to add a fade effect between slide changes. As a starting point I used this forum http://forums.asp.net/t/1086320.aspx With only few lines of code you can have nice slide transitions with fade effect


Asp.NET Ajax Control toolkit has a number of useful controls. One of them is a SlideShowExtender. It allows you to do number of different things, but the main drawback of this extender is its inability to add transitions between slides. There are different approaches that descried on the different articles, mine is using jQuery to add a fade effect between slide changes. As a starting point I used this forum http://forums.asp.net/t/1086320.aspx.

With only few lines of code you can have nice slide transitions with fade effect.

The main idea here is

  1. Subscribe for Slide change event on page load

    function pageLoad() {
    	var ss = $find("slideshowBehavior");
    	ss.add_slideChanging(onChanging);
    }
                                    

  2. When slide is changing I use jQuery to hide the image and then fade it in slowly

    function onChanging(sender, args) {
    	$("#Image1").hide();
    	$("#Image1").fadeIn("slow");
    }
                                    

That is it. Note you don’t need any animation extender or anything else like that, just jQuery.


How would you rate this article?

Questions? Comments?

Want to get started?