JQuery动画而不是循环

时间：2016-06-17 18:28:33

标签： jquery jquery-ui jquery-plugins fancybox jquery-cycle

我想对下面的那个做同样的效果（可能有动画）;

codepen sample cycle

HTML：

<html>    
<body>
  <section id="solutions" data-direction="from-left">
    <div class="container">
      <a href="#" class="close"></a>
      <div class="row solutionsRow">
        <div class="col-md-3 no-pad1">
          <div id="right1" class="pics">
            <img class="img-center" src="http://s33.postimg.org/k9sxc4hu7/smart_env.jpg" width="168" height="168" alt="Akıllı Çevre" />
            <ul class="solutions-ul">
              <li lang="tr">
                <i class="fa fa-caret-right"></i> Hava Kirliliği
              </li>
              <li lang="tr">
                <i class="fa fa-caret-right"></i> Orman Yangın Algılama
              </li>
              <li lang="tr">
                <i class="fa fa-caret-right"></i> Deprem Erken Teşhis
              </li>
              <li lang="tr">
                <i class="fa fa-file-image-o"></i> <a class="fancybox1" rel="gallery0" href="http://s33.postimg.org/yiy2aojm7/smart_world.jpg">Ek</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

使用Javascript：

$(document).ready(function() {
  $("#right1").cycle({
    fx: 'scrollRight',
    next: '#right1',
    timeout: -3000,
    easing: 'easeInOutBack'
  });
  $(".fancybox1").fancybox({
    autoSize: true,
    fitToView: true,

  });
});

原因是我在使用循环插件时单击UL内部的锚点时无法打开fancybox。 我想打开fancybox和缩放。

提前致谢。

2 个答案:

答案 0 :(得分：1)

最后和最终编辑
- 另一位满意的客户！哈哈！的

对于未来的SO读者：
最终的解决方案是in this CodePen。

简而言之，此解决方案允许使用cycle.js和FancyBox.js插件“交互”或“混合在一起”......以及使用FancyBox的“图库”功能......并且。 ..和......和...插入PDF链接的可能性（或任何东西！）

（是否有插件混音调试的术语？）

所以你可以从第一个答案开始阅读，然后是下面的后续编辑：
（完全理解解决方案的工作原理）

<小时/>

第一个答案：

我为CodePen修改了一些东西，以便使FancyBox可用于循环...尝试使用jQuery重新创建循环效果。

请参阅this CodePen。

<强>说明：

  1. 我不得不使用2张小猫图片，因为你的图片没有。
  2. 我添加了FancyBox CSS CDN链接（CodePen中缺少）。
  3. 我将图片放在与FancyBox一起使用的#right1 div之外的Cycle.js处。
  4. 我添加了一些CSS，以便能够看到文本的其余部分（在希腊语中）并隐藏图像。
  5. 我删除了你的FancyBox参数，因为没有工作（即使在删除额外的昏迷时）
    6.   

    autoSize：true，
        fitToView：true，

    1. 我在“Ek”链接上添加了click处理程序 它做了这些事情：
      显示隐藏的图像，
      在包装图像的链接上模拟click事件以触发FancyBox。

      2. <强> HTML ：

      <section id="solutions" data-direction="from-left">
<div class="container">
  <a href="#" class="close"></a>
  <div class="row solutionsRow">
    <div class="col-md-3 no-pad1">
      <div id="right1" class="pics">
        <img class="img-center" src="https://upload.wikimedia.org/wikipedia/commons/1/11/Mihail_Manolov_-_Little_Kitten_(by-sa).jpg" width="168" height="168" alt="Akıllı Çevre" /><!--Original url for unavailable image: http://i.imgur.com/CtLbKCN.jpg?1-->
        <ul class="solutions-ul">
          <li lang="tr">
            <i class="fa fa-caret-right"></i> Hava Kirliliği<!--Air pollution-->
          </li>
          <li lang="tr">
            <i class="fa fa-caret-right"></i> Orman Yangın Algılama<!--Forest Fire Detection-->
          </li>
          <li lang="tr">
            <i class="fa fa-caret-right"></i> Deprem Erken Teş<!-- Earthquake Early Diagnosis-->
          </li>
          <li lang="tr">
            <i class="fa fa-file-image-o"></i> <a class="fancyBoxLink" rel="gallery0">EK</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
        <a class="fancybox1" ><img class="imageToLink" src="https://c1.staticflickr.com/1/47/106442109_751ad0e91c.jpg"></a><!--Original url for unavailable image: https://i.imgsafe.org/7887214286.jpg-->
