The LavaLamp effect can also be applied to an image gallery, thus creating the effect of a dynamic frame that follows the mouse on the images. The implementation is almost identical to a single menu with a LavaLamp effect attached to it. Let's see the details.
We have a standard image gallery with our cursor already inside:
<div id="gallery"> <img src="jquery-lavalamp-image-gallery/1.jpg" alt="" /> <img src="jquery-lavalamp-image-gallery/2.jpg" alt="" /> <img src="jquery-lavalamp-image-gallery/3.jpg" alt="" /> <img src="jquery-lavalamp-image-gallery/4.jpg" alt="" /> <div id="cursor"></div> </div>
We create a contextual positioning for the cursor inside the main container. Then we position it and we hide it:
#gallery {
width: 80%;
margin: 0 auto;
padding: 2em 0;
overflow: auto;
position: relative;
}
#gallery img {
float: left;
width: 200px;
height: 150px;
margin-right: 5px;
cursor: pointer;
padding: 10px;
}
#cursor {
background: #888;
height: 150px;
width: 200px;
position: absolute;
top: 30px;
z-index: -1;
display: none;
padding: 10px;
border-radius: 5px;
}
Cursor dimensions take into account the global image dimensions and its z-index is negative so that it stays behind the images. Now jQuery:
$(function() {
$('img', '#gallery').each(function() {
var $img = $(this);
var left = $img.position().left;
$img.hover(function() {
$('#cursor').stop(true, true).animate({
visibility: 'show',
left: left
}, 'slow');
}, function() {
$('#cursor').stop(true, true).animate({
visibility: 'hide'
}, 'slow');
});
});
});
We use the left offset of each image to position the cursor just on the image. You can see the demo below.