Fancy Thumbnail Hover Effect w/ jQuery
Blog » CSS/XHTML » Fancy Thumbnail Hover Effect w/ jQueryFancy Thumbnail Hover Effect w/ jQuery
April 19th, 2009
Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.
Build the Foundation – XHTML
Our markup will be fairly simple, just an unordered three columned list.
<ul class="thumb"> <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb2.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb3.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb4.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb5.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb6.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb7.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb8.jpg" alt="" /></a></li> <li><a href="#"><img src="thumb9.jpg" alt="" /></a></li> </ul>
Dress it Up – CSS
Pay close attention to the positioning properties between the list item and the image. We have to make sure that the hovered image must be on top of the other images, so this part is key.
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
*Note – For more information about this property: -ms-interpolation-mode: bicubic, refer to Chris Coyier’s Bicubic Scaling fix for IE. For those who are using PNG files as the background, refer to my previous article, “PNG Transparency Fix in IE6“.
Bring it to Life – jQuery
Basically all we are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment w/ css), and padding when we hover over. During this animation, we also switch the value of the z-index, so that the selected image stays on top of the rest.
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});
*Note – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation Queue Buildup” at www.LearnjQuery.com
Conclusion
It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well. If you have any questions or comments, please don’t hesitate to let me know!
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: Image Tricks, jQuery
This entry was posted on Sunday, April 19th, 2009 at 11:08 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Regards from switzerland, Encore"
So perfect…
ICE bro.
nice i will try
i see one prob in that
when i hove 3 or 5 times to any image and then mouse out form that image is animation continue running so how can i stop it?
Smooth effect!
Thanks for the share
Awesome! Now I really wish I had studied and know javascript and jquery. I need to.
Thanks that was inspiring. Awesome indeed.
Hi
really great effect. I’ve a question: why do you repeat the center attribute here?
Tanks
nice effect, it will be useful to me. thx
Very good job, thank you for sharing your knowledge
Cool tutorial. Nice effect.
jQuery rocks
@chirag Good catch! I just updated it , please refer to .stop()
@Engelium I decided to center the background so it sits evenly both vertically/horizontally behind of the thumbnail image
You can leave it at the default (left, top) but you would have to add padding precisely all around to allow the image to sit evenly~
awesome, thanks for sharing soh!
Problably I’m missing something… but what does sets the first center and what the second?
Sorry but I’m a bit perplexed about the use of 2 center…
Hey no worries Engelium, check this out :
http://www.w3schools.com/css/pr_background-position.asp
Let me know if that clears it up
Absolutely cool piece of code. I will HAVE to use this … somewhere
I keep being amazed what jQuery can do. Thanks for releasing this code!
Very good. The demo worked smoothly in IE, FireFox and Chrome. This special effect comes interestingly in simpler manner. Few lines of code with manipulation of z-index and animating the thumbnail’s size, absolute positioning coordinates (vertical alignment w/ css), and padding. So cool. Thanks for sharing this nice tip.
Tanks Soh
I don’t use these methods to place elements so I ignored the use of the second value O_o
G’Day Soh – great tutorial!
One comment: I noticed was when moving the mouse over several images, the animation starts playing on all the images I mouse over which utilises CPU (one solution might be to use the hover intent library).
Cheers,
Thomas
http://theruntime.com/blogs/thomasswilliams/
Thanks Soh, that’s very cool.. I was thinking it could be interesting to add also the option to open the images using a lightbox style gallery instead of loading them in the RHS container. It should be a quick one and could give designers another option.. what do you reckon?!
Well done anyway, great job!
Andrea
hai soh
I get it .stop() point. this is gr8 tutorial.
but do it some advance view
like when i hover any tumb image
“the right” side box this image comeout with fadeOn or animate etc any good effect of jQuery
Thank you so much
Really awesome! Love the transition!
Gopal Raju
productivedreams.com
twitter.com/gopalraju
Very cool piece of code. I’ve bookmarked it to use for larger images of products on the e-commerce store I’m building currently.
@Thomas Williams – that sounds very interesting, can you point me to a direction where I can learn about this? Thanks for the tip!
@Andrea thanks for the suggestion, when I come around to this tut again I will def revamp it with a 2nd option
@all thanks for the feedback I’m glad you guys enjoyed it~!
So little code and nice effect. Really delightful made
Thank you for this post – realy cool! May I translate it in russian in my blog compupro.ru width backlink to this post?
@Masster, just as long as you cite/credit the site I’m all good
Hi Soh – to use hover intent, add in the hoverIntent library from http://cherne.net/brian/resources/jquery.hoverIntent.html, then change the function call from:
$(”ul.thumb li”).hover(function() {
to
$(”ul.thumb li”).hoverIntent(function() {
The UI doesn’t quite feel as “snappy”, though, and might require some changes to the default hover intent time.
Well done again on the great tutorial,
Thomas
Hey really great post dude. Loving the Jquery !awesome keep up the good work
Very nice effect. Like it
Nice effect, I like it!
Very cool effect thanks ….
Thank you for that info Thomas!! Looking into it now
That is awesome – I have a project coming up that it may fit the bill for perfectly – thank you.
so clean and clear (the code and the post)
great work thank you for sharing.
That’s tight!
Very cool work, thanks
Clean, slick and cool. Thank you!
Great neat little effect – looks pretty awesome, well done!
Just one small question: How did you add the “shadow” around the active image – Can’t seem to find it.
Anyway, keep up the good work!
Very nice effect. Cleanzorvilles. I likey.
@Marco It’s actually just a background image, check it out below
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Very interesting tip, definitely gonna try it out! Thanks!
Great article man thanks for showing how this is done really cool.
~Cheers
Love this one, barely finished reading your article and I had this running in no time on my site on http://www.digizaal.nl/photos/zoomer/
thanks you so much !!!
greetings from Amsterdam.
first awesome write up. I’m pretty much been self teaching (well more like stealing) web design / wordpress for the last month.
second, i got a quick (very noob) question… the jquery section.. would it be best to add to the existing jquery core (and how would I do it without messing that file up) or make a new jquery file (and if you have have one already that would be awesome)
last… thanks again for the tutorial and also any help you can throw my way.
@JR I usually reference an external js file (leaving the core file as is).
Oh my dear GOD! This is so amazing Soh, I have to try this…
#bookmarked
Beautiful in simplicity. very good and clean code.
Good evening, I took your idea by creating a jQuery plugin to get a similar effect.
My plugin will soon be online, I send you first
Thank you very much
I uploaded the plugin based on your script, I said the link to the original script from your page.
I invite you to test it, you can see I have added effects.
view plugin in jQuery officiel plugin : http://plugins.jquery.com/project/magical
Projects : http://magicalhover.clashdesign.be/
Supports and comment : http://magix-cjquery.com/post/2009/05/01/un-joli-rollover-sur-vos-images-avec-jQuery
Best regards
nice
Great tutorial, does anybody know where to find a tutorial that does this effect? http://soupstudios.com/ I can’t seem to find anything. Basically need it to do exactly as it shows on here, when you hover over a link it displays a prominent image in an anchored stationary fashion. Need to have the ability for that image to be linkable as well.
Loving this tut! It’s a sweet effect but I am having a problem. I have images that have 2 different widths, 100px and 56px. How would I pass the width of the image to the css property in the jquery?
url: http://www.michaeladamek.com/pictureseffect.php?url=chuck
Thanks!
Cool, thanks for sharing
Kind regards
Wow! This tutorial is very easy to understand! I love the hover effect, so cool!
perfect! very nice tutorial! thanks for sharing this!
This can also be accomplished using CSS3’s scale property and the :hover pseudoclass .on Modern Browsers. No JS would be required.
For exmaple, see: http://www.zurb.com/article/221/css3-animation-will-rock-your-world
hi its very nice. i will try.
I think, i will try to take a call to put in our site.
hi
can you make another effect(something like the effect here) in this website http://www.ciriljazbec.com/#/commercial/
(it use Flash,and i try my hard to do it use jQuery,but i fail)
very nice!!!!!!
can it be done in mootools?
Very great stuff !
Maybe a noob question, but is it possible to have the thumbs linked to a flashplayer ?
Each thumb is a screenshot of a videofile which plays on a flash player when we click it… That’d be awesome…
Thanks again
Very nice !
GOOD JOB!
Don.t try but not bad
Is possible to link each image of the Main View with a url?
Dave and Cristian, yes you can but I feel that should be another tutorial on its own so I can elaborate on each concept.
If you would like to get a hint of how it will be done, check out Nick La’s jQuery tutorial on the “Image replacement gallery”.
Its pretty much the same idea but you would be declaring a variable for your youtube video ID (for Dave), and for Cristian, you would be adding one for your external link.
Hi ,
Very nice effect for Mozilla, don’t work in IE 6 as smooth, Please check
Soh, thanks for the advice:
Making this change in the code: works, but not in Internet Explorer
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
var mainImage = $(this).attr(”href”); //Find Image Name
var url = $(this).attr(”title”);
$(”#main_view img”).attr({ src: mainImage, onClick : “window.open(’” + url +”‘);” });
// $(”#main_view img”).attr({ src: mainImage, onClick : “location.href=’” + url +”‘;” }); //
return false;
});
});
Another pendient “bug” is include the hand icon over the image area….
Hi Soh,
Awesome jQuery – thanks for sharing!
Doesn’t work on IE6 though…any fix?
@Creative24, it does work in IE6
пасибо классный скриптик!
Hey there – great little tute, exactly what I was looking for (almost!). Was wondering if this can be done with divs instead of li – then we can put in other block-level HTML as well (paragraphs and such) that will also zoom. What do you think?
really its a good one
hi, its a a really good one, but here my expectation is little bit more, is that possible text also show with the image when going to mouse over?
I am waiting for your reply.
These effects are sweet
Cool. This is an awesome work…
Briliant work!
But does anyone know how to display text in the main div after clicking a thumbnail instead of just a bigger image?
this is really very impressive….. well presented.
thanks for the script though.
just see it, and impress by it… great tutorial, thanks
madhab & Ruud, you can try using a combination of this tutorial and the image rotator with teaser tutorial for that effect: http://designm.ag/tutorials/image-rotator-css-jquery/
nice
This is a great article and in fact a great site. I’m going to take some some and go through some of your other blog posts.
That was really helpful. Thanks!!
Hey, it’s a great post. Thanks a bunch for sharing this.I’ve used this in the site currently i’m working. I’m really new at this and was wondering if I could ass some text that would appear under the thumbnail when the mouse will be hovered. Any help?? Thanks in advance and cheers to yours great posts.
Great one!!!
its very cool
Really nice post and great effect on thumbnail images. Cheers!
Hi
Very nice effect!
Could you tell me how can I get the backgroung image “thumb_bg.png”?
This is a great creation, I have been toying with it but I am having bad luck with resizing the thumbnails. I wish to use a larger grid of images (6×7) with each of them being 51×51 pixels, and the problem comes up when the images are moused over the location that they move is not working the way that I thought it would. I can’t get a live version of this up yet to see but if this is at all understandable can someone let me know what to adjust to basically “scale” everything down proportionally?
has anyone tried using this with images flowing into a gallery from flickr?
Your are simply,… Great!
You are now in my inspirations,…………
This effect is very essential to any image gallery. It can improve any site, thanks for posting it! I was using a template located at: http://www.dcarter.co.uk/photography_1.html, and wanted to apply the effect to the existing gallery. Any Tips? What would help is a file that can be downloaded, which shows what files are needed and how they are linked in HTML. I used DreamWeaver, and this may be a stupid question, but do I need an extension? I just learned the basics of HTML and CSS this weekend, and need help with JQuery…
Thanks!
Mayur
Hey, very sweet effect. I was wondering if it is possible to link to a HTML page? I tried this:
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
var mainImage = $(this).attr(”href”); //Find Image Name
var url = $(this).attr(”title”);
$(”#main_view href”).attr({ src: mainImage, onClick : “location.href=’” + url +”‘;” });
return false;
});
});
I don’t want to SHOW the HTML in the div but only link to another page.
Thanks
Ok I’ve got it:
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
});
});
Thats it !
Hello,
fantastic effect.
The only issue I have now is that I want to swap the inside of the main_view div because I have included more information apart from different images. Each anchor has its own id.
the only issue I have now how to call it from the thumbnails and hoq to configure the swap code. Maybe that is a stupid question but I am new to jquery…
I suspect that I would have to change the attr…
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
var mainImage = $(this).attr(”href”); //Find Image Name
$(”#main_view a”).attr({ src: mainImage });
return false;
});
Thanx in advance…
Beautiful!
Can anybody help me place a title under a thumb and also the larger hover image?
So:
Thumb image
Title/name
HOVER
Larger image
Title/name
Anyone please? Thank you
nice…..
Hi. Probably a 5 minute job for some-one who knows what they’re doing. I’m willing to pay. $20-$30 USD? Anyone please? My question above.
NICE!
used it on 1 on my sites and love it.
1 question thou… Is there a way to meke the hovered pic display on full size?
cheers
@pc_clown If you mean you want it to blow up in full size, it may not be so wise to do so. We are basically loading the max-size image as default, so if you have a lot of hi-res full screen images it will def slow down your page load time. Perhaps a lightbox plugin is a better solution for you~
http://leandrovieira.com/projects/jquery/lightbox/
your right,
cheers mate…
Hey Bub, this looks cool from the demo: http://www.sohtanaka.com/web-design/examples/image-zoom/ – so no more waiting for shockwave file to finish download but mine seems to work, I’m still a beginner – can I save with extension? Cheers:) MALI
Amazing!
I have many heroes in life. Man can I put you on the list? Actually I already have.. nice effect man!
THANK YOU!
Okay if you want to add a link to your thumbnail this is what you do
add this little code at the end of your script:
$(”.thumb li img”).click(function(){window.location=$(this).find(”a”).attr(”href”); return false;});
and insert in the href=”" the link of your choice
and that all send me a little message if this works out for you or if you just used this
Looks amazing! Really clean and easy to use. My only problem is that when I plug my pictures in and I click them it links to a new page and displays them. How did you make it so that when you click the image it just replaces the image in the main view? Mine goes to a whole new page.
^ Edit: Nevermind, I didn’t have the correct version of jquery in my code. /facepalm
WoW! its amazing… thanks for sharing.. this stuff what i want!!!
Really beautiful. Thanks for sharing the source code.
The amazingly good thing is that it clean and easy to read
Excellent. Thanks for sharing the source code.
thanks ^^
Wow! So cool effect! I LOVE IT! Thank you so much!
So nice, it’s simple and smooth, and the effect is just great. Thanks !
I love when I see such innovative works… nice.
Great tutorial! Thanks also to Thomas for the hoverIntent() info. It works really well in conjunction with this tutorial.
This is just what I’ve been looking for!!
THANKS. Great tutorial!
At the moment if I get the external URL link to work, the hover zoom effect won’t work. And if the image hover zoom effect works as per the codes provided, the external links won’t work… hmm.. this is a little frustrating and as a noob I’m unable to solve it after 4 hours.
has anyone managed to figure the script for both functions to work effectively??
still, thanks a ton for sharing this with us all…
Are you talking about the external link on the thumbnail image or the main preview image?
the thumbnail image has a return false; which would ignore any action assigned to that link by html.
thanks so much for that tip, soh. that just did it!!! not sure why i didn’t notice that before..
Dont work in explorer though, cant get it to work on this site either in your example page, any idea why?
PS.
Work like a charm in firefox.
Got it to work with explorer, couldnt run this script with some other jQuery scripts on the page, working now, thanks for your time.
Great job on this Soh!
I was wondering if it’s possible to also change a text URL when the image is swapped. So if I click image 2, a text URL would change to “url2″, click image 3, text URL changes to “url3″, etc.
Thanks again, this is awesome!
It’s amazing!!
thanks.
Very nice effect!thans
nice effect. But there is problem, when the zooming image is decreasing back to original size, the other image around(right and under) it jump in front. That is not pleasant.
It can be helpful this page http://justinfarmer.com/?p=31
function() {
/** $(this).css({’z-index’ : ‘0′}); //there is bad timing**/
var objectLi = $(this);
$(this).find(’img’).removeClass(”hover”).stop()
.animate({
marginTop: ‘0′,
marginLeft: ‘0′,
top: ‘0′,
left: ‘0′,
width: ‘100px’,
height: ‘100px’,
padding: ‘5px’
}, 400, function(){ //callback function to make css run AFTER shrink
$(objectLi).css(’z-index’,'0′);
}
);
cia Hadza
Thanks a lot !!This is really very useful article.I used it and it works fine.
I’m normally a big fan of lightshow picture view, but that’s not bad.
Very very cool
Could you do the same thing (blow-up when hovering) for a whole div?
Hi Soh. It’s amazing. Thanks for sharing this.
I’d like to use Lightview on my web site:
http://www.nickstakenburg.com/projects/lightview
Unfortunately there is a conflict between your script and the script used by Lightview:
http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js
Can You give me a hint solving this problem.
Thank You!
hiiz, well from all the comments it seems like im the only person who isnt able to get it to work O_O im not sure why. i accurately copy pasted. changed image links etc. but nothing. i thought it wud be confcliting with java scripts of my site so did it in a new file but its still the same. is there any js file which is to be linked to html file except the jquery code given above ?
Regards
Same here too. Seems like all people above except you and me, Ayaz. I create 3 small image and use the css style, I link my html file to the .css and .js. The css controls the image pretty good (pull all the photo appearing as list in back onto one row) but the .js file does not work at all? If anyone has a full demo project and share with us (me and Ayaz), we will appreciate that!
Great little app!
I was wondering if their was a way to adjust the alignment of the boxes? Sometimes I end up with an odd number of boxes and it would look soooo much nicer if I could center them horizontally.
not working………Please help
I placed all the codes the place where they were to be place but the images are not magnifying
nice! cool! so cool! like it!
This is what to do if you want to put links on other page on the thumbs…
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
window.location = $(this).find(”a”).attr(”href”); //Find Image Name
$(”#main_view img”).attr({ src: mainImage });
return false;
});
});
Dude, u r a genious! Thanx for inspiration,
Chiefs Hockey
Quick question from a noobie pasta coder… Why do I lose the href mouse click when the hover is activated? Can get link to open with right click and middle click but not mouse click?
Any thoughts or hints would be grand… I tried googling but I really don’t know what to google for… lost hyperlink when jquery hover activates?
Hey, great work.
I was wondering if the thumbnails will have to be fixed in the width and height?
Could it be used for images of random sizes?
@Eugene – If you have them at different sizes you will have to calculate the absolute positioning coordinates according to your image. That would be your only hurdle~
@clk, I think your talking about the link not clicking through when its on hover over.
I responded to a similar question above: “the thumbnail image has a return false; which would ignore any action assigned to that link by html.”
So if you are trying to link out on the active thumb, just delete “return false;” and you should be good to go~
hi there.
this is exactly what I was looking for. is there maybe a wordpress plugin for this?
if not, I udnerstood most of the instructions, except the jquery part. where does that code go? is it a javascript? do I have to add the javascript tags around it and load it on the page I need it?
I need this implemented on a certain page on a wordpress blog for 3 images. exactly as seen in the demo here. anyone willing to help out for a small donation?
great. it smoot and butiful. when it implement in gallery to views sample images.
ok, I got it working but something is still wrong: the images, popping up, are kinda below my navigation menu thus not compeltely visible. here is the test implementation I did: http://021club.co.za/
made some mroe progress: http://021club.co.za/ but I have problems because the opening image doesn’t seem to be allowed to overlap the ul
had to remove the float left from the li elements, as I want them centered…
If you want the hover to be centered, you have to make sure you apply your vertical/horizontal alignment (top: 50%, left: 50%, margin: -xx 0 0 -xx;
Also to make sure your hovers stay on top, just be sure to raise your z-index~
thx. for the hints.
I already tried raisign the z-index to 10000000 but still, the popping up image, is kinda restricted to the height I gave the ul container. if I take the height away from it, it resizes itself too small
I didn’t float: left the li’s beacuse I want them centered… so I use display: inline for the li’s .
appreciate any hints, jsut have a look at the link above please…
Try seeing what happens when u add the float back in. I know sometimes absolute positions don’t work when there is no float. I would get it to work like the tutorial first, then start cutting back and customizing. This way you know which line of code is causing your bug~
hey, I tried so but no chance
check it out: http://021club.co.za/
got actually 2 problems:
- the popping up image, pops out of the screen (on the right)
- it simply can’t manage to break out of that ul
I think tis got to do with the theme I am using, would you please, please have a look at this link and see if you see anything unusual? been debugging with firebug now for hours
Super!!!
Greate!I’ll copy to my blog:http:www.iebe.cn
Looks awesome. Nice job.
greate
thanks so much for that tip.
Nice , a really good job !! I really like it
But …
I like to do this kind of behaviour with the open source Prestashop engine.
a e-commerce platform.
Is there anybody who have any experience to share ??
thanks every body
I love this effect! I’m actually using it with some other effects. I’m adding it to a slider and a transparent image name rolls up from the bottom of the image. Gonna be sweet!
Thanks for the foundation!!!
Hi,
How can i give different links to all different images?
thanks in advance
Thanks man nice script and it saved my ass………….
Thanks once again…………..
awesome , dude
Nice tutorial.
Thanks!
Hiya,
Daft question, but how do you actually download the thumb_bg.png?
cheers,
Blockstopper
Hi,
very nice but is it possible to have it within a new ticker?
i have tried but no success.
Have any idea how?
hiya,
I managed to get the background image downloaded.
I’m now actually looking to have the effect with just a single image, instead of a ..My (PRE HOVER) image is already correctly styled, so I just need to apply the hover effects to it.
Has anyone done it with just a single image?
I’d appreciate the advice.
Thanks,
Blockstopper
Good day can you please tell me where to download the code for this that is working so that I can edit it and play with the code….I am really new in using jquery. I dont know where to start or where to paste the code that you posted. thank you in advance.
Is there a way to put some kind of description under each images ?
Great tutorial. I was having similar problem trying to get the hovered thumb to click through to an external URL, your reply to delete “return false;” was the simple solution. Wish I’d read it before googling the problem for an hour.
Very nice and useful tutorials to web designers,
Thanks for posting.
Hi,
Any one can help me to show the caption title under the hover image.
Please provide any solution!
Thanks
Mac
I love your site.
I really like Jquery with the simplistic and quick loading features becasue really web sites are fast and jam packed with traffic if driven correctly
Awesome plugins dude. I’ll definitley use for my portfolio. thanks for code
I am currently using this script to show my website portfolio (the images are all one size). But I also have another part of my portfolio where there are many different sized images. I was wondering if there was a way to have the thumbnail be a cut off version of the full image, or a percentage or the image, and then the rollover shows the image full size.
Any help would be greatly appreciated. I love this code and would like to use it through the rest of my portfolio.
Thanks, Key
If I have 20+ picture wanna to show by using this gallery, issit possible to have thumbnail pages like simpleviewer to have several pages for the thumbnails?
Like this method very much and ive tried and combine it with jquery caption. It works pretty smooth but i still dont know how to make each main view a link? do i need to repeat the id? thanks
Wow! So cool effect! very nice ..
I love this site.
Guys, I need help on this script.
When my page comes up the main image does not show by default, shows only when I click the thumb.
Does anyone knows what the problem is? Apart from this, is a great scrit.
RGDS
TZ
Thanx Soh,
Really cool & clean script.
Works well with drupal as well!
So how would you adjust the javascript file if your images are inside of an images folder?
The script works if everything is in one folder, but I typically organize my images in their own folder and when I try to test this script I am unable to get the main image to swap.
Tanks to anyone who is able to assist me!
Hey I know I am late to the JQuery mania but I love this tutorial and all the markup and javascript worked. A lot of tutorials out there don’t have good markup and JavaScript.
how do I use this on a php page?
Wondering if anyone has done anything like this with YouTube? I morphed the example into this.
http://www.tradica.com/20100211/
Thanks for the tutorials,
-R
Wonderful effect in gallery! Thank you very much!
This is a good effect.
Hey mon really useful stuff. I work for an educational institution and was smashing my head to the monitor looking for a way to make the “mac-ish type icons” and this tutorial helped me make it work for the site I was working on. I posted the html here http://ragevortex.0fees.net/macicons/iconstest.html if anyone else needs it. It’s only fair you were a great help. It’s a little crude but it served its purpose I hope you guys like it.
Hey…
Im not sure how to make thumbs working as the link this way so on clinck it will page will open in new tab or site did try place target=”_blank” but didnt worked for me.
So Beautiful !!!
Great work !
Great effect and I’m trying to incorporate something similar into my site, however everytime I try and change the image source in the XHTML it crashes my Dreamweaver?
Any ideas how to stop this so I can put my own thumbnails in!?
Hey Soulast -
The version I made for my school’s site has the “_target” code and works … I’d check the thing again maybe there’s a typo somewhere mon.
Example:
<a href="link" target="_blank"><img src="iconimage.png" alt="Icon Name" width="70" height="70" border="0" title="Icon Description for mouseover" /></a></dd>
For those trying to allow the thumb to actually click through, just delete
return false;and it will naturally follow the link.this is awesome, thumbs up for your website and this little application in particular.
Maybe I am missing something. But what the trick when using thumbnails that are a different size than 100×100 pixels? Is there a formula for choosing the right margin sizes for animation?
Also, when I use a thumbnail larger than 100px, Safari freaks out on the mouseout animation. Do you know what is causing this?
You can use this for clicking image to URL.
//Swap Image on Click
$(”ul.thumb li a”).click(function() {
$(”#main_view img”).attr({ src: mainImage });
window.location=$(this).find(”a”).attr(”href”); return false;
return false;
});
});
Sweet script. Gonna give it a spin right now. Any thoughts on implementing a title upon enlargement? The title would only show on the large image.
Good morning,
First of all — great work — love the effect(s). I’ve been playing around though for several days now (I really know nothing about jquery) trying to implement showing the caption under the one larger view of an image (not under the thumbnail). I’d like to pull the title from the img src line for each image used and have the caption change dynamically under just the large image. If anyone has been able to make this happen, I’d sincerely appreciate seeing the code you added to make it work. Thanks so much! P.S. I don’t have the website address showing yet, as the page is not yet active/published.
Thanks for this work.. I got it work on my current project.. the impact is awesome…
Thanks
why is no play in ie??
i cant do that…