CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Randy Geily
Randy Geily

Reputation: 139

Jquery get the image element ID from a group of images in a div

I've a simple issue, I cant find a way out. Im doing a small, simple slider/gallery 1) "If click button 1, image one appears" 2) "If I click on button 2, IMAGE 1, slide left, and IMAGE 2 fades in" 3) "If I click on any image, eg IMAGE 3, the current image slide left, new one fades in"

My only issue is, how do I get the ID of the visible image, the one that is already showing. so that i can slide it, and fades in the image with respect to the button clicked.

All the images are css "display none" by default and resides in the ".slider" div.

<body>
<div class = "slider">
    <img id="1" src = "img/img1.jpg" class = "pic" border = "0" />
    <img id="2" src = "img/img2.jpg" class = "pic" border = "0" />
    <img id="3" src = "img/img3.jpg" class = "pic" border = "0" />
</div>

<button type="button" class="btn" id="btn1">Btn 1</button>
<button type="button" class="btn" id="btn2">Btn 2</button>
<button type="button" class="btn" id="btn3">Btn 3</button>
</body>



<style type = "text/css">

.slider{
width:400px;
height:200px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:400px;
height:200px;
    display:none;
}
</style>    

<script>
$(document).ready(function(){

    $(".btn").click(function() {
                    //alert($(".slider").children('.pic').attr('id'));
                    // or using (":visible:);
            )};
)};
</script>

Upvotes: 2

Views: 2161

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the :visible selector to get the visible image

var $imgvisible = $('.slider img:visible');
alert($imgvisible.attr('id'))

But when the page loads it won't return anything because there are no visible images

Demo: Fiddle

Upvotes: 1

Related Questions