CODEWITHSUNDEEP
jquerycss
Adam Brown
Adam Brown

Reputation: 2870

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

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>

Upvotes: 2

Views: 1169

Answers (1)

Josh Beam
Josh Beam

Reputation: 19792

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.

Upvotes: 2

Related Questions