弹性滑块。根据点击图片动态启动滑块

Question

我有一个页眉中有一个 foreach，显示了我的 flexslider 的前 5 个图像。我想根据点击的图片启动滑块弹出窗口。

我的 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 是双向数组，其中：

         $image[]['url']

包含 URL 个图片

          $image[]['position']

滑块中包含位置图像

我知道 flexslider 的选项 startAt（0 从第一张图片开始），但我想用 jQuery 动态地获取这个整数值。我有 "startSlide" class 但我不知道如何获取点击事件...

我尝试获取 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();
       });

但总是从第一张图片开始

提前致谢。

Answer 1

最终这个解决方案对我有用。

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();
         });

这个fiddle对我帮助很大：http://jsfiddle.net/We4GA/

现在的问题是当我关闭模式并再次打开时，Slider 实例已经创建并且滑块不会在该图像中打开。对此问题有何评论？

弹性滑块。根据点击图片动态启动滑块

Flexslider. Start slider dinamically according to the clicked image

javascript

jquery

flexslider