Search jQuery

jQuery Forum

JQuery Zoom question?

in Using jQuery Plugins • 6 years ago

Hi guys,

I have a web page, on this web page I have couple of images. When user clicks on the image, image disappears and the UL tag displays. (I am using this plugin http://jquery.malsup.com/cycle/)

Here is the 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>

Here is the JQuery for cycle:

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

What I would like to do is, when the user clicks the anchor tag in the UL above, image displays in a modal box (fancybox or something) then user can zoom/pan on the image itself. I tried fancybox and elevatezoom but couldn't manage.

Replies(4)

raysefo

Re: JQuery Zoom question?

6 years ago

This is not working either - no zoom on fancybox!

$(".fancybox1").fancybox({
            autoSize: true,
            fitToView: true,
            afterShow: function () {
                $('.fancybox-image').click(function () {
                    $('.fancybox-image').elevateZoom({
                        zoomType: "inner",
                        scrollZoom: true,
                        lensSize: 900,
                    });
                    $('#fancybox-buttons').hover(function () {
                        $('.zoomContainer').remove();
                        $('.zoomWindowContainer').remove();
                        $(".zoomLens").remove();
                    });
                });
            },
            beforeClose: function () {
                $(".zoomContainer").remove();
                $('.zoomWindowContainer').remove();
                $(".zoomLens").remove();
            }
        }).hover(function () {
            $(this).fancybox({
                autoSize: true,
                fitToView: true,
                afterShow: function () {
                    $('.fancybox-image').click(function () {
                        $('.fancybox-image').elevateZoom({
                            zoomType: "inner",
                            scrollZoom: true,
                            lensSize: 900,
                        });
                        $('#fancybox-buttons').hover(function () {
                            $('.zoomContainer').remove();
                            $('.zoomWindowContainer').remove();
                            $(".zoomLens").remove();
                        });
                    });
                },
                beforeClose: function () {
                    $(".zoomContainer").remove();
                    $('.zoomWindowContainer').remove();
                    $(".zoomLens").remove();
                }
 
            });
 
        });

raysefo

Re: JQuery Zoom question?

6 years ago

This jquery does NOT trigger at all!

});
        $(".fancybox").click(function (e) {
            e.preventDefault();
            $(".fancybox").fancybox();
        })

raysefo

Re: JQuery Zoom question?

6 years ago

no ideas??

raysefo

Re: JQuery Zoom question?

6 years ago

here is the codepen:

http://codepen.io/cenkkizildag/pen/rLezog/

Top Reply

Response title

Attachments

jQuery Forum

JQuery Zoom question?

Replies(4)

Re: JQuery Zoom question?

Re: JQuery Zoom question?

Re: JQuery Zoom question?

Re: JQuery Zoom question?

Statistics

Tags

Actions

Related Posts