</div>
</section>

      <强> CSS ：

      .imageToLink{
  display:none;
}
.fancyBoxLink{
  color:dodgerblue;
  text-decoration:underline;
  cursor:pointer;
}
li{
  color:white;
}

      <强>脚本：

      $(document).ready(function() {
    console.log("page resetted");

    $("#right1").cycle({
        fx: 'scrollRight',
        next: '#right1',
        timeout: -3000,
        easing: 'easeInOutBack'
    });

    $(".fancyBoxLink").click(function(){    // click handler on EK link
        console.log("Click");
        $(".imageToLink").show();
        $(".fancybox1").click();
    });

    $(".fancybox1").fancybox();
});


      <小时/>

      修改

      （接受答案并获得赏金后）

      你问了一个很好的问题（在下面的评论中）...... 它值得编辑

      使用我的解决方案与许多cycle.js实例，许多链接并使用FancyBox.js“gallery”功能

      它几乎一样......
      但是从点击的链接中，我们必须确定：

      • 哪个周期实例是点击的父级
      • 与之关联的FancyBox类是什么
      • 提供在右侧图像上触发FancyBox的`eq（）`参数是什么

      关于“与...相关”类：
      我在与cycle一起使用的div上使用了 自定义属性 ：
      <div id="right" class="pics" data-fancyBox_class="fancybox0">
      这受HTML5 reference here支持。

      我必须创建一个“延迟”功能，将点击处理程序添加到动态创建的FancyBox上/下图标中，以便显示上一个/下一个图像。

      最后，我快速修复了“点击冲突” （点击链接时，cycle也会触发...）

      大多数更改都在此脚本中see this updated CodePen。

      $(".fancyBoxLink").click(function(){    // click handler on link
    console.log("Click")

    // Retreive the fancyBox picture gallery link class
    var thisFBclass = $(this).closest(".pics").attr("data-fancyBox_class");
    console.log("thisFBclass: "+thisFBclass);

    // determine which link has been clicked
    var thisLink = $(this).html();
    var linkEq;
    $(this).closest("ul").find("a").each(function(i,val){
        if( $(this).html() == thisLink ){
            linkEq = i;
            console.log("linkEq: "+linkEq); // `eq()` argument to provide
        }
    });

    $("." + thisFBclass + " .imageToShow").eq(linkEq).show();
    $("." + thisFBclass).eq(linkEq).click();

    // Quick fix about Cycle click triggered on the link click (click conflict)
    $(this).closest(".pics").click();

    // Call the prev/next show image function - 260ms delay is due to FancyBox time to execute.
    setTimeout(function(){
        dynamicPrevNextHandler();
    },260);
});

// Gallery prev/next handler
function dynamicPrevNextHandler(){
    console.log("dynamic prev/next handlers");
    $("body").find(".fancybox-prev").on("click", function(e){
        console.log("fancy-box-prev");

        // Show the FancyBox displayed image
        $("body").find(".fancybox-inner img").show();
    });
    $("body").find(".fancybox-next").on("click", function(){
        console.log("fancy-box-next");

        // Show the FancyBox displayed image
        $("body").find(".fancybox-inner img").show();
    });
}


      <小时/>

      修改

      （添加了PDF链接功能）

      添加了脚本：

      $(".PDFtrigger").click(function(){
    console.log("PDF!");
    var thisPDF = $(this).attr("href");
    console.log(thisPDF);
    window.open(thisPDF,"_blank");
});

      如何定义链接：

      <a href="http://www.orimi.com/pdf-test.pdf" class="PDFtrigger">Akıllı Otopark - PDF</a>

      查看更新的CodePen

      BUG NOTE ：奇怪的是，window.open()功能在CodePen / Chrome 51中错误 ...新标签页打开，但文档未显示。 FireFox确实表现正常
      我尝试将其作为本地html文件，Chrome不会出错。也尝试了FF47，IE11，Opera ==＆gt;一切顺利。

      Safari 5.1.7（适用于Windows）==＆gt;打开另一个窗口而不是另一个选项卡。当你关闭这个新窗口时，Safari会崩溃。我只是无法弄清楚原因。

      我刚刚更新到Chrome 52 ...问题仍然存在于CodePen中......

答案 1 :(得分：0)

这是一种原始方法，但可以给你一些想法......

HTML：

<html>  
    <style>
        li{
            display: none ;
            border: 2px solid blue ;
            height: 250px ;
            width: 250px ;
        }
    </style>
<body>
  <section id="solutions" data-direction="from-left">
    <div class="container">
      <a href="#" class="close"></a>
      <div class="row solutionsRow">
        <div class="col-md-3 no-pad1">
          <div id="right1" class="pics">
            <ul class="solutions-ul">
                <li>
                    <img class="img-center" src="http://s33.postimg.org/k9sxc4hu7/smart_env.jpg" width="168" height="168" alt="Akıllı Çevre" />
                </li>
                <li lang="tr">
                    <i class="fa fa-caret-right"></i> Hava Kirliliği
                </li>
                <li lang="tr">
                    <i class="fa fa-caret-right"></i> Orman Yangın Algılama
    \           </li>
                <li lang="tr">
                    <i class="fa fa-caret-right"></i> Deprem Erken Teşhis
                </li>
                <li lang="tr">
                    <i class="fa fa-file-image-o"></i> <a class="fancybox1" rel="gallery0" href="http://s33.postimg.org/yiy2aojm7/smart_world.jpg">Ek</a>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js.js" type="text/javascript"></script>
</html>

JS：

$(document).ready(function() {
    let arr = $("#right1").find("li");
    let i = 0;
    var showInterval;

    animation();

    function animation(){
        $(arr[i]).hide();
        (i < arr.length) ? (i++) : (i = 1);
        $(arr[i-1]).show();
            $(arr[i-1]).animate({width: "250px"}, 1400, function(){
                showInterval = setTimeout(function(){
                    if($(arr[i-1]).width() < 400){
                        $(arr[i-1]).hide();                      
                        $(arr[i-1]).css({width: "0px"});
                        animation();
                    }
                },2000);
            });
    }

    $("li").click(function(){
        $(this).stopPropagation;
        if($(this).width() == 250){
            clearTimeout(showInterval);
            if($(this).find("#close").length != 0){
                $(this).remove("#close");
            }
            else{
                $(this).html("<button id='close'>close</button>" + $(this).html())
            }
            $(this).clearQueue();
            $(this).show();
            $(this).animate({width : "500px", height : "500px"},500);   
        }
    });

    $(document).on("click", "#close", function(){
        if($(this).parent().width() == 500){
            $(this).parent().animate({width: "0px", height : "250px"}, 100, function(){
                $(this).hide();
                $(this).clearQueue();
                animation();
            });
            $(this).remove();
        }
    });


});
相关问题
最新问题