JQuery 动画而不是循环

Question

我想用下面的效果（可能是动画）；

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里面的anchor打不开fancybox。 我确实想打开 fancybox 和缩放。

提前致谢。

Answer 1

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

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


});

Answer 2

最后和最终编辑
- 又一个满意的客户！哈哈！

对于未来的 SO 读者：
最后的解是in this CodePen.

简而言之，此解决方案允许同时使用 cycle.js 和 FancyBox.js 插件 "interacting" 或 "mixed together"... 以及使用 FancyBox 的 "gallery" 功能...和...和...和...将 link 插入到 PDF（或任何东西！）
的可能性
(有插件混音调试的术语吗？)

因此您可以从第一个答案继续阅读，下面是后续编辑：
（以充分了解解决方案的工作原理）

第一个回答：

为了让 FancyBox 可以与 Cycle 一起使用，我修改了一些给你的 CodePen...而不是尝试用 jQuery.

重新创建循环效果

参见 this CodePen。

说明:

我不得不使用 2 张小猫图片，因为你的图片不可用。
我添加了 FancyBox CSS CDN link（在你的 CodePen 中丢失了）。
我放置了与 FancyBox outside the #right1 div used with Cycle.js 一起使用的图像。
我添加了一些 CSS 以便能够看到其余文本（希腊语）并隐藏图像。
我删除了你的 FancyBox 参数，因为它不起作用（即使删除了额外的昏迷）

autoSize: true,
fitToView: true,

我在 "Ek" link 上添加了一个 click 处理程序。
它做了这些事情：
显示隐藏图片，
在 link 上模拟一个 click 事件来包装图像以触发 FancyBox。

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 个实例，许多 link 并使用 FancyBox.js "gallery" 功能

几乎一样...
但是从点击的link，我们要确定：

哪个循环实例是点击的父级
FancyBox是什么class与之关联
为触发右图上的 FancyBox 而提供的 `eq()` 参数是什么

关于 "associated with" class:
我在与 cycle:
一起使用的 div 上使用了 自定义属性 <div id="right" class="pics" data-fancyBox_class="fancybox0">
HTML5, reference here.

支持

我必须创建一个 "delayed" 函数来向动态创建的 FancyBox prev/next 图标添加点击处理程序，以便显示 prev/next 图像。

最后，我快速修复了 "click conflict"。
（在 link 单击时，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 link 功能）

添加脚本：

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

如何定义 link:

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

查看更新CodePen

BUG NOTE：奇怪的是，CodePen 中的 window.open() 函数存在 错误 / Chrome 51...新选项卡打开，但文档不显示。 FireFox 确实运行正常。

我将其作为本地 html 文件进行了尝试，并且 Chrome 没有错误。还在 FF47、IE11、Opera 下试过 ==> 一切正常。

Safari 5.1.7（针对 Windows）==> 打开另一个 window 而不是另一个选项卡。当您关闭这个新的 window 时，Safari 会崩溃。我只是想不通为什么。

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

JQuery 动画而不是循环

JQuery animate instead of cycle

jquery

jquery-ui

jquery-plugins

fancybox

jquery-cycle

第一个回答：

编辑

要将我的解决方案用于许多 cycle.js 个实例，许多 link 并使用 FancyBox.js "gallery" 功能

编辑