Slider Gallery plug-in
In this section, you will learn to use Slider Gallery plug-in for developing image gallery slider.
In this section, you will learn to use Slider Gallery plug-in for developing image gallery slider.Slider Gallery plug-in
In this section, you will learn to use Slider Gallery plug-in for developing image gallery slider. This shows a demonstration of a slider widget from the jQuery UI library .In this example a image gallery inside a window with slider is given. When you move the slider or click on any title display on slider, the images related to that title comes in front of the window.
sliderGallery.html
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Slider Gallery</title> <!-- For this plugin this version "jquery-1.2.6.js" is must--> <script src="SliderGallery/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> <script src="SliderGallery/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="SliderGallery/Slider.css" media="screen" /> <script type="text/javascript" charset="utf-8"> window.onload = function () { var container = $('div.sliderGallery'); var ul = $('ul', container); var itemsWidth = ul.innerWidth() - container.outerWidth(); $('.slider', container).slider({ min: 0, max: itemsWidth, handle: '.handle', stop: function (event, ui) { ul.animate({'left' : ui.value * -1}, 500); }, slide: function (event, ui) { ul.css('left', ui.value * -1); } }); }; </script> </head> <body> <div id="container"> <h1>Slider Gallery</h1> <p>Drag slider to move the images according to their categorie</a>.</p> <div class="sliderGallery"> <ul> <li><img class="pb-airportexpress" src="http://static.jqueryfordesigners.com/demo/images/pb_airport_express.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_airport_extreme.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_timecapsule_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_keyboards20070807.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mighty_mouse.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_cinema_display20071026.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mac_pro_20070622.jpg" /></li> <li><img class="pb-macmini" src="http://static.jqueryfordesigners.com/demo/images/pb_mac_mini.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_macbook20071026.jpg" /></li> <li><img class="pb-macbookair" src="http://static.jqueryfordesigners.com/demo/images/pb_macbookair_20080115.jpg" /></li> <li><img class="pb-macbookpro" src="http://static.jqueryfordesigners.com/demo/images/pb_macbook_pro20071026.jpg" /></li> <li><img class="pb-imac" src="http://static.jqueryfordesigners.com/demo/images/pb_imac20071026.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_macosx_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_ilife_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_dot_mac_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_iwork_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_quicktime.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_aperture20080212.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_final_cut_studio2_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_final_cut_express_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_logic_studio_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_logic_express_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_shake_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_apple_remote_desktop_20080115.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_xserve.jpg" /></li> <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_xserve_raid.jpg" /></li> <li><img class="pb-xsan" src="http://static.jqueryfordesigners.com/demo/images/pb_xsan_20080115.jpg" /></li> <li><img class="pb-macosxserver" src="http://static.jqueryfordesigners.com/demo/images/pb_macosx_server20071016.jpg" /></li> </ul> <div class="slider"> <div class="handle"></div> <span class="slider-lbl1">Wi-Fi</span> <span class="slider-lbl3">Macs</span> <span class="slider-lbl4">Applications</span> <span class="slider-lbl5">Servers</span> </div> </div> </div> </body> </html> |
OUTPUT
Initially the slider position is"wi-fi", but when you click on application :
