Picture Viewer Javascript

Question

HTML

<div id="portfolio_content">
<h4 class="titles">Portfolio</h4>

   //Pictures//

<img class="myImg" src="images/cabinconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/aloneconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/woodsconcept.jpg" width="40" height="300" />
</div>

JAVASCRIPT

<script>
$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(this).width('60%');
    $(this).height('60%');

}
else {
    $(this).width(40);
    $(this).height(300);
}
})
</script>

I want to make my images to open up when someone is clicking on them, but my problem is that if i click on more than one picture the other one stays open, I tried different ways and nothing worked for me, do you have any idea how can I solve this problem? I want to make the previously opened picture to close when a new one is clicked.

Answer 1

You can set width and height of all .myImg back to original dimensions and only increase the dimension of clicked image:

$('.myImg').click(function() {
    $('.myImg').width(40);
    $('.myImg').height(300);
    $(this).width('60%');
    $(this).height('60%');
});

Answer 2

edit your current js to

$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(".myImg").height(300);
    $(".myImg").width(40);
    $(this).width('60%');
    $(this).height('60%');
}
else {
    $(this).width(40);
    $(this).height(300);
}
})

this will first make all images with the class myImg smaller and then open the one you clicked up