CODEWITHSUNDEEP
jquerysliderzooming
Faizan
Faizan

Reputation: 1898

How can I use this jQuery image zoom plugin with jQuery image sliders?

So I have got this great plugin , that zooms through images with a lens effect. Uptill now it is working for single images but what I want is to apply the zoom effect on images that are in my jQuery slider. I have added this div in to my image slider but when I click on image it takes me to another tab which just display me the image. I want to get the image zoom on mouse hover effect in all images of sliders. Here you can find what I have just got working on : Demo here

My slider HTML:

<div class="pikachoose">


<ul id="pikame" class="jcarousel-skin-pika">

    <li><a href="http://www.pikachoose.com"><img class="zoom" src="images/slide/1.jpg"/></a><span>This is an example of the basic theme.</span></li>
    <li><a href="http://www.pikachoose.com"><img class="zoom" src="images/slide/2.jpg"/></a>
<span>jCarousel is supported and can be integrated with PikaChoose!</span></li>
</ul>
</div>

Image Zoom HTML: <div style="text-align: center;"> <a href="images/slide/2.jpg" class="zoom" ><img src="images/slide/2.jpg" /></a> </div>

Javascript for both:

<script> // zoom Jquery
$(function(){
    $('.zoom').zoomy({border:'6px solid #fff'});
});




</script>


        <script language="javascript">     //Slider Jquery
        $(document).ready(
            function (){
                $("#pikame").PikaChoose({carousel:true,carouselOptions:{wrap:'circular'}});
            });
    </script>

Upvotes: 0

Views: 2583

Answers (1)

stefanz
stefanz

Reputation: 1326

First, your html should looks like : 

<div class="pikachoose">
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="images/slide/big1.jpg">
            <img src="images/slide/1.jpg"/></a><span>This is an example of the basic theme.</span>
        </li>
        <li><a href="images/slide/big2.jpg">
            <img src="images/slide/2.jpg"/></a><span>jCarousel is supported and can be integrated with PikaChoose!</span>
        </li>
    </ul>
</div>

Actually you need to follow just some basic stuff, according to zoomy usage . You can put classes and everything, but the wrapper of the image ( that <a> inside <li> ) must have as href the location of big image.

To have a working zoomy on slider you need to call it each time after the slider transition is done

                $("#pikame").PikaChoose({
                    carousel:true,
                    carouselOptions:{wrap:'circular'},
                    animationFinished : function( e ){
                        e.anchor.zoomy();
                    }
                });

Notice the "animationFinished" option.

Upvotes: 2

Related Questions