As promised earlier, here are the slides
and the sample code
from my WebDD talk
The code builds an image slide show control and an extender that will zoom its target in on mouse hover and zoom out on mouse unhover doing that with a fancy animation stolen from the AJAX Control Toolkit
. Some info that you may find useful when reading the code in no particular order:
- ImageSlideShowEmptyClass: this one shows a simple class that inherits from Sys.UI.Control.
- ImageSlideShowUpdatePanel: the server control, happily living in an UpdatePanel.
- HoverZoomExtender: an image of a pair of lazy pandas chewing at bamboo sticks being extended to provide a zoom in animation on hover.
You can extend the ImageSlideShow control by adding an extender for every image. Just add this code to the end of the AddSlide() method:
////////////////////////////////////////////////HoverZoomExtender imageZoomer = new HoverZoomExtender();imageZoomer.ID = imageID + "ZoomExtender";this.Controls.Add(imageZoomer);imageZoomer.TargetControlID = slideImage.ID;imageZoomer.ZoomFactor = 1.5;
That's it! Happy coding!