I have a small intranet application with which I share everything with my family. I love to build solutions by myself. This is why I have created an image gallery including all my family pictures roughly based on the script I am presenting on this post.
The script is using jQuery. The code is easy to get if you visit the demo here.
Before to start the presentation of the main script for the image gallery, I want to start first by introducing the general concept. I have found then tooltips example a good step from which we can start.
Example 1: jQuery Tooltip 
Click on the image to View this script in action.
* Since the DOM elements are loaded, tooltip function
is invoked.
xOffset = 15;
yOffset = 15;
The 2 variables determine the pop-up’s distance from the cursor.
* We want that we add an element to the body when we roll over a certain object.
First the element we want to add is the tooltip itself. Second, this certain object is simply identified thanks to the tooltip class we have defined for it:
More details: hover.
* Function1:
The element's appearance is predefined with CSS (positioned absolute and styled) so all we need to do is to fill the element with content (1), calculate mouse position (2) and associate with the element a kind of animation (3).
* Function 2:
When the cursor rolls out, the element is deleted.
Example 2: Image Preview Gallery
Click on the image to View this script in action.
Thanks to the first example, I will not explain the whole code of the Image Preview Gallery as it is almost similar to the first one.
Here we have a posy of thumbnails. When we roll over a thumbnail (identified thanks to CSS class "preview"), its associated image will be loaded.
To style either “tooltip” or “preview” classes, a CSS script has been put into every HTML code.
That's all folks!
xOffset = 15;
yOffset = 15;
The 2 variables determine the pop-up’s distance from the cursor.
* We want that we add an element to the body when we roll over a certain object.
First the element we want to add is the tooltip itself. Second, this certain object is simply identified thanks to the tooltip class we have defined for it:
<p><a href="http://jcargoo.org" class="tooltip" title="Web programming stuff">This is from JCargoo</a></p>Now to fulfill our requirement --which is displaying the tooltip when we roll over the Anchor Tag with "tooltip” CSS class, we need to apply the hover method to this Anchor element:
$("a.tooltip").hover(function1, function2)Whenever the mouse cursor is moved over the matched element (a.tooltip), the first specified function (function1) is fired. Whenever the mouse moves off of the element, the second specified function (function2) fires.
More details: hover.
* Function1:
The element's appearance is predefined with CSS (positioned absolute and styled) so all we need to do is to fill the element with content (1), calculate mouse position (2) and associate with the element a kind of animation (3).
$("body").append("<p id='tooltip'>"+ this.t +"</p>");//(1)More details: fadeIn, append.
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")//(2)
.css("left",(e.pageX + yOffset) + "px")//(2)
.fadeIn("fast");//(3)
* Function 2:
When the cursor rolls out, the element is deleted.
$("#tooltip").remove();* While the cursor is moving over the object, the element (tooltip) follows it:
$("a.tooltip").mousemove(function(e){More details: mousemove.
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
Example 2: Image Preview Gallery
Click on the image to View this script in action.Thanks to the first example, I will not explain the whole code of the Image Preview Gallery as it is almost similar to the first one.
Here we have a posy of thumbnails. When we roll over a thumbnail (identified thanks to CSS class "preview"), its associated image will be loaded.
<li><a href="3.jpg" class="preview"><img src="3small.jpg" alt="gallery thumbnail" /></a></li>You may have perceived that when the image element has a title attribute (1), this one will be displayed in the bottom of the image preview (2).
<li><a href="4.jpg" class="preview" title="mmm the party!"><img src="4small.jpg" alt="gallery thumbnail" /></a></li>
c = "<span class= \"imagetitle\" ><br/>" + this.t + "</span>";//(1)In this script, we have used the number of milliseconds to run the animation instead of a string representing one of the predefined speeds ("fast") like we do in the first example.
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");//(2)
To style either “tooltip” or “preview” classes, a CSS script has been put into every HTML code.
That's all folks!
How to encourage this blog if you like it:
- Promote our sponsors;
- Add any kind of comment or critic;
- Ask me directly by email if you prefer.
I am 
