<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple jQuery Hover Image Gallery Version 2.0 by PlaKriM</title> <style type="text/css"> #SimpleGallery{ padding:5px; margin:0px; } #SimpleGallery div{ float:left; font:bold 12px Tahoma; text-align:center; width:320px; padding:0px; margin:0px; } #SimpleGallery ol{ float:left; width:110px; padding:0px; margin:0px; } #SimpleGallery li{ width:50px; height:50px; padding:1px; margin:0px; float:left; list-style:none; } #SimpleGallery li img{ border:0px; } </style> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.simple.gallery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#SimpleGallery').SimpleGallery({activeItem:0}); }); </script> </head> <body> <div id="SimpleGallery"> <div><img /><span></span></div> <ol> <li><a href="images/large/1.jpg" title="Description of image 1"><img src="images/thumb/1.jpg" /></a></li> <li><a href="images/large/2.jpg" title="Description of image 2"><img src="images/thumb/2.jpg" /></a></li> <li><a href="images/large/3.jpg" title="Description of image 3"><img src="images/thumb/3.jpg" /></a></li> <li><a href="images/large/4.jpg" title="Description of image 4"><img src="images/thumb/4.jpg" /></a></li> <li><a href="images/large/5.jpg" title="Description of image 5"><img src="images/thumb/5.jpg" /></a></li> <li><a href="images/large/6.jpg" title="Description of image 6"><img src="images/thumb/6.jpg" /></a></li> <li><a href="images/large/7.jpg" title="Description of image 7"><img src="images/thumb/7.jpg" /></a></li> <li><a href="images/large/8.jpg" title="Description of image 8"><img src="images/thumb/8.jpg" /></a></li> <li><a href="images/large/9.jpg" title="Description of image 9"><img src="images/thumb/9.jpg" /></a></li> <li><a href="images/large/10.jpg" title="Description of image 10"><img src="images/thumb/10.jpg" /></a></li> </ol> </div> </body> </html>
(function($){ $.fn.SimpleGallery = function(_config){ var _config = $.extend({ swapDuration: 3500, fadeOutDuration: 200, fadeInDuration: 500, activeItem : 0 }, _config); function _view($item){ var $SG = $('#SimpleGallery'); var itemCount = $SG.find('li').length; var itemIndex = ($item.index() + 1); if((itemIndex+1) != _config.activeItem && !(_config.activeItem == 0 && itemIndex == itemCount)){ _config.activeItem = itemIndex; if(_config.activeItem == itemCount){ _config.activeItem = 0; } $SG.find('div') .stop() // Stop current effect .fadeTo(0, 1) // Reset image's opacity .fadeOut(_config.fadeOutDuration, function(){ // Start image's fade in for hide old image item $(this).find('img').attr('src',$item.find('a').attr('href')); // Set current image $(this).find('span').text($item.find('a').attr('title')); // Set current description $(this).fadeIn(_config.fadeInDuration); // Start image's fade out for show current image item }); } } function _play(){ _view($('#SimpleGallery').find('li').eq(_config.activeItem)); } return this.each(function (){ _play(); var _interval = setInterval(_play, _config.swapDuration); $(this).find('li').hover(function(){ if(_interval){ clearInterval(_interval); } _interval = setInterval(_play, _config.swapDuration); $('#SimpleGallery').find('div').show(); _view($(this)); }).find('a').click(function(){return false;}); }); } })(jQuery);
Load balance : Server 05
