Sharing images using thumbnails?

Question

http://visually-minded.com/portfolio-project.php

In the link above, when the user hovers over any thumbnail, the main image will be replaced. Can anyone point me in the right direction for a tutorial for this?

Answer 1

with html:

<img id="target" src="full_img_name1"/>
<a href="full_img_name1"><img src="thumb1"/></a>
<a href="full_img_name2"><img src="thumb2"/></a>
<a href="full_img_name3"><img src="thumb3"/></a>

and script:

$("a img").hover(function(){
  var img = $(this).closest('a').attr('href');
  $('#target').show().attr('src',img);
},function(){
  $('#target').hide().attr('src','');
});

Answer 2

Here it is used with a click.

http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

just looked at the code. But there should be something like what you are looking for

Answer 3

CSS, javascript:

http://www.cssplay.co.uk/menu/gallery4.html

Answer 4

$(element).hover(
    function () { $(this).data('original', $(this).attr('src')).attr('src', newsrc),
    function () { $(this).attr('src', $(this).data('original')
);

I don’t know how you define a new image source, but that is pretty much the way to go. In addition, you probably want to use each () on each image and inside, define "newsrc".

Answer 5

in jQuery you can do this:

$(function() {
$('#myImage-hover').hover(function() {
    $('#myImage').attr("src","path-to-file/img.png");}, function() {
    $('#myImage').attr("src","path-to-file/img_2.png");

    });
 }); 

As shown here in jsFiddle .