1. Greyscale Hover Effect w/ CSS & jQuery
A great effect for displaying portfolio gallery from Soh Tanaka. This technique works even under IE6. This solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
First set up an unordered list which we will use as our foundation for the list
of gallery images.
HTML
1
2
3
4
5
| <ul class="gallery">
<li> <a class="thumb" href="#"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name </a></h2>
</li>
</ul> |
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;} |
jQuery
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
The logic here will be to fade out the default thumbnail, and set a background image on the tag. Using CSS Sprites, we will position the image to the ‘bottom’ so the greyscaled thumbnail can seep through on hover over.
The following script contains comments explaining which jQuery actions are being performed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(document).ready(function() {
$("ul.gallery li").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});</a>
<a> //Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});</a>
}); |
View Demo
2. Zoomimage – jQuery plugin
Zoomimage presents images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.
- Preloads images
- the images can by grouped in galleries,
- Scales the image to fit the viewport
- Keyboard gallery navigation
Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme. Important: be sure to include Javascript files in the specific order as in the example below.
jQuery
1
2
| <script src="js/eye.js" type="text/javascript"></script> <script src="js/utils.js" type="text/javascript"></script>
<script src="js/zoomimage.js" type="text/javascript"></script> |
All you have to do is to select the elements in a jQuery way and call the plugin.
1
| $('a.myLinks').zoomimage(options); |
View Demo
jQuery Masonry
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
View Demo
|
