This website uses cookies to personalise ads and to analyse traffic ok
web design

jQuery image panning

Image panning with animation easing that works on mouse movement with css and jQuery.

Image panning with animation easing

The markup

Simple markup: an image inside a div

<div class="content">
  <img src="img.jpg" />
</div>

The CSS

.content{
  width: 800px;
  height: 600px;
  overflow: hidden;
}

.content img{
  opacity: 0;
  transition: opacity .6s linear .8s;
}

.content img.loaded{ opacity: 1; }

.img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.img-pan-container{
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  height: 100%;
  width: 100%;
}

.img-pan-container img{
  -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
}

The javascript

Can be placed inside the head tag or at the bottom of the document right before the closing body tag

More code, better animation/performance (60 fps)

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- JS -->
<script>
  (function($){
    
    $(document).ready(function(){
      //call imagePanning fn when DOM is ready
      $(".content img").imagePanning();
    });
    
    //imagePanning fn
    $.fn.imagePanning=function(){
      var init="center",
        speed=800, //animation/tween speed
        //custom js tween
        _tweenTo=function(el,prop,to,duration,easing,overwrite){
          if(!el._mTween){el._mTween={top:{},left:{}};}
          var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style,_request,tobj=el._mTween[prop];
          if(prop==="left"){from=el.offsetLeft;}
          var diff=to-from;
          if(overwrite!=="none"){_cancelTween();}
          _startTween();
          function _step(){
            progress=_getTime()-startTime;
            _tween();
            if(progress>=tobj.time){
              tobj.time=(progress>tobj.time) ? progress+_delay-(progress-tobj.time) : progress+_delay-1;
              if(tobj.time<progress+1){tobj.time=progress+1;}
            }
            if(tobj.time<duration){tobj.id=_request(_step);}
          }
          function _tween(){
            if(duration>0){
              tobj.currVal=_ease(tobj.time,from,diff,duration,easing);
              elStyle[prop]=Math.round(tobj.currVal)+"px";
            }else{
              elStyle[prop]=to+"px";
            }
          }
          function _startTween(){
            _delay=1000/60;
            tobj.time=progress+_delay;
            _request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
            tobj.id=_request(_step);
          }
          function _cancelTween(){
            if(tobj.id==null){return;}
            if(!window.requestAnimationFrame){clearTimeout(tobj.id);
            }else{window.cancelAnimationFrame(tobj.id);}
            tobj.id=null;
          }
          function _ease(t,b,c,d,type){
            var ts=(t/=d)*t,tc=ts*t;
            return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
          }
          function _getTime(){
            if(window.performance && window.performance.now){
              return window.performance.now();
            }else{
              if(window.performance && window.performance.webkitNow){
                return window.performance.webkitNow();
              }else{
                if(Date.now){return Date.now();}else{return new Date().getTime();}
              }
            }
          }
        };
      return this.each(function(){
        var $this=$(this),timer,dest;
        if($this.data("imagePanning")) return;
        $this.data("imagePanning",1)
          //create markup
          .wrap("<div class='img-pan-container' />")
          .after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>")
          //image loaded fn
          .one("load",function(){
            setTimeout(function(){ $this.addClass("loaded").trigger("mousemove",1); },1);
          }).each(function(){ //run load fn even if cached
            if(this.complete) $(this).load();
          })
          //panning fn
          .parent().on("mousemove touchmove MSPointerMove pointermove",function(e,p){
            var cont=$(this);
            e.preventDefault();
            var contH=cont.height(),contW=cont.width(),
              isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1,
              evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e,
              coords=[
                !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0,
                !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0
              ];
            dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))];
          })
          //resize fn
          .find(".resize iframe").each(function(){
            $(this.contentWindow || this).on("resize",function(){
              $this.trigger("mousemove",1);
            });
          });
        //panning animation 60FPS
        if(timer) clearInterval(timer);
        timer=setInterval(function(){
          _tweenTo($this[0],"top",-dest[0],speed);
          _tweenTo($this[0],"left",-dest[1],speed);
        },16.6);
      });
    }
    
  })(jQuery);
