Jquery Hover based image gallery..

[drewpark88]

Hey guys, quick question. I am new to Jquery and just need a bit of assistance. I want to create an image gallery with one div holding all of my thumbnails (.thumbs) and the second div (which would be to the right of the thumbnails) would be an enlarged image of the thumbnail that you rollover (.enlarged). The enlarged image will be hidden, but when you rollover a thumbnail it will show that image enlarged in the ".enlarged" div. I am not sure how execute this, maybe use the title from the thumbnail? If you can show me an example of what the Jquery code would look like for that, or have a link to a tutorial or any help I would be greatly appreciative, thank you so much. The HTML code would looks something like:

<div class="thumbs">

 <img src="img/image1_thumb.jpg" title="image1.jpg" />

 <img src="img/image2_thumb.jpg" title="image2.jpg" />

 <img src="img/image3_thumb.jpg" title="image3.jpg" />

 <img src="img/image4_thumb.jpg" title="image4.jpg" />

 <img src="img/image5_thumb.jpg" title="image5.jpg" />
 
</div>


<div class="enlarged">

<img title="image1.jpg"/>

<img title="image2.jpg"/>

<img title="image3.jpg"/>

<img title="image4.jpg"/>

<img title="image5.jpg"/>

</div>

[SPeed_FANat1c]

I am not sure how execute this, maybe use the title from the thumbnail?

yeah, I don't see a problem with this solution. You just make a function which gets the title on hover and that function hides the shown image and unhides the needed image selected by title attribute.

[drewpark88]

Thanks for the input, I am just having trouble because I rarely use Jquery so I know how to unhide/hide an image but I do not know how to tie all this together in a function.

yeah, I don't see a problem with this solution. You just make a function which gets the title on hover and that function hides the shown image and unhides the needed image selected by title attribute.

[SPeed_FANat1c]

$('div.thumbs img').mouseover(function() {
  title = $('img').attr('title').val();
  $('div.enlarged img').hide(); //this should hide all images
  $('div.enlarged img[title="' + title +'"]').show();  //select the image with needed title and show it
});

don't know if this works, didn't test. But something like that.

[drewpark88]

Thanks for the example, unfortunately it did not work when I tried to implement it. I don't have to set the css visibility properties for .enlarged, right? Jquery should do that for me with hide/show.

$('div.thumbs img').mouseover(function() {
  title = $('img').attr('title').val();
  $('div.enlarged img').hide(); //this should hide all images
  $('div.enlarged img[title="' + title +'"]').show();  //select the image with needed title and show it
});

don't know if this works, didn't test. But something like that.

[SPeed_FANat1c]

checked adn modified, now it works :)

<script type = 'text/javascript' src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type = 'text/javascript'>

$(document).ready(function(){
	$('div.enlarged img').hide(); //this should hide all images
	
	$('div.thumbs img').mouseover(function() {
		  title = $(this).attr('title');	//mouse overed image title
		  
		  $('div.enlarged img').hide(); //this should hide all images
		  $('div.enlarged img[title="' + title +'"]').show();  //select the image with needed title and show it
		
		});
});
</script>

    
<div class="thumbs">

 <img src="http://images.daniweb.com/customavatars/avatar699501_1.gif" title="http://images.daniweb.com/customavatars/avatar699501_1.gif" />

 <img src="img/image2_thumb.jpg" title="image2.jpg" />

 <img src="img/image3_thumb.jpg" title="image3.jpg" />

 <img src="img/image4_thumb.jpg" title="image4.jpg" />

 <img src="img/image5_thumb.jpg" title="image5.jpg" />
 
</div>


<div class="enlarged">

	<img src="http://images.daniweb.com/customavatars/avatar699501_1.gif" title="http://images.daniweb.com/customavatars/avatar699501_1.gif"/>
	
	<img title="image2.jpg"/>
	
	<img title="image3.jpg"/>
	
	<img title="image4.jpg"/>
	
	<img title="image5.jpg"/>

</div>

BTW you can hide all images using css, and remove the line which hides all them initialy on document ready

[drewpark88]

You rock!! Works great! Thank you so much :)

checked adn modified, now it works :)

<script type = 'text/javascript' src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type = 'text/javascript'>

$(document).ready(function(){
	$('div.enlarged img').hide(); //this should hide all images
	
	$('div.thumbs img').mouseover(function() {
		  title = $(this).attr('title');	//mouse overed image title
		  
		  $('div.enlarged img').hide(); //this should hide all images
		  $('div.enlarged img[title="' + title +'"]').show();  //select the image with needed title and show it
		
		});
});
</script>

    
<div class="thumbs">

 <img src="http://images.daniweb.com/customavatars/avatar699501_1.gif" title="http://images.daniweb.com/customavatars/avatar699501_1.gif" />

 <img src="img/image2_thumb.jpg" title="image2.jpg" />

 <img src="img/image3_thumb.jpg" title="image3.jpg" />

 <img src="img/image4_thumb.jpg" title="image4.jpg" />

 <img src="img/image5_thumb.jpg" title="image5.jpg" />
 
</div>


<div class="enlarged">

	<img src="http://images.daniweb.com/customavatars/avatar699501_1.gif" title="http://images.daniweb.com/customavatars/avatar699501_1.gif"/>
	
	<img title="image2.jpg"/>
	
	<img title="image3.jpg"/>
	
	<img title="image4.jpg"/>
	
	<img title="image5.jpg"/>

</div>

BTW you can hide all images using css, and remove the line which hides all them initialy on document ready