Navigating the process of implementing a change in product image upon hovering

I am in the process of creating a shopping cart that will feature product thumbnails displayed in a single column on the left side and a large main product image. When a user hovers over a thumbnail image, I want the main image to change to display the hovered-over thumbnail.

I want this functionality to be similar to what you see on Amazon at http://www.amazon.com/gp/product/B0057OCDQS/ref=s9_simh_gw_p422_d0_i1?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-3&pf_rd_r=1ZQ6JXTTST3W87ZTQE26&pf_rd_t=101&pf_rd_p=470938811&pf_rd_i=507846. What would be the best way to implement this feature? Is there a specific control or jQuery plugin available for achieving this effect? If not, where can I find a sample code to help me with this task?

The technologies being used for this project are jQuery, jQuery UI, ASP.NET/Mono MVC3.

Update

The list of thumbnails is quite long. How can I display only 3 thumbnails at a time and include scroll buttons to navigate through the rest of the thumbnails? Something like:

scroll one thumb up

thumbnail image 1

thumbnail image 2

thumbnail image 3

scroll one thumb up
jqueryhtmlcssasp.net-mvcjquery-plugins

Answer №1

Check out this solution:

<img src="img/myimage_tb.png" data-src="img/myimage.png">
<script>
    $('.productImage').mouseenter(function(){
         $(this).attr('data-thb', this.src);
         this.src = $(this).attr('data-src');
      }).mouseleave(function(){
         this.src = $(this).attr('data-thb');
    });
</script>

Answer №2

To achieve this, utilize the hover method.

Here is the HTML code:

<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/city/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/people/200/400" width="50" height="50"/>
</div>

<div class="main-img">
    <img id="main" src="http://lorempixel.com/people/200/400"/>
</div>

CSS for styling:

.thumbs {
    display: inline-block;
    vertical-align: top;
}

.thumbs img {
    display: block;
}

.main-img {
    display: inline-block;
}

Implementing JQuery:

$('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});

Explore the example on JSFiddle.

Answer №3

Is it possible to dynamically modify the content of a div with Jquery when onClick event occurs?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

I have encountered a puzzling issue: http://jsfiddle.net/akosk/t2KvE/8/ HTML <div id='base'> <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe> </div> <script id="conte ...

htmlcss

Developing SAPUI5: Construct a GenericTile featuring a centrally positioned icon

I'm having trouble creating a custom tile in SAP that inherits from sap.suite.ui.commons.GenericTile and only displays an icon centered in the middle of the tile. The standard aggregations and properties are causing issues as they position the icon on ...

htmlcsstilesapui5

"Eliminating Redundant JS and CSS Files in Magento to Improve

While analyzing the performance of a website, I noticed that GTmetrix found some CSS & JS files being loaded from different locations but containing the same file. An example: <action method="addItem" module="ves_blockbuilder" ifconfig="ves_blockbuilde ...

javascriptphpcssmagento

Populate a node with every element from the array

Here I am once again! So, I have an array that is populating a JSON structure, and I now need to translate that array structure into an XML format. How can I achieve this? The array is correctly formatted with JSON syntax and I need to insert the data in ...

jqueryxmlarraysjson

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

using a jQuery loop to retrieve the value of an attribute

Let me explain my current situation, I am faced with a loop containing multiple posts, and I want to use jQuery to insert a link that was previously called into a newly created div using JavaScript. The code snippet looks like this: if ($(this).hasClas ...

jqueryloopsappend

What is the best way to remove quotation marks from a string?

I am struggling to remove any quotes (") within <a href> and </a> tags when manipulating a string. I have tried various methods without success. The string resembles HTML but is actually in string form, and I need to eliminate quotes from eleme ...

phphtmlstringforms

When clicked, the menu smoothly fades in, but unfortunately, the fade-out effect is not functioning as intended

My website has a "hamburger" icon button that, when clicked, reveals the menu with a fading effect. However, I encountered an issue where trying to apply the fadeOut effect to another icon/button within the menu did not work as intended. The menu remained ...

jquerywordpress

What could be causing the need to restart the server every time a style change is made?

I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server. Here is a snippet from my postcss.config.js: plugins: [ [ ...

cssreactjssassnext.jscss-purge

Encountering an I18n::InvalidLocale error message (:en is an invalid locale) during a Ruby on Rails AJAX request

While the page loads normally without showing any locale error, an issue arises when making an AJAX request: I18n::InvalidLocale (:en is not a valid locale): i18n (0.7.0) lib/i18n.rb:284:in `enforce_available_locales!' i18n (0.7.0) lib/i18n.rb:15 ...

jqueryruby-on-railsajax

I am experiencing an issue with my css dropdown menu appearing incorrectly on both Internet Explorer and Firefox

Chrome and Safari are working perfectly fine, but I encountered an issue with IE and FF where the submenu menu appears on the left side of the main navigation. The website in question is cedumilam.php.cs.dixie.edu. Below is the CSS code I am using: # ...

jqueryhtmlcssinternet-explorerfirefox

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

htmlcss

What is the best way to clear an XML or table?

As I delve into learning Javascript, I've been experimenting with different approaches to achieve a specific functionality. I'm trying to implement a button that can toggle or hide XML data in a table. My attempts so far have involved adding anot ...

javascripthtmlxmlbuttononclick

An overabundance of parallax visuals

I'm currently working on a static website that features several parallax images dividing each section. However, I've run into an issue as I continue to add more sections and parallax images. Some of the images at the bottom of the website are shi ...

javascriptjqueryhtmlcssparallax

Find the quantity of items in each list individually and add them to a new list

Seeking a solution for a seemingly simple issue. I am attempting to calculate the number of list items and then add this count to the list in the parent div. The problem lies in the fact that it always displays the value of the last item in the list. For i ...

javascriptjquerytags

What is the sequence of Javascript Execution for the event of window.location.href?

After browsing through this discussion on asynchronous JavaScript location.href call and watching a video explaining the event loop, I found no clear explanation regarding the behavior of href within window.location: The script order in the source code is ...

javascriptjqueryajaxdom-events

default radio option with pre-selected value

Below is a radio option list, but I'm having trouble getting the desired default selection on first render: <label class="radio normalFontWeight"> <input type="radio" name="Criteria" data-ng-value="EVERYONE_REVIEWED" data-ng- ...

javascripthtmlangularjsradio-button

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

htmlcss

jQuery prioritizes enforcing style over using a CSS file

I am facing an issue with a nested div functioning similar to a drop-down menu. The problem arises when I click on the #two div as I want it to disappear. To handle this, I utilized jQuery and tried using both .hide() and .slideUp(). However, upon implem ...

jqueryhtmlcss

What is the method for writing the following line in CSHTML server-side code?

<script> function a(id) { var table = document.getElementById(id); .... } </script> @{ //Is there a way to rewrite the line "var table = document.getElementById(id)" here within the ser ...

javascripthtmlclient-sideserver-side