CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohamed Mehanny
Mohamed Mehanny

Reputation: 307

replace image src onclick jQuery

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/

Upvotes: 0

Views: 3798

Answers (4)

Demeke Agidie
Demeke Agidie

Reputation: 11

$('.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>

Upvotes: 1

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

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).1

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>

1https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Upvotes: 2

bencodezen
bencodezen

Reputation: 1063

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!

Upvotes: 1

JJJ
JJJ

Reputation: 3332

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);
});

Upvotes: 2

Related Questions