FlexSlider. Начните слайдер динамически в соответствии с нажатием на изображение - PullRequest
Новая
       54

FlexSlider. Начните слайдер динамически в соответствии с нажатием на изображение

1 голос
/ 08 июня 2019

У меня есть страница с foreach в заголовке, которая показывает 5 первых изображений моего flexslider. Я хочу запустить всплывающее окно в соответствии с нажатием на изображение.

Мой HTLM: 

  <ul class="images">
      @foreach ($images as $image)
         <li class="bkg-cover" style="background-image: {{
          $image['url']}}">
             <a class="startSlide" title="View Photo"><span>View 
               Photo</span></a>
         </li>
     @endforeach
   </ul>

Тогда мой сценарий: 

    <script type="text/javascript">

       //View Photos
      $('.images > li > a').on('click', function(e) {
          e.preventDefault();
          $('.images-modal').show();
          var slider = $('#ImagesSlide').data('flexslider');
          slider.resize();
       });

      //FlexSlider
      $('#imagesSlide').flexslider({
          animation: "slide",
          useCSS: false,
          smoothHeight: false,
          pauseOnHover: false,
          controlNav: false,
          //Integer: The slide that the slider should start on
          startAt: 0, 
          prevText: '<i class="fa fa-angle-left"></i>',
          nextText: '<i class="fa fa-angle-right"></i>'
      });   

  </script>

$ изображение - двумерный массив, где: 

         $image[]['url']

Содержит URL изображения 

          $image[]['position']

Содержит изображение положения в слайдере

Я знаю опцию startAt flexslider (0 start на первом изображении), но я хочу динамически принимать это целочисленное значение с помощью jQuery. У меня есть класс "startSlide", но я не знаю, как получить событие click ...

Я пытался получить значение атрибута rel: 

 <ul class="images">
      @foreach ($images as $image)
         <li class="bkg-cover" style="background-image: {{
              $image['url']}}">
             <a class="startSlide" rel="$image['position]" title="View 
               Photo"><span>View 
               Photo</span></a>
         </li>
     @endforeach
   </ul>

И создайте слайдер так: 

   $('#property .property-images .info .button, #property .property-images 
         ul.images > li > a').on('click', function(e) {
           e.preventDefault();
           $('.images-modal').show();
           var numberSlider = $('.startSlide').attr('rel').valueOf();
           var numSlider = parseInt(numberSlider);
           var slider = $('#propertyImagesSlide').flexslider({
               animation: "slide",
               useCSS: false,
               smoothHeight: false,
               pauseOnHover: false,
               controlNav: false,
               startAt: numSlider,
               prevText: '<i class="fa fa-angle-left"></i>',
               nextText: '<i class="fa fa-angle-right"></i>'
           });
           //var slider = $('#propertyImagesSlide').data('flexslider');
           slider.resize();
       });

Но всегда начинайте с первого изображения

Заранее благодарим.

1 Ответ

0 голосов
/ 09 июня 2019

Наконец-то это решение сработало для меня.

HTML: 

  <ul class="images">
       @foreach ($property->allImages() as $position => $image)
          <li class="bkg-cover" style="background-image: {{ $image['url'] }}">
             <a class="startSlide" rel="{{ $position }}" title="View Photo"> 
             <span>View Photo</span></a>
          </li>
       @endforeach
  </ul>


    $('a').on('click', function(e) {
        e.preventDefault();
        $('.images-modal').show();
        var memberid = $(this).attr('rel').valueOf();
        var memberidNo = parseInt(memberid);
        var slider = $('#propertyImagesSlide').flexslider({
            animation: "slide",
            useCSS: false,
            smoothHeight: false,
            pauseOnHover: false,
            controlNav: false,
            startAt: memberidNo,
            prevText: '<i class="fa fa-angle-left"></i>',
            nextText: '<i class="fa fa-angle-right"></i>'
             });
            slider.resize();
         });

Эта скрипка мне очень помогла: http://jsfiddle.net/We4GA/

Теперь проблема в том, когда я закрываюсьмодальный и открытый снова, экземпляр Slider уже создан, и слайдер не открывается в этом изображении.Любой комментарий к этой проблеме?

...