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']

包含图片的网址

          $image[]['position']

在滑块中包含位置图像

我知道flexslider的选项startAt（从第一个图像开始为0），但是我想用jQuery取这个整数值。我有“ startSlide”类，但我不知道如何获取点击事件...

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

这个小提琴对我有很大帮助：http://jsfiddle.net/We4GA/

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

Flexslider。根据点击的图片动态地启动滑块

1 个答案: