CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kevin
Kevin

Reputation: 15

Jquery: show IMG on click

Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co

As in the video, I have to click on the img to get a large view of the img under it.

So far this is my code:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>

<body>
<center>

<div id="wrapper">

<div id="nav">
    <div id="overbalk"></div>
    <img src="images/foto_01.png" align="top" class="foto" />
    <img src="images/foto_02.png" align="top" class="foto" />
    <img src="images/foto_03.png" align="top" class="foto" />
    <img src="images/foto_04.png" align="top" class="foto" />
</div>

<div id="content">
    <img src="images/foto_01.png" align="top" class="slide_foto" />
</div>

</div>

</center>
</body>
</html>

CSS:

<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top:  -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>

JS:

$(document).ready(function (){
    $('.foto').mouseenter(function () {
        $(this).animate({marginTop: '+=50'}, 200);
    });
    $('.foto').mouseleave(function (){
        $(this).animate({marginTop: '-=50'}, 200);
    });
    $('.foto').click(function () {
        $(this).next('#content').show();
    });
});

I also tried this:

$('.foto').on('click', function () {
    $('#content').html(nieuwe_foto).show();
    var nieuwe_foto = $(this).attr('src');
    $('.slide_foto').attr('src', nieuwe_foto);
}

None of this worked, and got a little bit stuck, the images aren't showing below the small images.

Upvotes: 0

Views: 1179

Answers (2)

Sachin
Sachin

Reputation: 978

You need to make 2 changes:

  1. Remove this style class from <style>

    .slide_foto {
    margin-left:-3200px;
}

  2. Make this change in your onclick handler

    $('.foto').on('click', function () {
    var nieuwe_foto = $(this).prop('src');
    $('.slide_foto').prop('src', nieuwe_foto);
});

I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/

The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.

$('#content').html(nieuwe_foto).show();

Upvotes: 1

Jordan Shurmer
Jordan Shurmer

Reputation: 1056

The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.

You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.

Upvotes: 0

Related Questions