How to load different images on hover

Question

I am working in a e-commerce application,In this I want to achieve the task mentioned below...

When I hover on smaller images,I need to show the respective images on the big box.

In this the big image size is 2000 * 2000 pixels and the smaller image size is 80 * 80 But I have the big images for the respective smaller images in other folder.I want to load the big image into big box when I hover on the related smaller image...

I have done something but It is not working for me...

$('img[id^=sm00]').click(function() {
  $('#ProductImage').attr('src', $(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img1" class="img-thumbnail">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img1" class="img-thumbnail">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img1" class="img-thumbnail">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img1" class="img-thumbnail">
  </div>
</div>

How does it "not work" for you: error messages, unexpected behavior, crash, freeze, horde of locusts? — Haem, Mar 15 '18 at 08:48
You say you want this to occur on hover, but you use the ".click" jquery event. If you were to change this to ".hover" it should do what you expect. — Ryan Stonebraker, Mar 15 '18 at 08:48
$('img[id^=sm00]').mouseover(function() { $('#ProductImage').attr('src', $(this).attr('src')); }); — yjs, Mar 15 '18 at 08:50
This is also possible to do without using jquery at all. See https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered (instead of changing the background color, you could change the background image) — Ryan Stonebraker, Mar 15 '18 at 08:52

score 2 · Answer 1 · answered Mar 15 '18 at 08:59

You can use .data() for this, check updated snippet below...

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).data('img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="https://dummyimage.com/600x400/000/fff" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="https://dummyimage.com/60x40/000/fff" alt="img1" class="img-thumbnail" data-img="https://dummyimage.com/600x400/000/fff">
    <img id="sm001" src="https://dummyimage.com/60x40/ff0/fff" alt="img2" class="img-thumbnail" data-img="https://dummyimage.com/600x400/ff0/fff">
    <img id="sm002" src="https://dummyimage.com/60x40/00f/fff" alt="img3" class="img-thumbnail" data-img="https://dummyimage.com/600x400/00f/fff">
    <img id="sm003" src="https://dummyimage.com/60x40/0ff/fff" alt="img4" class="img-thumbnail" data-img="https://dummyimage.com/600x400/0ff/fff">
    <img id="sm004" src="https://dummyimage.com/60x40/f00/fff" alt="img5" class="img-thumbnail" data-img="https://dummyimage.com/600x400/f00/fff">
  </div>
</div>

score 1 · Accepted Answer · answered Mar 15 '18 at 08:52

1

This should work. You are calling the small image in your code, but you need to call the path to big image, which I put in the ref attribute in this example. Also you are using click method, so I changed that to hover.

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).attr('ref'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="path/to/big/image1.jpg">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="path/to/big/image2.jpg">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="path/to/big/image3.jpg">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="path/to/big/image4.jpg">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="path/to/big/image5.jpg">
  </div>
</div>

answered Mar 15 '18 at 08:52

idoric

179
6

Actually, it appears that the poster had this right originally. They are changing the source of the large image (ProductImage) to the source of the image being hovered over. The only problem was that .click was being used instead of .hover. – Ryan Stonebraker Mar 15 '18 at 08:56
It is working in visual studio project but not working in Angular4 I'm confused why it's not working inside Angular4...Do you have any idea – Nikson Mar 15 '18 at 09:05
@Nikson Well, first off this is using jQuery. Do you have jQuery installed in your Angular project? And secondly if you ARE using angular why do it this way at all. AFAIK angular has it's own directives for cases like these. – idoric Mar 15 '18 at 09:34
can I done this in pure javascript $('img[id^=sm00]').click(function() { $('#ProductImage').attr('src', $(this).attr('src')); }); – Nikson Mar 15 '18 at 11:35
@idoric,can you help me in this https://stackoverflow.com/questions/49748925/adding-products-in-cart-carousel-generate-new-row-of-slider-in-angular4 – Nikson Apr 10 '18 at 08:56
@idoric ,https://stackoverflow.com/questions/49767230/adding-products-in-carousel-generates-new-row-in-angular4 can you help me in this – Nikson Apr 11 '18 at 05:43
@Nikson sorry man, I know nothing about Angular. Never used it in my life. – idoric Apr 11 '18 at 07:01

score 0 · Answer 3 · answered Mar 15 '18 at 08:44

0

.col-xs-6{
  height: 50vh;
}
.col-xs-6{
  background: url('http://joelbonetr.com/images/fwhee.png');
  background-size: cover;
}
.col-xs-6:hover{

height: 75vh;
background: url('http://joelbonetr.com/images/lightwheel.jpg');
background-size: cover;
}

    <div class="col-xs-6"></div>

i think this is what you asked for

answered Mar 15 '18 at 08:44

JoelBonetR

1,551
1
15
21

oh i see your edit now. To achieve what you want you'll need ajax on your images, or pre-load it before to move them at the desired place on hover (or on click), let me search an example – JoelBonetR Mar 15 '18 at 08:45

How to load different images on hover

3 Answers3