I have a list of thumbnail images into a hrefs that link to the full size image. I would like to add a close button to the full size image. I was thinking of using an iframe for that. Would that do or can you think of another way of doing that?
Thanks a lot!
HTML
<div class="finishing-touches-contempovertical">
<a id="thumb" class="thumb1" href="images/image.jpg">
<img src="images/image-thumbnail.jpg"/>
</a>
</div>
CSS
a.thumb1 {
position: relative;
float: none;
margin: 20px 10px 10px 660px;
display: block;
width: 75px;
}
Fiddle:
Use popup and jquery
<style>
#popup{
display: none;
position: fixed;
z-index: 1000;
/* your styles */
}
</style>
<div class="finishing-touches-contempovertical">
<a id="thumb" class="thumb1" href="images/image.jpg">
<img src="images/image-thumbnail.jpg"/>
</a>
</div>
<div id="popup">
<img src="" />
<div class="close_popup">X</div>
</div>
<script>
$('a.thumb1').on('click',function(){ // when press link
var fullImg = $(this).attr('href') // get full size img url
$('#popup img').attr('src', fullImg) // image in popup now has source that you need
$('#popup').show() // popup appears
return false // do not redirect
})
$('.close_popup').on('click', function(){
$('#popup').hide() // close popup
})
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.