Cenk Cenk - 4 months ago 17
jQuery Question

JQuery animate instead of cycle

I would like to do the same effect with the one below (may be with animate);

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,

});
});


The reason is because I can NOT open fancybox when I click on the anchor inside of the UL while using cycle plugin. I do want to open fancybox and zoom.

Thanks in advance.

Answer

I modified a couple things to you CodePen in order to make FancyBox usable with Cycle... Intead of trying to recreate the cycle effect with jQuery.

See this CodePen.

Explanations:

  1. I had to use 2 kitten images because yours weren't available.
  2. I added the FancyBox CSS CDN link (Was missing in your CodePen).
  3. I placed the image to use with FancyBox outside the #right1 div used with Cycle.js.
  4. I added some CSS to be able to see the rest of the text(in greek) and hide the image.
  5. I removed your FancyBox params, since not working (even when removing the extra coma)

autoSize: true,
fitToView: true,

  1. I added a click handler on the "Ek" link.
    It does these things:
    Show the hidden image,
    Simulate a click event on the link wrapping the image to trigger 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;
}

Script:

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





EDIT

(After accepted answer and awarded bounty)

You asked a good question (in comments below)...
It deserves an edit.

To use my solution with many cycle.js instances, many links and use the FancyBox.js "gallery" feature

Its almost the same...
But from the clicked link, we have to determine:

  • Which cycle instance is the click's parent
  • What is the FancyBox class associated with it
  • What is the `eq()` argument to provide to trigger FancyBox on the right image

About the "associated with" class:
I used a custom attribute on the div used with cycle:
   <div id="right" class="pics" data-fancyBox_class="fancybox0">
This is supported by HTML5, reference here.

And, finally, I made a quick fix on the "click conflict".
(On link click, cycle triggers too...)

Most changes are in this script, 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").show();
    $("." + thisFBclass).eq(linkEq).click();

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