Один и тот-же скрипт несколько раз на странице

Тема в разделе "JavaScript", создана пользователем Menro, 21 июл 2014.

Модераторы: ZiX
  1. Menro

    Menro web, seo, email, hack

    Регистр.:
    27 янв 2008
    Сообщения:
    608
    Симпатии:
    117
    Всем привет!
    К сожалению, я очень плохо разбираюсь в JS, да и вообще в программировании не силен.
    Из-за этого, прошу Вашей помощи!

    Имею вот такая страницу:

    Под первым изображением реализован слайдер: Рекомендуемые товары для этой коллекции.
    К сообщению прикрепил файлик: jquery.flexisel.js, который отвечает за анимацию.
    Далее скрипт запускается следующим кодом:

    HTML:
    <script type="text/javascript">
    
    $(window).load(function() {
        $("#flexiselDemo1").flexisel();
        $("#flexiselDemo2").flexisel({
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint:480,
                    visibleItems: 5
                },
                landscape: {
                    changePoint:640,
                    visibleItems: 5
                },
                tablet: {
                    changePoint:768,
                    visibleItems: 5
                }
            }
        });
    
        $("#flexiselDemo3").flexisel({
            visibleItems: 5,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 3000,           
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint:480,
                    visibleItems: 1
                },
                landscape: {
                    changePoint:640,
                    visibleItems: 2
                },
                tablet: {
                    changePoint:768,
                    visibleItems: 3
                }
            }
        });
    
        $("#flexiselDemo4").flexisel({
            clone:false
        });
       
    });
    </script>
    Ну и сам HTML у меня выглядит вот так:

    HTML:
    <ul id="flexiselDemo1">
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
      <li><a href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li></ul>
    В таком виде у меня всё работает. Но вот только мне нужно подобное сделать для каждого товара. Я вставил точно такой же HTML-код для второго товара, но по умолчанию слайдер скрыт и не работает.

    Помогите пожалуйста, как мне вставить этот слайдер несколько раз на странице, от 1-го до 20-ти раз...
     

    Вложения:

  2. aniucum

    aniucum Постоялец

    Регистр.:
    1 янв 2014
    Сообщения:
    120
    Симпатии:
    103
    для начала стоит разобраться с таблицами стилей и html
    в работающем слайдере список из картинок у вас обёрнут в <div class="nbs-flexisel-container">...</div>, а в других просто вставлены в виде обычного списка <ul id="flexiselDemo1">...</ul>
     
  3. NDK13

    NDK13 Создатель

    Регистр.:
    31 авг 2012
    Сообщения:
    36
    Симпатии:
    14
    Код:
    $(window).load(function() {
    $("#flexiselDemo1").flexisel();
    $("#flexiselDemo2").flexisel();
    $("#flexiselDemo3").flexisel();
    $("#flexiselDemo4").flexisel();
    }
    
    и далее менять в каждом товаре id

    Код:
    <ul id="flexiselDemo1">
    <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
    <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
    </ul>
    
    Код:
    <ul id="flexiselDemo2">
    <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
    <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
    </ul>
    
     
    Menro нравится это.