Andrea

Image Preview by ToolTip using jQuery

This Time i found myself to develope a portfolio for a client that don’t want to use flash on his website.
show it ►
By Googoling around i found that a good solution was using the jQuery class, jquery.com is very simple to use ( you can find a lot of tutorial around the web ), and in a few time i have made my portfolio.

First :

Downlod the source from here► :
Inside you find 2 files and 2 folders, one file is the html file ( the ones that contains the html for the portfolio ), the other “immToolTipStyle.css” is the .css file that contains the style for our portfolio. the first folder

the first folder “images” contains the images for our portfolio for every element of our portfolio we need one image.jpg ( small ) and one image_big.jpg the big one.

The second folder “js” contains the .js file that we need : first file “jquery-1.3.2.min.js” is the one that contains the class file, the second one is the “immToolTip.js” that we have write.

let’s start:

– first the HTML

before the </head> tag insert :

<body>

<!– Here start’s my portfolio –>
<div class=”thumbnail-item”> <!–div that identify thumbnail–>
<a href=”#”><img src=”images/medianord.jpg” /></a>
<div class=”tooltip”> <!–identify the big image–>
<img src=”images/medianord_big.jpg” alt=”” width=”500″ height=”334″ />
<span></span>
</div>
</div>
<div class=”thumbnail-item”>
<a href=”#”><img src=”images/nuzzo.jpg” /></a>
<div class=”tooltip”>
<img src=”images/nuzzo_big.jpg” alt=”” width=”500″ height=”334″ />
<span></span>
</div>
</div>

<!– the end –>

</body>

– next the immToolTip.js

// Load this script once the document is ready
$(document).ready(function () {

// Get all the thumbnail
$(‘div.thumbnail-item’).mouseenter(function(e) { // with “mouseenter” we know wen the mouse pointer enters the element.

// Calculate the position of the image tooltip
x = e.pageX – $(this).offset().left;// with “e.pageX” indicates the mouse position relative to the left edge of the document.
y = e.pageY – $(this).offset().top;// with “e.pageY” indicates the mouse position relative to the left and top edge of the document.

// Set the z-index of the current item,
// make sure it’s greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css(‘z-index’,’15’)
.children(“div.tooltip”)//with “.children” we can search through the immediate children of the element that has name “div.tooltip”
.css({‘top’: y + 10,’left’: x + 20,’display’:’block’});

}).mousemove(function(e) {// with “mousemove” we know when the mouse pointer moves inside the element.

// Calculate the position of the image tooltip
x = e.pageX – $(this).offset().left;
y = e.pageY – $(this).offset().top;

// This line causes the tooltip will follow the mouse pointer
$(this).children(“div.tooltip”).css({‘top’: y + 10,’left’: x + 20});

}).mouseleave(function() { // with we “mouseleave” know when the mouse pointer leaves the element

// Reset the z-index and hide the image tooltip
$(this).css(‘z-index’,’1′)
.children(“div.tooltip”)
.animate({“opacity”: “hide”}, “fast”); //with “.animate” we can make animation effects on any numeric CSS property
});

});

– And last the css

@charset “utf-8”;
/* CSS Document */

.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
position: relative;
float: left;
margin: 0px 5px;
}

.thumbnail-item a {
display: block;
}

.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}

.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
}

.tooltip span.overlay {
/* the png image, need ie6 hack though */
background: url(images/overlay.png) no-repeat;
/* put this overlay on the top of the tooltip image */
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}

and now you have a clean way for show your works…..

By By

Pizzi

Andrea

Close Open Related posts