Additional Image Hover - jQuery

[loafer]

You're showing me rows and columns but not table tags - just left them out for this post? There's supposed to be a class of .additionalImages and there has to be a link on the image.

Yes, plesae just left them out.

I've made a few changes as per your advise, but the main image remains unchanged when I roll over the additional images. Please let me know what I did wrong or miss???

Please find below the code:

<div id="productMainImage">

<a href="#"><img src="images/dvd/picture_01.jpg" width="558" height="558"></a>

</div>


<div id="productAdditionalImages">

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_01.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_02.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_03.jpg" width="135" height="135"></a></div>

</div>

[loafer]

Does this <div id="productImages" class="back"> matter???

[fairestcape]

Firstly, thanks Delia, for building this neat little module. To make it "effective" users need to apply some logic to how they display their images, and additional images.

On product info pages, it is always a good idea to make the main product image as large as possible (about 65% of the size of the image that renders in the LARGE IMAGE popup window - which should at least be 750 pixels deep). Similarly, additional image thumbs should be quite big too.

If users need more "sophisticated" functions, such as hover-zoom, and click-zoom, then there are some very nice systems at magictoolbox. True, these are commercial offerings, but they are dirt-cheap.

I hasten to add, we have no commercial interest in magictoolbox. We just like their tools.

But this mod is a great stand-by, and if the user makes sure to use GOOD pics, at good sizes, it actually works very nicely. Thanks D, for a valuable add-on!

[delia]

Yes, plesae just left them out.

I've made a few changes as per your advise, but the main image remains unchanged when I roll over the additional images. Please let me know what I did wrong or miss???

Please find below the code:

<div id="productMainImage">

<a href="#"><img src="images/dvd/picture_01.jpg" width="558" height="558"></a>

</div>


<div id="productAdditionalImages">

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_01.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_02.jpg" width="135" height="135"></a></div>

<div class="additionalImages"><a href="#"><img src="images/dvd/picture_03.jpg" width="135" height="135"></a></div>

</div>

Here's the source code from my demo site:

<div id="productAdditionalImages">

<div class="additionalImages centeredContent back" style="width:50%;">
<a href="images/shoe_black.jpg"><img src="images/shoe_black.jpg" alt="Additional Images Hover" title=" Additional Images Hover " width="80" height="80" /></a></div>
<div class="additionalImages centeredContent back" style="width:50%;">
<a href="images/shoe_red.jpg"><img src="images/shoe_red.jpg" alt="Additional Images Hover" title=" Additional Images Hover " width="80" height="80" /></a></div>
<br class="clearBoth" />

</div>
Note that the a href actually refers to an image. You just have # instead.

[delia]

Firstly, thanks Delia, for building this neat little module. To make it "effective" users need to apply some logic to how they display their images, and additional images.

On product info pages, it is always a good idea to make the main product image as large as possible (about 65% of the size of the image that renders in the LARGE IMAGE popup window - which should at least be 750 pixels deep). Similarly, additional image thumbs should be quite big too.

If users need more "sophisticated" functions, such as hover-zoom, and click-zoom, then there are some very nice systems at magictoolbox. True, these are commercial offerings, but they are dirt-cheap.

I hasten to add, we have no commercial interest in magictoolbox. We just like their tools.

But this mod is a great stand-by, and if the user makes sure to use GOOD pics, at good sizes, it actually works very nicely. Thanks D, for a valuable add-on!

Thanks for the nice words and the image size advice - you are quite correct!

[PleXy]

Thanks alot for this mod, took me long to find what I was looking for and this is almost what I want! :)

Is there a possibility to change the script so it changes the main pic on click, instead of hover?
I'm also getting blurry alt images (as Boggled) but do anyone know how to fix this?

See http://webbhjalpen.com/kund/billyand...&products_id=1

Thanks again!

[delia]

I would assume it's possible, but it was easier to do the hover. On click is not intuitive so it's really not as useful.

[PleXy]

Aight, thanks!

I assume it's this script I have to change, tried lots of different things but I really can't get it to work.
Anyone who can push me into the right direction?

<script type="text/javascript">
$(document).ready(function() {
		var origsrc = $("#productMainImage a img").attr("src");
	$("#productAdditionalImages .additionalImages a img").hover(
	  function () {
		$("#productMainImage a img").attr('src', this.src);
	  }, 
	  function () {
		$("#productMainImage a img").attr('src', origsrc);
	  }
	);
});
</script>

[delia]

I've not had any complaints about this script. Sounds like either you haven't installed it correctly or it's conflicting with something already there. That you are talking about is what makes it work so if you change it - it will definitely not work.

[PleXy]

I've not had any complaints about this script. Sounds like either you haven't installed it correctly or it's conflicting with something already there. That you are talking about is what makes it work so if you change it - it will definitely not work.

What do you mean? It's nothing wrong with the script and I have installed it correctly.
I want it to change the main picture onClick instead of Mouseover and that's what i'm trying to change.