Does any budy know how to reproduce this hover effect on this page? [closed]

by

There are plenty of ways. But let me inspect how this particular site implements it.

Check the source code of the webpage, for each image, the HTML is like:

<div class="item" data-w="270" data-h="180">
  <a href="https://stackoverflow.com/en/pine-forest-branch-road-conifer-463469/">
    <img src="/static/uploads/photo/2014/09/27/13/36/pine-463469__180.jpg" class="preview_img" data-url="/static/uploads/photo/2014/09/27/13/36/pine-463469_640.jpg" data-width="492.307692308" data-height="327.692307692" alt="Pine, Forest, Branch, Road, Conifer" title="Pine, Forest, Branch, Road, Conifer">
    <em>Pine, Forest, Branch, Road, Conifer</em>
  </a>
</div>

Here you can see, they show the smaller image first, which is /static/uploads/photo/2014/09/27/13/36/pine-463469__180.jpg, and the larger image is stored in the data attribute of the <a> tag, which is data-url="/static/uploads/photo/2014/09/27/13/36/pine-463469_640.jpg". In this way, you can first load the small image to save bandwidth.

Its class preview_img is for selecting all preview images. You can see its functionality as follow. The javascript file they are using is http://pixabay.com/static/js/base6.min.js, which is a min file. But can still search preview_img to find the code making effect:

var hover_timeout, no_preview=getCookie("no_preview");
$(document).on("mouseenter", ".preview_img", function(e) {
  var o=$(this), i=e.pageX, n=e.pageY;
  if(!no_preview || null != o.data("force-preview")) {
    var r = o.attr("title");
    r && (o.data("title",r), o.attr("title","")), 
      hover_timeout = setTimeout(function() {
        var e=o.data("width"), 
            r=o.data("height"), a=r, 
            s=o.data("cut"), 
            c=o.data("title");
        if(s&&(a+=s),!(e+30>ww||r+30>wh||e+30>wh||r+30>ww)) {
           preview = $('<div class="open_preview_img" style="z-index:'+(max_zindex+10)+
                       '"><div style="position:relative;overflow:hidden;width:'+(e+2)+"px;height:"+(r+2)+
                       'px"><img style="width:'+e+"px;height:"+a+'px" src="'+o.attr("src")+'"><img style="width:'+e+'px" src="'+o.data("url")+'"></div>'+(c?"<em>"+c+"</em>":"")+"</div>").prependTo("body");
        ...

So you can see that they bind delegate the event mouseenter to all images with class preview_img. And then populate the HTML code and .prependTo("body"). And you can see the src attribute of the image is o.attr("src"), which is the url of larger image.

Most of the code here is to calculate the position/size information of the large image. Depending on you application, you can customize.

More Related Contents:

  1. JQuery change CSS style of table cells which contain disabled elements [closed]
  2. how to press keyboard with Jquery/ Javascript [duplicate]
  3. How can I modify with css an image appended with javascript?
  4. best tools for theme design? [closed]
  5. Css set size of elements in array dynamically [closed]
  6. How can I make my header smaller if i will scroll down the webpage [closed]
  7. Scroll Function working in reverse order [closed]
  8. Using jQuery to center a DIV on the screen
  9. Height equal to dynamic width (CSS fluid layout) [duplicate]
  10. jQuery: Get height of hidden element in jQuery
  11. horizontal scrollbar on top and bottom of table
  12. Set timeout for ajax (jQuery)
  13. Keep overflow div scrolled to bottom unless user scrolls up
  14. Show and hide divs at a specific time interval using jQuery
  15. How do I detect “shift+enter” and generate a new line in Textarea?
  16. Dashed border animation in css3 animation
  17. :touch CSS pseudo-class or something similar?
  18. CSS3-Animate elements if visible in viewport (Page Scroll)
  19. Open a new javascript window(.open) along with its CSS styling
  20. How to ONLY trigger parent click event when a child is clicked
  21. How to create a responsive image that also scales up in Bootstrap 3
  22. Check if element is between 30% and 60% of the viewport
  23. How do I make a move up and down when I’m scrolling the page?
  24. Fade background image in and out with jQuery?
  25. How do I detect the inherited background-color of an element using jQuery/JS?
  26. Convert dropdown to selection boxes with color and trigger drop down action
  27. jQuery: Change element type from hidden to input
  28. Wrapping lists into columns
  29. How to customize the position of an alert box
  30. Possible to reverse a css animation on class removal?

Leave a Comment