JQuery fancybox does NOT display on jquery cycle?

Question

I am using this (http://jquery.malsup.com/cycle/) plugin. I would like to open fancybox modal only when users clicks an anchor tag inside of this div which is inside of the cycle. Is there any jquery plugin that I can use instead of cycle? because it seems fancybox is not running with cycle.

HTML:

<div id="right4" class="pics">
    <img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/>
    <ul class="solutions-ul">
        <li lang="tr">
            <i class="fa fa-caret-right"></i> Gübreleme
        </li>
        <li lang="tr">
            <i class="fa fa-caret-right"></i> Şarap Kalite Artırılması
        </li>
        <li lang="tr">

            <i class="fa fa-caret-right"></i> <a class="fancybox" rel="gallery4" href="/images/flyers/smart_agriculture.jpg">Akıllı Tarım</a>
        </li>
    </ul>
</div>

JQuery:

$("#right4").cycle({
    fx: 'curtainX',
    next: '#right',
    timeout: 0,
    easing: 'easeInOutBack'
});

I would like to open fancybox when user clicks the a tag inside of div. Problem is fancybox does NOT open.

JQuery:

$(document).ready(function () {
    $(".fancybox").fancybox({
        autoSize: true,
        fitToView: true,


    });

});

Here is a sample codepen: http://codepen.io/cenkkizildag/pen/rLezog/