Image Preview Jquery

Question

Anyone have a good jquery Image Preview plugin. Been looking but havent found anything good. The requirements are:

Image appears on hover
Image hover flips to avoid collision with sides of browser window

I have been using imgPreview but it doesn't offer the collision. Any others?

Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 09:59

You could continue using imgpreview and make use of the callback onShow. This is detailed in the plugins documentation. The callback contains a reference to the container which you can then alter the CSS properties of to position.

http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

Set container to hidden and then position it yourself in the callback. From looking at examples the containers are absolutely positioned, so you just need to modify the top and left properties to get them on screen.

pseudocode:
$('a').imgPreview({
  imgCSS: {
      visible: 'hidden'
  },
  onShow: function(link){
      //is element visible?
      $(this).css('top', xx).css('left', yy).css('visible', '');
  }
});

Is element visible on screen?

score 0 · Answer 2 · answered Nov 06 '11 at 02:18

Thanks @mrtsherman , its not quite what i used but it got me thinking. I did:

$('.a').imgPreview(
            {
                preloadImages : false,
                onLoad: function()
                {   
                    if ($(this).parent().position().left > 600)
                    {
                        var pLeft = $(this).parent().position().left;
                        var pTop = $(this).parent().position().top;
                        var width = $(this).parent().width();
                        pLeft = pLeft - width;
                        $(this).offset({top: pTop, left: pLeft});
                    }
                    else
                    {
                        var pLeft = $(this).parent().position().left;
                        var pTop = $(this).parent().position().top;
                        $(this).offset({top: pTop, left: pLeft});
                    }
                }
            }
        )

Image Preview Jquery

2 Answers2