Get element id or class when clicked and use in JQuery statement

Question

I have an thumbnail image gallery organised into masonry style columns using Packery.

I am trying to make it so that if you click an image all of them fade out and a div showing a larger version of the same image and information about it appears.

So far I have made it so that when any of the images in this gallery is clicked all of them are hidden by JQuery and then a div which is set to display:none become visible.

How can I get the id or class of the image that is clicked, and then echo it into another statement, so that I can make visible the respective content?

I know I can do this with a stream of individual JQuery statements however I'm sure there is a way to do it like this that I'm not aware of.

My JQuery so far.

$( "#galeria .item" ).click(function() {
        $( "#galeria" ).fadeOut( 1000, function() {
            $( "#nuevoContenido" ).fadeIn( 1000 );
        });
    });
    $( "#nuevoContenido .lrg-item" ).click(function() {
        $( "#nuevoContenido" ).fadeOut( 1000, function() {
            $( "#galeria" ).fadeIn( 1000 );
        });
    });

Html

<div id="galeria" class="container col-md-10 col-md-offset-1 text-center">
            <a hre="#"><img class="item" src="img/editorial/revistamexico1.jpg"></a>
            .....
            <a hre="#"><img class="item" src="img/hechoamano/silla_todo.jpg"></a>

        </div>
        <div id="nuevoContenido" class="container">
            <div class="col-md-6">
                <a hre="#"><img class="img-responsive lrg-item" src="img/hechoamano/silla_todo.jpg"></a>
            </div>
            <div class="col-md-6 text-left">
                <h1>This</h1>
                <p>This this</p>
                <a href="#" class="btn btn-lg btn-success lrg-item">Regresa a Galeria</a>
            </div>
        </div>

Try the solution here: http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery — jpatiaga, Dec 26 '13 at 22:28
possible duplicate of [How to build simple jQuery image slider with sliding or opacity effect?](http://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect) — CRABOLO, Dec 26 '13 at 22:29
Hi Thanks very much for your comments, I can now get the ID, but how do echo that into the fadeIn statement? — Adam Brown, Dec 27 '13 at 00:22

Josh Beam · Accepted Answer · 2013-12-27T01:16:09.277

Because all of your elements with class ".item" are images, perhaps you can change the innerHTML of the #nuevoContenido div to show a copy of that image? This could potentially be a bit hard on the client and sever, though.

Edit: I didn't notice the elements that you already had inside #nuevoContendio. I've updated the code below to reflect another possibility, which also uses HTML5 data-* attribute:

<!-- data attributes are added to each img element, containing the image's title and description -->
<div id="galeria" class="container col-md-10 col-md-offset-1 text-center">
    <a hre="#"><img class="item" src="img/editorial/revistamexico1.jpg" data-title="Here is the title of this image" data-description="Here is a description of this image"></a>
        .....
    <a hre="#"><img class="item" src="img/hechoamano/silla_todo.jpg" data-title="Another title!!" data-description="another description"></a>

</div>


//the image's src, data-title, and data-description will be passed to the function
$( "#galeria .item" ).click(function() {
    var src = $(this).attr('src'),
        title = $(this).attr('data-title'),
        desc = $(this).attr('data-description');

    $( "#galeria" ).fadeOut( 1000, function() {
        $( "#nuevoContenido" ).fadeIn( 1000 )
        .children('img-responsive lrg-item').attr('src',src);

        $( "#nuevoContenido h1" ).html(title);
        $( "#nuevoContenido p" ).html(desc);
    });
});

This will change the src attribute of the image that is currently in #nuevoContenido and then update the H1 and P respectively to hold the image's title and description.

Thats really cool! It works a charm but like this I wont be able to load individual content related to the image — Adam Brown, Dec 27 '13 at 00:57
I've updated the code to reflect another possibility using HTML data-* attribute. — Josh Beam, Dec 27 '13 at 01:16
This is fantastic, thank you very much. I've been struggling with this all day! The line `.children('img-responsive lrg-item').attr('src',src);` isn't inserting though. I've tried using a similar syntax to the other two lines. I'm going to research this is the docs — Adam Brown, Dec 27 '13 at 01:42
I changed it to `$('#nuevoContenido img').attr('src',src);` becuase there will only be one image in that div. Thanks again — Adam Brown, Dec 27 '13 at 01:51

Get element id or class when clicked and use in JQuery statement

1 Answers1