Question posted in
You can find the official documentation here.

Show a different image (bigger version) on mouse hover – Jquery ajax

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 ?

Tags:

2

Answers


  1. 0

    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>')
        
    })
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search