Swap out the current image for a different one

Question

Swap out the current image for a different one

When a user clicks on different image or color options, I want to change the main image displayed. Below are the links to the alternative images:

https://i.sstatic.net/DxJEb.jpg

This is the HTML code:

<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">

<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a></p>
<div id="colorsAndAltContainer">
<ul class="">

    <li class="defaultColor selected">
        <div class="inner">
            <div class="description">BLACK</div>
            <div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
        </div>
    </li>
    <li>
        <div class="inner">
            <div class="description">WHITE</div>
            <div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
        </div>
    </li>

    <div class="altImages">

    <ul class="alternativeImages">     
        <li class="selected">

        </li>
        <li>
            <img alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
        </li>
    </ul>
    </div>          

    </ul>
</div> 
</div>

CSS Code:

.container {
    min-height: 565px;
    width: 878px;
    margin: 0 auto;
    padding-top: 220px;
    position: relative; 
}

body{
    background-color: #000;
}
.img-main {
    margin-bottom: 10px;
    text-align: center;
    float: left;
    margin-top: 0px;
}
#colorsAndAltContainer {
    position: relative;
    top: 0;
    right: 0;
    width: 70px;
    height: 300px;
    float: left;
    margin-left: 6px;
}
.inner {
    cursor: pointer;
}
.description {
    display: none;
}
.rgbColor {
    border: 1px solid #cbcbcb;
    width: 13px;
    height: 13px;
}
.selectColor {
    float: left;
}

selectColor ul {
    float: left;
    margin-right: 6px;
}
ul {
    list-style: none;
    padding: 0;
    margin-top: 0px;
}
.altImages {
    position: absolute;
    width: 70px;
    bottom: 0;
    right: 0;
}
.alternativeImages {
    bottom: 0;
}
.alternativeImages li {
    cursor: pointer;
    margin-top: 6px;
}
img {
    display: block;
}

javascript jquery html css

Answer 1

Answer №1

To start, make sure to give your T-shirt image a unique ID:

<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >

Next, for your black and white buttons, add a data attribute containing the URL of the alternate t-shirt image:

<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>

Using jQuery, you can then change the image source upon clicking the button:

$('div.inner').click(function() {
    var image = $(this).attr('data-image-id');
    $('#t-shirt').attr('src', image);
});

If needed, consider providing a more specific trigger name or adding an ID to the inner div class for clarity and to prevent any conflicts.

Answer 2

To start, make sure to give your T-shirt image a unique ID:

<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >

Next, for your black and white buttons, add a data attribute containing the URL of the alternate t-shirt image:

<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>

Using jQuery, you can then change the image source upon clicking the button:

$('div.inner').click(function() {
    var image = $(this).attr('data-image-id');
    $('#t-shirt').attr('src', image);
});

If needed, consider providing a more specific trigger name or adding an ID to the inner div class for clarity and to prevent any conflicts.

Answer 3

Answer №2

Here is an easy method to accomplish this using vanilla JavaScript.

function toggleImages(){
  if(document.getElementById("mainPic").src != "http://example.com/image1.jpg") {
    document.getElementById("mainPic").src = "http://example.com/image1.jpg";
    document.getElementById("smallPic").src = "http://example.com/thumbnail1.jpg";
  }else{
    document.getElementById("mainPic").src = "http://example.com/image2.jpg";
    document.getElementById("smallPic").src = "http://example.com/thumbnail2.jpg";
  }
     
  
}

.gallery {
min-height: 500px;
width: 800px;
margin: 0 auto;
padding-top: 200px;
position: relative; 
}

 body{
background-color: #fff;
 }
.img-main {
margin-bottom: 15px;
text-align: center;
float: left;
margin-top: 5px;
}
#colorsAndThumbs {
position: relative;
top: 0;
right: 0;
width: 60px;
height: 250px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.label {
display: none;
}
.colorSelect {
border: 1px solid #ccc;
width: 10px;
height: 10px;
}
.selectColor {
float: left;
}

.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 5px;
}
.thumbImgs {
position: absolute;
width: 60px;
bottom: 0;
right: 0;
}
.altThumbImgs {
bottom: 0;
}
.altThumbImgs li {
cursor: pointer;
margin-top: 8px;
}
img {
display: block;
}

<div class="gallery">
<p class="img-main">
<a href="#"   class="image-box">

<img id="mainPic" src="http://example.com/image2.jpg">
</a> </p>
<div id="colorsAndThumbs">
<ul class="">

    <li class="default selected">
                    <div class="inner">
                        <div class="label">BLACK</div>
                        <div onclick="toggleImages();" class="colorSelect" data-color="000" style="background-color: #000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="label">WHITE</div>
                        <div onclick="toggleImages();" class="colorSelect" data-color="FFF" style="background-color: #FFF"></div>
                    </div>
                </li>

    <div class="thumbImgs">

   <ul class="altThumbImgs">     
   <li class="selected">

        </li>
        <li>
            <img onclick="toggleImage();" id="smallPic" alt="Product Thumbnail" class="thumbnail"  src="http://example.com/thumbnail2.jpg" width="50" height="50" >
        </li>
     </ul>
                </div>          

                </ul>
     </div> 
       </div>

Answer 4

Here is an easy method to accomplish this using vanilla JavaScript.

function toggleImages(){
  if(document.getElementById("mainPic").src != "http://example.com/image1.jpg") {
    document.getElementById("mainPic").src = "http://example.com/image1.jpg";
    document.getElementById("smallPic").src = "http://example.com/thumbnail1.jpg";
  }else{
    document.getElementById("mainPic").src = "http://example.com/image2.jpg";
    document.getElementById("smallPic").src = "http://example.com/thumbnail2.jpg";
  }
     
  
}

.gallery {
min-height: 500px;
width: 800px;
margin: 0 auto;
padding-top: 200px;
position: relative; 
}

 body{
background-color: #fff;
 }
.img-main {
margin-bottom: 15px;
text-align: center;
float: left;
margin-top: 5px;
}
#colorsAndThumbs {
position: relative;
top: 0;
right: 0;
width: 60px;
height: 250px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.label {
display: none;
}
.colorSelect {
border: 1px solid #ccc;
width: 10px;
height: 10px;
}
.selectColor {
float: left;
}

.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 5px;
}
.thumbImgs {
position: absolute;
width: 60px;
bottom: 0;
right: 0;
}
.altThumbImgs {
bottom: 0;
}
.altThumbImgs li {
cursor: pointer;
margin-top: 8px;
}
img {
display: block;
}

<div class="gallery">
<p class="img-main">
<a href="#"   class="image-box">

<img id="mainPic" src="http://example.com/image2.jpg">
</a> </p>
<div id="colorsAndThumbs">
<ul class="">

    <li class="default selected">
                    <div class="inner">
                        <div class="label">BLACK</div>
                        <div onclick="toggleImages();" class="colorSelect" data-color="000" style="background-color: #000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="label">WHITE</div>
                        <div onclick="toggleImages();" class="colorSelect" data-color="FFF" style="background-color: #FFF"></div>
                    </div>
                </li>

    <div class="thumbImgs">

   <ul class="altThumbImgs">     
   <li class="selected">

        </li>
        <li>
            <img onclick="toggleImage();" id="smallPic" alt="Product Thumbnail" class="thumbnail"  src="http://example.com/thumbnail2.jpg" width="50" height="50" >
        </li>
     </ul>
                </div>          

                </ul>
     </div> 
       </div>

Answer 5

Answer №3

Below is a simple method that preserves your current code structure.

<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{

  if($(this).find('.rgbColor').data('color') === "000000") 
  {
       $('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
       $('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
  }   
  else if($(this).find('.rgbColor').data('color') === "FFFFFF") 
  {
    $('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"); 
    $('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
  }  
});

$('.alternativeImage').on('click',function()
{
  var smallImageUrl = $(this).attr("src");
  var mainImageUrl = $(".img-main img").attr("src");
  $(this).attr("src",mainImageUrl);  
  $(".img-main img").attr("src",smallImageUrl);
  $(".img-main img").css("width","300px");
});
});
</script>

Access the working demo here: http://jsfiddle.net/b2c5e19h/5/

Answer 6

Below is a simple method that preserves your current code structure.

<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{

  if($(this).find('.rgbColor').data('color') === "000000") 
  {
       $('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
       $('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
  }   
  else if($(this).find('.rgbColor').data('color') === "FFFFFF") 
  {
    $('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"); 
    $('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
  }  
});

$('.alternativeImage').on('click',function()
{
  var smallImageUrl = $(this).attr("src");
  var mainImageUrl = $(".img-main img").attr("src");
  $(this).attr("src",mainImageUrl);  
  $(".img-main img").attr("src",smallImageUrl);
  $(".img-main img").css("width","300px");
});
});
</script>

Access the working demo here: http://jsfiddle.net/b2c5e19h/5/

Answer 7

Answer №4

To change the link of a specific <a> tag, first give it an id and then access it using JavaScript:

document.getElementById('idOfTag').setAttribute('href','someOtherImage.jpg');

This code can be included within a JavaScript function. Simply make the button or element that triggers the action listen for a click event and execute the function by adding onclick="yourFunctionsName().

You don't need to use jQuery for this task!

Answer 8

To change the link of a specific <a> tag, first give it an id and then access it using JavaScript:

document.getElementById('idOfTag').setAttribute('href','someOtherImage.jpg');

This code can be included within a JavaScript function. Simply make the button or element that triggers the action listen for a click event and execute the function by adding onclick="yourFunctionsName().

You don't need to use jQuery for this task!

Swap out the current image for a different one

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjust the camera in threejs to be positioned inside a different object

JQuery Utilization: Constructing Queries - Techniques for Extracting Queries from Backend Code

What steps do I need to take in order to implement a basic ZeroClipboard copy-to-clipboard feature in jQuery on jsFiddle with just one click?

submit the data to the database

What is the best way to locate the key with the greatest value in an array that is less than or equal to a certain

ASP.NET Core Ajax response is empty

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

Ways to ensure that the dropdown content remains visible even after the mouse has exited the trigger element

What is the syntax for linking to a different file in the frontmatter of a markdown file?

Using Node.js to implement GET, POST, and DELETE functionalities

Using AJAX for fetching and saving an object into a variable

Utilizing JQuery and Canvas to dynamically update a variable

Showing an image on a blurred background-image at the top of the webpage

strange occurrences in localToWorld transformation

Explore accessing a PHP array with multiple dimensions using Jquery Ajax

What is the best way to refresh a PHP function based on a JavaScript event?

The setState function in React updates the value, however, when a form is submitted, it captures and

A datatable was designed to set a background color for every row, regardless of any specified conditions for selecting which rows to apply

Transform the JSON format received from the API endpoint to make it suitable for use in the component

Customizing the Navigation Border-Bottom in WordPress