You can use a lightbox to do it.
There is a simple example in this link:
http://lokeshdhakar.com/projects/lightbox2/
Answer from Jack on Stack OverflowYou can use a lightbox to do it.
There is a simple example in this link:
http://lokeshdhakar.com/projects/lightbox2/
You can use a lightbox.
It's really simple to use. Include the script tags and CSS stylesheets in your HTML file, and then simply use:
<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="Girl looking out people on beach"></a>
Videos
Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
Replace your jquery with below any try:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
I assume the images are displayed properly which you will click
Just add the onclick attribute
<img src="images/photostack.png" onclick="alert('Hello World')" alt="" />
Or use jQuery:
$( "#img" ).click(function() {
alert( "Hello World jQuery" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" src="images/photostack.png" alt="" />
Lots of ways to do this... Here is a short one inline with your html:
<img src="images/photostack.png" alt="" onclick="alert('you clicked it')" />