TechQA.

JQuery animate instead of cycle

564 views Asked by At

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.

jquery jquery-ui jquery-plugins fancybox jquery-cycle
Original Q&A
2

There are 2 answers

20
Louys Patrice Bessette On BEST ANSWER

LAST AND FINAL EDIT
  - Another satisfied client! lol!

For future SO readers:
The final solution is in this CodePen.

In short, this solution allows to use both cycle.js and FancyBox.js plugins "interacting" or "mixed together"... And the use of the FancyBox's "gallery" feature... And... and... and... The possibility to insert link to PDF (or anything!)

   ( Is there a term for plugin mix debugging? )

So you can read-on from the first answer and it's subsequential edits below:
(To fully understand how the solution works)


First 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.

I had to create a "delayed" function to add click handlers to the dynamically created FancyBox prev/next icons in order to make the prev/next image displayed.

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




EDIT

(Added PDF link feature)

Added script:

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

How to define the link:

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

See updated CodePen

BUG NOTE: Strangely, the window.open() function bugs in CodePen / Chrome 51... The new tab opens, but the document doesn't show. FireFox does behave correctly.

I tryed it as a local html file and Chrome doesn't bug. Also tryed it under FF47, IE11, Opera ==> All working good.

Safari 5.1.7 (for Windows) ==> Opens another window instead of another tab. And when you close this new window, Safari crashes. I just can't figure out why.

I just updated to Chrome 52... Problem remains within CodePen...

7
DIEGO CARRASCAL On

this is a raw approach but could give you some ideas...

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


});

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in JQUERY-PLUGINS

Related Questions in FANCYBOX

Related Questions in JQUERY-CYCLE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions