replace image src onclick jQuery

Question

I'm trying to create simple product page

HTML:

<div class="product-image">
    <div class="product-large-image">
        <img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" id="small-image"></div>
    <div class="product-small-image">
        <img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" id="small-image"></div>
</div>

CSS:

.product-large-image {
    width: 100%;
    border: 2px solid #ffac00;
    text-align: center;
    display: inline-block;
    margin-bottom: 5px;
}
.product-large-image img {
    width: 90%;
}
.product-small-image {
    width: 19.38%;
    border: 2px solid #ffac00;
    margin-bottom: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.product-small-image img{
    width: 90%;
}

I need to replace the src attribute of the large image with the src attribute of the clicked image.

JS (jquery):

$('#small-image').click(function(){
    var imgsrc=$(this).attr('src');
    $('#large-image').attr('src',imgsrc);
});

It's working well only on first image
I need it to work when any of the small images is clicked, not just the first.

This is live example of my code:
https://jsfiddle.net/MohamedMehanny/dsahrLvn/2/

jsfiddle.net/MohamedMehanny/dsahrLvn ... its autally this .. — RïshïKêsh Kümar
– RïshïKêsh Kümar, Commented May 11, 2017 at 18:22
Well ids are singular so you can not have more than one element with an id... — epascarello
– epascarello, Commented May 11, 2017 at 18:23
If you change it to a class, you should be able to use something like this $('.product-image').on('click', '.small-image', function(){ //your code here. }) — Jean B
– Jean B, Commented May 11, 2017 at 18:29

JJJ · Accepted Answer · 2017-05-11 18:23:24Z

2

it's working well only on first image i need it to working in any clicked image not the first only

Use classes instead of ID's

<img src="#" class="small-image" />

$('.small-image').click(function(){
  var imgsrc=$(this).attr('src');
  $('#large-image').attr('src',imgsrc);
});

answered May 11, 2017 at 18:23

JJJ

3,3525 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-05-11 18:34:02Z

The id attribute must be unique:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).¹

One alternative approach is to use a class attribute instead of id for each of the small images.

For example, image tags like this:

<img id="small-image" src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title">

Would use a class attribute instead of id:

<img class="small-image" src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title">

Then use the css class selector to select the images in order to set up the click handler:

$('.small-image').click(function(){...});

See it demonstrated below:

$('.small-image').click(function() {
  var imgsrc = $(this).attr('src');
  $('#large-image').attr('src', imgsrc);
});

.product-large-image {
  width: 100%;
  border: 2px solid #ffac00;
  text-align: center;
  display: inline-block;
  margin-bottom: 5px;
}

.product-large-image img {
  width: 90%;
}

.product-small-image {
  width: 19.38%;
  border: 2px solid #ffac00;
  margin-bottom: 5px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.product-small-image img {
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-image">
  <div class="product-large-image"><img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
</div>

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

bencodezen · Accepted Answer · 2017-05-11 18:23:44Z

1

The issue lies with your selectors. You are using IDs which means that only one should ever exist on a single page.

For best practices, use a JS prefixed class to maintain separation of concerns for this. An example in your case would .js-small-img or .js-lg-img

Let me know if you still have any issues!

answered May 11, 2017 at 18:23

bencodezen

1,0631 gold badge7 silver badges17 bronze badges

Comments

Demeke Agidie · Accepted Answer · 2017-05-11 18:40:48Z

$('.small-image').click(function() {
  var imgsrc = $(this).attr('src');
  $('#large-image').attr('src', imgsrc);
});

.product-large-image {
  width: 100%;
  border: 2px solid #ffac00;
  text-align: center;
  display: inline-block;
  margin-bottom: 5px;
}

.product-large-image img {
  width: 90%;
}

.product-small-image {
  width: 19.38%;
  border: 2px solid #ffac00;
  margin-bottom: 5px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.product-small-image img {
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-image">
  <div class="product-large-image"><img src="http://demo4coder.com/gosmart/pub/media/catalog/product/cache/image/600x600/e9c3970ab036de70892d86c6d221abfe/v/e/venus100_shoes3.jpg" alt="Product Title" id="large-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008769.jpg" alt="Product Title" class="small-image"></div>
  <div class="product-small-image"><img src="https://cf2.s3.souqcdn.com/item/2015/10/13/92/68/92/8/item_XL_9268928_10008754.jpg" alt="Product Title" class="small-image"></div>
</div>

Collectives™ on Stack Overflow

replace image src onclick jQuery

HTML:

CSS:

JS (jquery):

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

CSS:

JS (jquery):

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related