Show a different image (bigger version) on mouse hover

user_13256890 0
Viewed 102

I want to load a different image (A bigger version) of existing one when mouse is hovered over that image. So I place all the images through AJAX call

<main class="container">     
    <ul class="gallery">            
    </ul>
</main>

success: function (data) {
            $.each(data, function (index, element) {
                $(".gallery").append($(`<img src="${`images/square/${element.path}`}" 
                alt="${element.title}"id="${element.path}"city="${element.city}"
                taken="${element.taken}"/>`));
            });
        },

Now I want to load a bigger image (from local disk) of existing image when mouse is hovered and show that image over it (kind of zoom in, but not zoom in over the image but load a bigger image, and append the div to body) in the body. I've tried many different versions of this

(".gallery").mouseenter(function(){
        $(this).css("gray");
        $(this).append('<div id="preview"');
        // console.log($(this).attributes);
        // $(this).append($(`<img src="${`images/medium/"${$(this).attr('id')}"`}" 
        //                     alt="${$(this).attr('title')}"/>`
        //                 ));
        $(this).append('</div>')
        
    })

I am unable to access the attributes dynamically. this. attribute remains return undefined. Something seems off here. Can you please tell, how to go about it ?

jquery ajax javascript
2 Answers

Use arrow function instead of normal fucntion.

Arrow functions do not bind their own this, instead, they inherit the one from the parent scope, which is called "lexical scoping".


(".gallery").mouseenter(() => {
        $(this).css("gray");
        $(this).append('<div id="preview"');
        // console.log($(this).attributes);
        // $(this).append($(`<img src="${`images/medium/"${$(this).attr('id')}"`}" 
        //                     alt="${$(this).attr('title')}"/>`
        //                 ));
        $(this).append('</div>')
        
    })
user_72553300

You are getting attribute of .gallery which doesn't have any id or alt your img tag has that so use .find() to get that particular image where user hover and then get attributes using .attr('yourattributename').

Demo Code :

$(document).on('mouseenter', '.gallery li', function() {
  var imgs = "<div id=preview><img src=images/medium/" + $(this).find('img').attr('id') + " alt=" + $(this).find('img').attr('alt') + "></div>";
  $(this).append(imgs)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
  <ul class="gallery">
    <li><img src="images/square/${element.path}" alt="Soemehing" id="Soemehingdd" city="${element.city}" taken="${element.taken}" />
    </li>
    <li><img src="images/square/${element.path}" alt="Soemehing2" id="Soemehingdd2" city="${element.city}" taken="${element.taken}" />
    </li>
  </ul>
</main>

user_106064000
Related