</script>

The js code above is more than few lines, simply because it includes a vanilla custom javascript tween for much better performance and smoother animations.

Less code, average animation/performance (30 fps)

  $.fn.imagePanning=function(){
    var init="center",
      speed=800; //animation/tween speed
    //add custom easing for jquery animation
    $.extend($.easing,{
      pan:function(x,t,b,c,d){
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
      }
    });
    return this.each(function(){
      var $this=$(this),timer,dest;
      if($this.data("imagePanning")) return;
      $this.data("imagePanning",1)
        //create markup
        .wrap("<div class='img-pan-container' />")
        .after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>")
        //image loaded fn
        .one("load",function(){
          setTimeout(function(){ $this.addClass("loaded").trigger("mousemove",1); },1);
        }).each(function(){ //run load fn even if cached
          if(this.complete) $(this).load();
        })
        //panning fn
        .parent().on("mousemove touchmove MSPointerMove pointermove",function(e,p){
          var cont=$(this);
          e.preventDefault();
          var contH=cont.height(),contW=cont.width(),
            isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1,
            evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e,
            coords=[
              !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0,
              !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0
            ];
          dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))];
        })
        //resize fn
        .find(".resize iframe").each(function(){
          $(this.contentWindow || this).on("resize",function(){
            $this.trigger("mousemove",1);
          });
        });
      //panning animation 30 FPS
      if(!timer){
        timer=setInterval(function(){
          $this.stop().animate({"top":-dest[0],"left":-dest[1]},speed,"pan");
        },33.3);
      }
    });
  }

Image panning without animation

imagePanning function

  $.fn.imagePanning=function(){
    var init="center";
    return this.each(function(){
      var $this=$(this);
      if($this.data("imagePanning")) return;
      $this.data("imagePanning",1)
        //create markup
        .wrap("<div class='img-pan-container' />")
        .after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>")
        //image loaded fn
        .one("load",function(){
          setTimeout(function(){ $this.addClass("loaded").trigger("mousemove",1); },1);
        }).each(function(){ //run load fn even if cached
          if(this.complete) $(this).load();
        })
        //panning fn
        .parent().on("mousemove touchmove MSPointerMove pointermove",function(e,p){
          var cont=$(this);
          e.preventDefault();
          var contH=cont.height(),contW=cont.width(),
            isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1,
            evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e,
            coords=[
              !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0,
              !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0
            ],
            dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))];
          $this.css({"top":-dest[0],"left":-dest[1]});
        })
        //resize fn
        .find(".resize iframe").each(function(){
          $(this.contentWindow || this).on("resize",function(){
            $this.trigger("mousemove",1);
          });
        });
    });
  }

As with everything, you can change it, optimize it and pretty much use it anyway and anywhere you like 🙂

 

FAQ


147 Comments

Post a comment

