CODEWITHSUNDEEP
jqueryimagesliderzooming
beratuslu
beratuslu

Reputation: 1119

Does anybody know of a jQuery plugin that can do something like this: http://www.pronovias.com/

Does anybody know of a jQuery plugin that can do something like this: http://www.pronovias.com/

I mean when i hover over it while sliding pictures. i want to zoom in it and zoom out. if doesn't exist plugin like this, how do i write?

this is what i have done. can any one replace with the correct one with ie support?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var currentPhoto=$('#photoShow .current');
        var nextPhoto=currentPhoto.next('div').addClass('next');
        if (nextPhoto.length==0)
            nextPhoto=$('#photoShow div:first').addClass('next');
        $('#photoShow .current').animate({'opacity':0},1000, function(){
        nextPhoto.addClass('current');
        nextPhoto.removeClass('next');
        currentPhoto.css('opacity', 1)
        currentPhoto.removeClass('current');
        });
    },2000);
    $('#photoShow img').hover(
        function(){
            $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'});
            }, 
        function(){
            $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'});

            });

});


</script>


<style type="text/css">
<!--
*{margin:0; padding:0;}
img{ border:none;
cursor:pointer;}



#photoShow div{
    position:relative;
    visibility:hidden;
}
#photoShow img{
position:absolute;
    z-index: 0;

}
#photoShow .current {
    z-index: 2;
    visibility:visible;
}
#photoShow .next {
    z-index: 1;
        visibility:visible;
}


-->
</style>
</head>

<body>
<div id="photoShow">
    <div class="current"><img src="gelinlik1.jpg" /></div>
    <div><img src="gelinlik2.jpg" /></div>
    <div><img src="gelinlik3.jpg" /></div>
    <div><img src="gelinlik4.jpg" /></div>
        <a href="#" style="visibility:hidden;"></a>
    </div>

</body>
</html>

Upvotes: 1

Views: 250

Answers (1)

Russ Cam
Russ Cam

Reputation: 125488

It is certainly possible to do this and I'm certain that I've seen someone already write a plugin for it, I just can't seem to remember where it was.

To get you started on the plugin route, you need to decide what the plugin should do and following that, wha the options should be.

So far, we know that the plugin needs to -

  1. Zoom in on mouseenter
    How much should it zoom?
    Should the image remain centered throughout the zoom?
    At what speed should the image zoom?
  2. Zoom out on mouseleave
    using the same settings for speed as Zoom in.
    should return back to the original image size.

With these in mind, things you need to think about.

  1. If we simply increase the width and height of an image, the width and height will grow in the viewport, but what we really want to do is constrain the width and height to what it is on page load and have the image become larger within those bounds. How might we go about this?
  2. When we zoom, should we swap out the source of the zoomed image file for a higher resolution version of the image? We might not need to do this for small zooms, say 10 - 20%, but may want to do this for larger zoom percentages.

Some code to get you started. Run this on this page and observe what happens to the images

var imgs = $('img');
imgs.wrap('<div style="overflow:hidden;"></div>');

imgs.parent('div').each(function() {
  var self = $(this),
      img = self.find('img');
  self.height(img.height());
  self.width(img.width());
});

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);

Upvotes: 2

Related Questions