How to Create image grid view gallery and on click show description by particular image?
- by Priya jain
I am Getting stuck on j-query issue i am new to it please help me!
I have a image gallery like:
Now i want a div to be open when i click on open link and view full description of respective image.
My html code is:
<ul class="thumb-pic">
<li class="box_small">
<div class="director-detail">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
</div>
<img src="images/pic1.jpg" alt="pic">
</li>
<li class="large_box">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<img src="images/pic1.jpg" alt="pic" class="small_img">
<div class="desc">
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
<p>All Macil staff are true specialists in their chosen fields and bring a unique set of skills and expertise and a desire to work in the investigation industry. Macil aims to provide a work environment that is empowering, inspiring and motivational</p>
</div>
</li>
<li class="box_small">
<div class="director-detail">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
</div>
<img src="images/pic2.jpg" alt="pic">
</li>
<li class="large_box">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<img src="images/pic2.jpg" alt="pic" class="small_img">
<div class="desc">
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
<p>All Macil staff are true specialists in their chosen fields and bring a unique set of skills and expertise and a desire to work in the investigation industry. Macil aims to provide a work environment that is empowering, inspiring and motivational</p>
</div>
</li>
<li class="box_small">
<div class="director-detail">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
</div>
<img src="images/pic3.jpg" alt="pic">
</li>
<li class="large_box">
<div align="right"><a href="#" class="open_div">Open</a><a href="#" class="close_div">Close</a></div>
<img src="images/pic3.jpg" alt="pic" class="small_img">
<div class="desc">
<div class="director-name">David MacLeod Dip OHS</div>
<div class="director-position"> Director</div>
<p>All Macil staff are true specialists in their chosen fields and bring a unique set of skills and expertise and a desire to work in the investigation industry. Macil aims to provide a work environment that is empowering, inspiring and motivational</p>
</div>
</li>
</ul>
And Jquery code that i am using:
<script type="text/javascript">
$(function() {
$('#st-accordion').accordion({
oneOpenedItem : true
});
});
$(document).ready(function(){
$('.open_div').click(function(){
$('.large_box').show();
$(this).prev('li .box_small').hide();
});
$('.close_div').click(function(){
$('.large_box').hide();
$('.box_small').show();
});
});
</script>
I am new to jquery Please help me or give me some direction to achieve the solution.
