Hi there Guys,
I am currently using NopCommerce version 3.4.
I have a question regarding the product details page.
I have lots of things like hand made ties, pocket squares & cufflink etc. etc. on my store but only 2 x pictures uploaded per product - one with a person wearing the item and one of the item on it's own.
I have been using the nop-templates 'nop cloud zoom' which is great, however what I would really like... :)
Is to show the image of the product on it's own when you visit the product details page but instead of zooming on the product on hover, I would like to swap the image to the product being worn (without the zoom would be fine....)
Does anyone know of a way/script to do this by using the ONLY other picture uploaded for each product. (using only 2 images should make this easy right?? lol)
Any help greatly appreciated - not a newbie and I have no problem using Visual Studio but a bit stumped with this one.
Kind Regards
Swap product image on hover
- 7
- 45
- 4/3/2014
- Malaysia
d-print wrote:
Hi,
I think this might help, http://www.anyexample.com/webdev/javascript/jquery_change_image.xml
You can try to apply the script in _ProductDetailsPictures.cshtml
Is to show the image of the product on it's own when you visit the product details page but instead of zooming on the product on hover, I would like to swap the image to the product being worn (without the zoom would be fine....)
Hi,
I think this might help, http://www.anyexample.com/webdev/javascript/jquery_change_image.xml
You can try to apply the script in _ProductDetailsPictures.cshtml
MVP
Silver Solution Partner
Certified Developer
- 2639
- 42712
- 1/21/2010
- United States
Hello,
If I understand correctly you want roll-over effect like this one: http://themes.fashion.nop-templates.com/lingerie , but on a product details page?
If so, you can make a simple thing like:
- in the product details view, on the product image add attribute with name, let`s say, "data-rolloverimage" and it must be equal to the second picture of the product if such exists.
If the picture tag was this:
Convert it to this:
Of course, you must make your checks if the second image exists !
And now you can write a little javascript, which works this way:
When you hover on the image it swaps the places of its src with the data-rolloverimage attribute.
I hope these guidlines are clear enough and help you achieve the desired effect !
If I understand correctly you want roll-over effect like this one: http://themes.fashion.nop-templates.com/lingerie , but on a product details page?
If so, you can make a simple thing like:
- in the product details view, on the product image add attribute with name, let`s say, "data-rolloverimage" and it must be equal to the second picture of the product if such exists.
If the picture tag was this:
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="[email protected]" />
Convert it to this:
<img data-rolloverimage="@Model.PictureModels[1].FullSizeImageUrl" alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="[email protected]" />
Of course, you must make your checks if the second image exists !
And now you can write a little javascript, which works this way:
When you hover on the image it swaps the places of its src with the data-rolloverimage attribute.
I hope these guidlines are clear enough and help you achieve the desired effect !
- 33
- 175
- 4/14/2009
- United Kingdom
Hi there, thanks for the reply.
I have looked into this and actually I think that making the rollover image swap on the category page is in fact sufficient.
I have the nop-ultimate-theme-collection and have looked at the fashion theme....
It would appear to work by copying the code and moving the relevant script from the fashion.js file into the 'artFactory' theme , however it doesn't load the second image when I open the category page.
If I inspect element in chrome and add an image url the image does swap.
Would I be correct in thinking that you have changed and recompiled code to achieve this or is there something that I am missing. :(
Would you be able to assist me with doing the image swap on the category page instead of the product details page the same as the fashion theme?
Any help greatly appreciated
I have looked into this and actually I think that making the rollover image swap on the category page is in fact sufficient.
I have the nop-ultimate-theme-collection and have looked at the fashion theme....
It would appear to work by copying the code and moving the relevant script from the fashion.js file into the 'artFactory' theme , however it doesn't load the second image when I open the category page.
If I inspect element in chrome and add an image url the image does swap.
Would I be correct in thinking that you have changed and recompiled code to achieve this or is there something that I am missing. :(
Would you be able to assist me with doing the image swap on the category page instead of the product details page the same as the fashion theme?
Any help greatly appreciated
MVP
Silver Solution Partner
Certified Developer
- 2639
- 42712
- 1/21/2010
- United States
d-print wrote:
Hello,
You do not need anything more that just adding the second image url as a data attribute and writing a simple javascript code, that changes the image source on hover. If you still have valid licence for our services, you can write in our ticketing system about any further support.
Hi there, thanks for the reply.
I have looked into this and actually I think that making the rollover image swap on the category page is in fact sufficient.
I have the nop-ultimate-theme-collection and have looked at the fashion theme....
It would appear to work by copying the code and moving the relevant script from the fashion.js file into the 'artFactory' theme , however it doesn't load the second image when I open the category page.
If I inspect element in chrome and add an image url the image does swap.
Would I be correct in thinking that you have changed and recompiled code to achieve this or is there something that I am missing. :(
Would you be able to assist me with doing the image swap on the category page instead of the product details page the same as the fashion theme?
Any help greatly appreciated
I have looked into this and actually I think that making the rollover image swap on the category page is in fact sufficient.
I have the nop-ultimate-theme-collection and have looked at the fashion theme....
It would appear to work by copying the code and moving the relevant script from the fashion.js file into the 'artFactory' theme , however it doesn't load the second image when I open the category page.
If I inspect element in chrome and add an image url the image does swap.
Would I be correct in thinking that you have changed and recompiled code to achieve this or is there something that I am missing. :(
Would you be able to assist me with doing the image swap on the category page instead of the product details page the same as the fashion theme?
Any help greatly appreciated
Hello,
You do not need anything more that just adding the second image url as a data attribute and writing a simple javascript code, that changes the image source on hover. If you still have valid licence for our services, you can write in our ticketing system about any further support.
