How to pass specific list element to Javascript function

Question

On my web page, I have a list of images. Currently, when the user hovers their mouse over any image for 3 seconds, a showUpdateImageDialog() method executes which causes a jQuery dialog to pop up. If the user moves their mouse away from the image at any point during the 3 seconds, the timer is reset and the jQuery dialog never displays:

HTML:

<ul class="imageGroup">
    <li class="imageLi">
        <img class="image" src="fizz/buzz/blah.jpg"/>
    </li>
    <li class="imageLi">
        <img class="image" src="fizz/buzz/example.jpg"/>
    </li>
    ...
</ul>

<div id="edit-image-description-frame" title="Update Image Description">
    <div id="thumbnail-dialog-image-container">

        <!-- How do I get the 'src' attribute to be the correct image file? -->
        <img src="???"/>
    </div>

</div>

JS:

$(".imageLi").live({
    mouseenter:
        function()
        {
            window.myTimeout = setTimeout(showUpdateImageDialog,3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog()
{
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

Unfortunately, this code behaves the same regardless of which image in the list the user is hovering over. I need a way for the jQuery dialog to display the specific image that the user is hovering over:

How can I pass the image's source to jQuery so that I can have the dialog present this image back to the user? This may seem strange, but the dialog will allow the user to edit metadata about the image and update that metadata. Because of other constraints, I need to use the image's src attribute to look up the metadata. Thanks in advance!

.live() is deprecated. You should use .on().

slowpoison
– slowpoison

2012-04-23 21:09:37 +00:00
Commented Apr 23, 2012 at 21:09 — slowpoison
– slowpoison, Commented Apr 23, 2012 at 21:09

Matt Ball · Accepted Answer · 2012-04-23 21:07:25Z

3

$(".imageLi").live({
    mouseenter: function()
    {
        var src = $(this).children('img')[0].src;
        window.myTimeout = setTimeout(function ()
        {
            showUpdateImageDialog(src);
        },3000);
    },
    mouseleave: function()
    {
        clearTimeout(window.myTimeout);
    }
});

function showUpdateImageDialog(src)
{
    $('#thumbnail-dialog-image-container').children('img')[0].src = src;

    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidth:500
    });
}

answered Apr 23, 2012 at 21:07

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

4 Comments

Matt Ball Over a year ago

You might want to think about using an existing lightbox plugin, at this point.

Jamie Treworgy Over a year ago

What I was going for but you were faster :) +1

IAmYourFaja Over a year ago

Thanks for the quick response! I'm confused as to why you are indexing the element's children ([0]) - wouldn't your code sample only work for the first image in the list? I need this functionality for any list element! Thanks again!

Matt Ball Over a year ago

@AdamTannon because you're selecting the <li> elements, and each <li> only has one <img> ...right?

Gabriele Petrioli · Accepted Answer · 2012-04-23 21:08:45Z

0

Pass it as a parameter to your function

$(".imageLi").live({
    mouseenter:
        function()
        {
            var element = $(this).find('img');
            window.myTimeout = setTimeout(function(){showUpdateImageDialog(element);},3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog(image)
{
   // do what you want with image variable
   // it refers to the img element inside the li that was hovered
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

answered Apr 23, 2012 at 21:08

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Collectives™ on Stack Overflow

How to pass specific list element to Javascript function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related