Делаем авторотатор банеров на jQuery с эффектами прозрачности (VAMshop)

Задачу организации ротации банеров с эффектами перехода я решил, использовав jQuery и плагин Easy Jquery Auto Image Rotator. Итог можно посмотреть на главной странице uspehvdom.com. Опишу этапы реализации:

1. Делаем вывод нескольких банеров одновременно. Для этого открываем includes/banners.phpи после

   if ($banner = vam_banner_exists('dynamic', 'banner')) { $vamTemplate->assign('BANNER',vam_display_banner('static', $banner)); }

   if ($banner = vam_banner_exists('dynamic', 'banner')) { $vamTemplate->assign('BANNER',vam_display_banner('static', $banner)); }

   добавляем переменные для дополнительных групп:

   if ($banner = vam_banner_exists('dynamic', 'banner1')) { $vamTemplate->assign('BANNER1',vam_display_banner('static', $banner)); } if ($banner = vam_banner_exists('dynamic', 'banner2')) { $vamTemplate->assign('BANNER2',vam_display_banner('static', $banner)); }

   if ($banner = vam_banner_exists('dynamic', 'banner1')) { $vamTemplate->assign('BANNER1',vam_display_banner('static', $banner)); } if ($banner = vam_banner_exists('dynamic', 'banner2')) { $vamTemplate->assign('BANNER2',vam_display_banner('static', $banner)); }

   Таким образом мы добавили две группы – banner1 и banner2.

2. Открываем templates/наш шаблон/stylesheet.css и добавляем стили для ротатора

   div.rotator {position:relative;height:440px;} div.rotator ul li {float:left;position:absolute;list-style: none;} div.rotator ul li.show {z-index:500;}

   div.rotator {position:relative;height:440px;} div.rotator ul li {float:left;position:absolute;list-style: none;} div.rotator ul li.show {z-index:500;}

   где height:440px – высота банеров.

3. Открываем templates/наш шаблон/index.html и в нужном месте добавляем код вывода банеров:

   <div class="rotator"> <ul> <li class="show">{$BANNER}</li> <li>{$BANNER1}</li> <li>{$BANNER2}</li> </ul> </div>

   <div class="rotator"> <ul> <li class="show">{$BANNER}</li> <li>{$BANNER1}</li> <li>{$BANNER2}</li> </ul> </div>

4. Открываем templates/наш шаблон/javascript/general.js.php и добавляем в конец собственно скрип ротации:

   function theRotator() { //Set the opacity of all images to 0 $('div.rotator ul li').css({opacity: 0.0});   //Get the first image and display it (gets set to full opacity) $('div.rotator ul li:first').css({opacity: 1.0});   //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds   setInterval('rotate()',6000);   }   function rotate() { //Get the first image var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));   if ( current.length == 0 ) current = $('div.rotator ul li:first');   //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));   //Un-comment the 3 lines below to get the images in random order   //var sibs = current.siblings(); //var rndNum = Math.floor(Math.random() * sibs.length ); //var next = $( sibs[ rndNum ] );   //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000);   //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show');   };   $(document).ready(function() { //Load the slideshow theRotator(); $('div.rotator').fadeIn(1000); $('div.rotator ul li').fadeIn(1000); // tweek for IE });

   function theRotator() { //Set the opacity of all images to 0 $('div.rotator ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div.rotator ul li:first').css({opacity: 1.0}); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('rotate()',6000); } function rotate() { //Get the first image var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first')); if ( current.length == 0 ) current = $('div.rotator ul li:first'); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first')); //Un-comment the 3 lines below to get the images in random order //var sibs = current.siblings(); //var rndNum = Math.floor(Math.random() * sibs.length ); //var next = $( sibs[ rndNum ] ); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { //Load the slideshow theRotator(); $('div.rotator').fadeIn(1000); $('div.rotator ul li').fadeIn(1000); // tweek for IE });

На этом все.