Comments pages: 1 2 3 4

  1. Dary
    Posted on April 5, 2012 at 04:14 Permalink

    Hi there,

    this looks great but do you have any idea how i can get it work for indexhibit by any chance?
    cheers
    Dary

    Reply
  2. Kasimir
    Posted on March 27, 2012 at 13:23 Permalink

    For those looking for an image panning script that supports multiple images, here’s some code. It works a bit different than Malihu’s, in that it only requires you to have images with a ‘pan’ class. The javascript will wrap divs around them and event listeners for mouse movement.
    Style the divs like above, only note that I’ve used different div class names and these are class names instead of id’s, because you’re using multiple images. Thus: #outer_container = .wrap_pan-image, #imagePan = .pan-image and .container = .img-container

    So, html:

    And javascript:

    $(window).load(function () { $('img.pan').wrap('').wrap('').wrap(''); $.each($('.wrap_pan-image'), function () { var img = $(this).find('img'), imgW = $(img).width(), imgH = $(img).height(); $(img).css('margin-top', ($(this).find('.pan-image').height() - imgH) / 2 + 'px'); $(this).find('.pan-image .img-container').css('width', imgW).css('height', imgH); $(img).css('margin-left', ($(this).find('.pan-image').width() - imgW) / 2).css('margin-top', ($(this).find('.pan-image').height() - imgH) / 2); $(this).find('.pan-image').bind('mousemove', function(event){ MouseMove(event, $(this).parent(), imgW, imgH); }); }); }); function MouseMove(e, el, imgW, imgH){ var containerWidth = $(el).find('.pan-image').width(); var containerHeight = $(el).find('.pan-image').height(); var mouseCoordsX = (e.pageX - $(el).find('.pan-image').offset().left); var mouseCoordsY = (e.pageY - $(el).find('.pan-image').offset().top); var mousePercentX = mouseCoordsX / containerWidth; var mousePercentY = mouseCoordsY / containerHeight; var destX = -(((imgW - (containerWidth)) - containerWidth) * (mousePercentX)); var destY = -(((imgH - (containerHeight)) - containerHeight) * (mousePercentY)); var posA = mouseCoordsX - destX; var posB = destX - mouseCoordsX; var posC = mouseCoordsY - destY; var posD = destY - mouseCoordsY; var marginL = $(el).find('img').css('marginLeft').replace('px', ''); var marginT = $(el).find('img').css('marginTop').replace('px', ''); var animSpeed = 500; var easeType = 'easeOutCirc'; if (mouseCoordsX > destX || mouseCoordsY > destY) { $(el).find('.pan-image .img-container').stop().animate({left: -posA - marginL, top: -posC - marginT}, animSpeed, easeType); } else if (mouseCoordsX < destX || mouseCoordsY < destY){ $(el).find(&#039;.pan-image .img-container&#039;).stop().animate({left: posB - marginL, top: posD - marginT}, animSpeed, easeType); } else { $(el).find(&#039;.pan-image .img-container&#039;).stop(); } }

    Reply
    • Kasimir
      Posted on March 27, 2012 at 13:29 Permalink

      Seems the html is cut out of the code blocks. It should read (replace percentage symbols with opening and closing brackets):


      So HTML:

      So HTML: %img src="bla.jpg" class="pan" /%

      and

      $('img.pan').wrap('').wrap('').wrap('');

      should be:

      $('img.pan').wrap('%div class="wrap_pan-image" /%').wrap('%div class="pan-image" /%').wrap('%div class="img-container" /%');

      Reply
      • Petipain
        Posted on July 13, 2012 at 10:38 Permalink

        Hi Kasimir, thanks for your version of this script, it helped me a lot 🙂

        Still I have a strange problem, which seems to come from the “pan-image” div position.
        Cool effect, but not really on purpose : clik here to see

        Any idea how I can fix this ?

        Reply
        • Petipain
          Posted on July 13, 2012 at 11:07 Permalink

          Ok, found my mistake : I didn’t get that the javascript function wrap () replaced the previous html structure. I left the whole set of imbricated divs in my html document, which made me have a double imbricated set…

          Thanks again for the script 🙂

          Reply
    • ressia
      Posted on February 19, 2014 at 07:36 Permalink

      Hi!

      I’ve tried using this for multiple images but I failed.
      I get error message.

      Should I just copy the code?

      Thank you

      Reply
  3. Nacho
    Posted on February 3, 2012 at 13:58 Permalink

    Thank you so much, i’ve been googling for ages something like this. Many similar things, but this is exactly what i was looking for 🙂

    Reply
  4. ArleyM
    Posted on January 6, 2012 at 19:06 Permalink

    Is it possible to mouseover Image A and have Image B do the panning (like a mouse over for detail view functionality)?

    Reply
    • Chumtarou
      Posted on January 6, 2012 at 21:17 Permalink

      Hi ArleyM, this panning code by Manos is excellent for what it currently does. Perhaps you are looking for something like this instead

      Reply
  5. Chumtarou
    Posted on January 3, 2012 at 01:45 Permalink

    Sorry, please ignore my comment. I have placed the overlaying text div within the “imagepan” div giving the panning function for the entire image area. ‘Coffee’ is on me 🙂

    Reply
  6. Chumtarou
    Posted on January 2, 2012 at 21:32 Permalink

    Wonderful script – thank you and looking forward to donating soon. I’m testing it out to see if it works well for my project and have one question: would it be possible to control the panning from a smaller div than the image full container? For example, suppose the image is 1000×1000, the container is 600×400 but a smaller div for example 60×40 inside controls the panning. The reason is I’d like to overlay text above the image but be able to control the full image from a smaller area since the overlaying text stops the panning function. Sorry for the long comment – hope this question makes sense 🙂 Thank you in advance

    Reply
  7. hardy
    Posted on December 20, 2011 at 21:18 Permalink

    thanx for that gorgeous script. make use of it @ http://www.leitbilder.net. was not to easy to figure out how to manage different images ($(window).load();). anyway still mysterious behavior with safari 5.0.x and 5.1. x (ff, chrome, opera etc work fine) . 3 of 4 times the new image will not placed properly. offline everything is fine just online it’s tricky. any idea? thanx again and thank you for any tips regarding safari ( sure its my fault, not safaris). btw any idea to have the video fluid?

    hardy

    Reply
    • hardy
      Posted on December 21, 2011 at 12:51 Permalink

      did it. safari is to fast (or to slow). have to wait for some millisec to preform that window.load thing. anyway thank you again

      Reply
  8. ahmad balavipour
    Posted on October 31, 2011 at 12:37 Permalink

    Thanks alot, very good tutorial

    Reply
  9. Frantisek
    Posted on October 29, 2011 at 18:41 Permalink

    Hi, your script is pretty cool, but I’m wondering if its possible somehow edit it to work with multiple images on one page? I dont want you to do it, I just need an advice, because Im JQuery newbie 🙂

    THX!

    Reply
  10. Dimitris
    Posted on September 22, 2011 at 15:05 Permalink

    Καλησπέρα,

    πολύ καλή δουλεία…
    μήπως υπάρχει καποια ιδέα τί να κάνω στην περίπτωση που έχω περισσότερες απο μια εικόνες..? βάζοντας ένα next κ ένα back …?

    Reply
    • malihu
      Posted on September 22, 2011 at 15:57 Permalink

      Γεια σου Δημήτρη,
      Είναι διαφορετική διαδικασία και αρκετά πιο περίπλοκη η δημιουργία ενός mini-gallery. Μπορείς αν θες να δεις ένα gallery script όπως αυτό: http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery και να ενώσεις τα 2 script, αλλά οπωσδήποτε χρειάζεται γνώσεις σε css και jquery.

      Reply
  11. Rob
    Posted on August 21, 2011 at 08:22 Permalink

    Hi! Do you have a modified version of the script for IE 8 and 7? Cause the script doesn’t work on these versions of IE. Great great script by the way! 😀 Love it!

    Reply
  12. Rob
    Posted on August 8, 2011 at 11:02 Permalink

    Really great script mate!! Really really useful!

    Reply
  13. Justin
    Posted on June 20, 2011 at 00:58 Permalink

    Hi Malihu,

    You’ve got a really awesome site here, spent a while just browsing it checking out scripts.

    I have a bit of a problem, I’ve a plugin(http://jquery.malsup.com/cycle/) to do a simple cycle through some images, but each of them needs to pan which is where your script comes in.
    It works fine on the first image, then when I go to the click next it works for a second then the whole images starts moving, interestingly if I hit the previous button and go back to the first image the first image still works.

    Any ideas?
    Also I’m using jquery 1.6.1 which seems to make the panning a bit jerky in ie8

    I’m still working on this site so it’s not online yet, but I can put it up somewhere if it helps.

    Any assistance would be highly appreciated 🙂

    Reply
    • Dave
      Posted on June 19, 2011 at 04:34 Permalink

      Sorry, made a mess of last post, with link and not putting in mark up.
      Anyway, mark up

      div id=”outer_container”
      div id=”imagePan”
      div class=”container”
      div class=”sun”>
      div

      Reply
    • Vanessa
      Posted on September 14, 2012 at 16:53 Permalink

      Hi Dave,
      May you help me with your code? it’s working very well but I would like the image to be resized as long as the browser window is resized… is it possible? mantaining the width and height 100% of browser window.
      I dont know if I was clear about this….
      Thanks!!!!!!

      Reply
  14. Mary
    Posted on June 3, 2011 at 21:52 Permalink

    Hi,
    Love this — it’s working great for me! I just need to tweak the speed of the panning. How would I go about making the image pan slower in relation to the mouse? Thanks!

    Reply
    • Mary
      Posted on June 3, 2011 at 23:22 Permalink

      Never mind, I think I figured it out! I was changing the animSpeed but was making it smaller when I should I have been making it bigger. Great plugin malihu!

      Reply
  15. michelle
    Posted on June 1, 2011 at 08:20 Permalink

    This is great love it… but was wondering is it possible to have another image at the background that can pan with different speed like in http://kalendiar.lenm.cz/ ?

    Reply
    • malihu
      Posted on June 1, 2011 at 13:41 Permalink

      @2046 @michelle
      Not as it is. I need to update the script a bit to add these features. If you have time though, you can use the plugin at http://manos.malihu.gr/jquery-thumbnail-scroller with some additional css rules to pan an image. I’ll try to find some time to do it and I’ll post it here 😉

      Reply
  16. 2046
    Posted on April 27, 2011 at 17:57 Permalink

    Is there way how to have multiple images on one page, where only one image that has mouse over moves?

    thx

    Reply
  17. Dan
    Posted on April 20, 2011 at 13:44 Permalink

    malihu, can you please show me how to implementing image maps w/ links?
    can you give me a hint?

    thank you
    dan

    Reply
  18. Dan
    Posted on April 13, 2011 at 12:59 Permalink

    hello,
    it is possible to implement image map/hot spots with hyperlinks?

    Reply
    • malihu
      Posted on April 13, 2011 at 13:29 Permalink

      Yes, there shouldn’t be any problems implementing image maps w/ links 🙂

      Reply
  19. David Luiz
    Posted on April 13, 2011 at 08:49 Permalink

    no, i want the pixel pattern to stay on top…don’t pan.. but overlps the panning image.. ive an exmaple here click on image and see panning..

    http://tympanus.net/Tutorials/FullPageImageGallery/

    Pleas ehelp.. thanks.

    Reply
    • malihu
      Posted on April 13, 2011 at 09:22 Permalink

      You would need to add the overlay div below .container div (inside #imagePan) and give it an absolute position. You’d probably need to change .container position to absolute as well or/and give your overlay div a greater z-index.

      Reply
  20. David Luiz
    Posted on April 11, 2011 at 06:19 Permalink

    Hi, really nice stuff… but i want to ask something… i want to add an overly like we see on full screen galleries. i mean the pixel overlay…i tried to add div after outer container and add pixel pattern as image bg with repeat.. but somehow the images dosent pan.. i think it’s messing with JS..
    Can you help please..
    thanks…

    Reply
    • malihu
      Posted on April 13, 2011 at 08:06 Permalink

      You need an extra image on top of the one that pans? Will that extra image also pan?

      Reply
  21. phil
    Posted on March 30, 2011 at 15:59 Permalink

    Hi is there a way to set the image to start of on the top right, instead of bottom right. im using a large image as the image and it starts off on bottom right, how can i set it to strat top right

    Reply
    • malihu
      Posted on April 13, 2011 at 08:15 Permalink

      The image’s initial position is and should be centered (horizontal and vertical).
      To change it, find “$imagePan_panning.css(…” inside the script and remove/comment it. On window resize, image position is also reset ($imagePan_container.css(“top”,0).css(“left”,0);), so you may wanna change this as well if you need it bottom/right.

      Reply
      • ramakant
        Posted on February 11, 2013 at 15:27 Permalink

        Hi,

        I’ve the same query as above.
        I’m not a script writer.
        Could you please clearly explain it?

        Thank you very much.

        Reply
  22. Jes
    Posted on February 10, 2011 at 17:19 Permalink

    This is just what I needed, thanks! I’ll show you where I’m using it once I get the greenlight 🙂

    Reply
  23. g.G
    Posted on February 8, 2011 at 14:01 Permalink

    Hello,
    would be possible to apply the panning effect to the div’s background image, so that i can have some text on top of it?
    thank you
    great job, with all of your scripts!

    Reply
    • malihu
      Posted on February 8, 2011 at 14:52 Permalink

      Hi,
      You could add another absolutely positioned div inside #outer_container with greater z-index and 100% width/height and add your text inside it. This way the text containing div would be on top of the panning image.

      Reply
      • g.G
        Posted on February 8, 2011 at 15:08 Permalink

        great! thanks for the quick reply! keep up the great work here 🙂

        Reply
  24. ibuku
    Posted on February 7, 2011 at 23:18 Permalink

    malihu,

    i do love your work. I understand that most people dont care about IE anymore but with clients, it is always a concern. the panning effect does some wierd things in ie6. Do you have a possible fix for this?

    Ibuku

    Reply
    • malihu
      Posted on February 8, 2011 at 13:07 Permalink

      Ah, sorry but I never check any of the things I do in IE6, so I have absolutely no idea what could be the problem. I understand that a client might request it but it’s a conscious decision of mine not to develop or support old browsers like IE6.

      Reply
  25. Brett Widmann
    Posted on January 1, 2011 at 03:23 Permalink

    This was really helpful! Everything works great.

    Reply
  26. reed
    Posted on November 27, 2010 at 00:13 Permalink

    Hello malihu – superb clean code, with a responsive feel!

    Have you considered turning this elegant snippet into a simple image gallery? I’ve looked without success for a jQuery gallery with panning functionality – it would be a wonderful tool for novice coders like myself –

    thanks again for your reliably crisp code!

    Reply
    • malihu
      Posted on December 12, 2010 at 16:02 Permalink

      Hello and thanks for your comments 🙂
      I might try making one when I get some time. Do you have any specific idea of its functionality?

      Reply
  27. reneechung
    Posted on November 24, 2010 at 09:41 Permalink

    Is it possible to have panning the fading effect together? By the way, love it!

    Reply
    • malihu
      Posted on November 24, 2010 at 09:55 Permalink

      Thanks! How do you mean?

      Reply
      • reneechung
        Posted on December 8, 2010 at 09:41 Permalink

        Hi there,

        I want to have more than one image in the container and have them fade in and out while at the same time when a particular image is being displayed, the panning effect will be applied to it. I hope you can understand what I mean. Thanks.

        Reply
  28. Michael
    Posted on September 3, 2010 at 00:07 Permalink

    Very nice one. Thank you for sharing all those beautiful code 🙂

    Reply
  29. rojes
    Posted on September 2, 2010 at 06:25 Permalink

    help me please how to embed it at web page?

    Reply
    • malihu
      Posted on September 2, 2010 at 10:18 Permalink

      Download the script. Inside the .zip file there’s the html file that you can open with a text editor and see the code.

      Reply

Comments pages: 1 2 3 4

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php