CODEWITHSUNDEEP
jqueryhtmlcssimage
Langkiller
Langkiller

Reputation: 3457

Show a specific image on click

I am trying to get a div to show when a picture is clicked. This div should contain the clicked picture only larger. I can't get this to work though. I've tried a lot of different things and now I hope someone can help me out or give me some pointers.

First I have my html image, which is generated in a php while loop:

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>

Then I have my CSS for the div I want to be shown on click of the previous image:

#showimagediv {
    display: none;
    width: 500px;
    height: 500px;
    margin-left: 100px;
    margin-top: -300px;
    position: fixed;
    background-color: #f00;
    z-index: 6;
}

And last I have some Jquery code I tried to make:

<script>
$(document).ready(function() {
    $(\"#gallerythumbnail\").click(function( event ) {
        $(\".showimagediv\").show();
    });
});
</script>

I know I can get the address of the clicked image be using this line:

$(this).attr('src')

I don't know how to use it in a div, shown when an image is clicked

I hope someone understands what I mean and can help me in the right direction.

Upvotes: 2

Views: 25765

Answers (3)

adeneo
adeneo

Reputation: 318182

Get the source from the thumbnail and create a new image to be inserted into the DIV where you're trying to display the clicked image :

$(document).ready(function() {
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {
                      src     : this.src,
                      'class' : 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});

Upvotes: 6

Edson Horacio Junior
Edson Horacio Junior

Reputation: 3143

First of all, your CSS code #showimagediv. # stands for ID attribute. Your jQuery code uses .showimagediv. . stands for CLASS attribute.

So first thing you should decide wether that showimagediv is an ID or a DIV and than correct your CSS or your jQuery.

Than, put your img tag inside a so it becomes 'clickable'. href="#" means nothing will happen when you click it.

<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>

And change your jQuery function to this (use div.showimagediv if it is a class attribute or div#showimagediv if it is an id attribute):

$(function() {
    $("a#image").click(function() {
        $("div.showimagediv").css("display", "block");
    });
});

So when you click the image inside the link, it will change the display value from none to block. This will not toggle, it will show once and not hide again.

If you need to toggle you need to control that inside the jQuery function, like this:

$(function() {
    $("a#image").click(function() {
        var actualDivDisplay = $("div.showimagediv").css("display");
        var newDivDisplay = "";

        if (actualDivDisplay == "none") {
            newDivDisplay = "block";
        } else {
            newDivDisplay = "none";
        }

        $("div.showimagediv").css("display", newDivDisplay);
    });
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205997

Then I have my css for the div I want to be showed on click of the previous image

if it's correct what you said, previous one is the image, that means the DIV is .next() to it!

use class for your DIV in your CSS:

.showimagediv {

jQuery

$(function() { // DOM ready shorthand

    $(".gallerythumbnail").click(function() {
          $(this).next('.showimagediv').show(); // or you want .toggle() ?
    });

});

Upvotes: 1

Related Questions