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

25.02.2011 | Написал

Задачу организации ротации банеров с эффектами перехода я решил, использовав 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', '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;}

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

  3. Открываем templates/наш шаблон/index.html и в нужном месте добавляем код вывода банеров:
    <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
    });

На этом все.

Метки: ,
19 комментариев читателей статьи "Делаем авторотатор банеров на jQuery с эффектами прозрачности (VAMshop)"
  • Юмиком пишет:

    Красиво выглядит с эффектом прозрачности

  • Евгений пишет:

    А как сделать, чтобы баннер публиковался только на главной странице?

  • Евгений пишет:

    Все работает, спасибо, но почему то при открытии страницы 3-5 секунд на месте баннера пусто, а потом появляется картинка, и между последней картиной и началом нового цикла разрыв большой. Пробовал в скрипте менять разные значения, ничего не помогает. У вас здесь uspehvdom.com все плавно. Что нужно изменить, чтобы получить такой эффект

  • Евгений Молодецкий пишет:

    Так может быть если у Вас пустой li…./li выводится.

  • Евгений пишет:

    Точно. А почему так может быть? Остальные li нормальные. Вроде все точно по инструкции делал.

    …………………………………

  • Евгений Молодецкий пишет:

    Банер не выводится. Либо отключен либо метка не верно вставлена.

  • Евгений пишет:

    Убрал
    {$BANNER}
    Все стало нормально. Пустые теги пропали.

  • Евгений пишет:

    Что то в коментах не отображаются части кода, которые хотел показать

  • Николай пишет:

    показывает вот такую ошибку Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in Z:\home\localhost\www\vamshop\templates\vamnovd\javascript\general.js.php on line 18
    что я сделал не так, версия магазина 1,62 ?

  • Евгений Молодецкий пишет:

    Что-то делаете не так. Разбирайтесь

  • Саня пишет:

    У меня авторотатор просто не запускается. Все делаю как описано выше. НО такое ощущение что не срабатывает сам скрипт. В чем может быть причина?

  • Саня пишет:

    Оно ни на что не повлияет в работе сайта?

  • Евгений Молодецкий пишет:

    не повлияет

  • Саня пишет:

    Поубирал во всех файлах. не помогло =(

  • Владмир пишет:

    Николай пишет:
    показывает вот такую ошибку Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in Z:\home\localhost\www\vamshop\templates\vamnovd\javascript\general.js.php on line 18

    что я сделал не так, версия магазина 1,62 ?

    Выдает аналогичную ошибку. Все сделано по инструкции. Чего-то не договариваете…

    • Евгений Молодецкий пишет:

      Скрипт в general.js.php нужно завернуть в теги сооветствующие. Ребята, включайте голову, это не инструкция, а все-го лишь пример.


  • Владмир пишет:

    Евгений, большое спасибо!
    Действительно нужно включать голову ))
    Это то что долго искал и не мог реализовать.
    Хорошо, что есть еще люди, которые делятся своими знаниями бесплатно.
    Желаю всяческих благ на Вашем жизненном пути!

Добавить комментарий

Ваш e-mail не будет опубликован.