Image Click Event

Question

In my program I used image pop up window. some what images scrolling in home page.

While I click on the image in the sense the pop up will open and show the particular image in popup windows. How I can show the image in pop up window. Now I got the pop up window but I can't show the image in the popup window.

Here is my code so far:

$("img").click(function(){
 var $dialog = $('<div></div>') 
 .html(' <img src="localhost:81/keprandemo/media/catalog/product/cache/1/...; width="200" height="200" alt="Milk(1 lit)">') 
 .dialog({ autoOpen: true, resizable: false, draggable: false, width: 600, height:600, modal: true, title: 'Create Your Own PopUp Window' }); }); 

• vijaykumar: You should pass the img src to pop window.
• Rakesh Shetty: without code nobody can help you
• user762330: Show some code and a jsfiddle if you can.
• Prem Anandh: $("img").click(function(){ var $dialog = $('<div></div>') .html(' <img src="localhost:81/keprandemo/media/catalog/product/cache/1/…" width="200" height="200" alt="Milk(1 lit)">') .dialog({ autoOpen: true, resizable: false, draggable: false, width: 600, height:600, modal: true, title: 'Create Your Own PopUp Window' }); }); </script>
• Prem Anandh: i pass the img src directly but i want dynamically. which image i choose that image url i want to get and display in jquery

Answer 1

var ImageSource="";
$('.yourImageClass').click(function(){
 ImageSource=$(this).attr('src');
});

//Pass this ImageSource to your image window

EDIT:

$("img").click(function(){
 var source=$(this).attr('src');
 var $dialog = $('<div></div>') 
 .html('<img src="'+source+'" width="200" height="200" alt="Milk(1 lit)">') 
 .dialog({ autoOpen: true, resizable: false, draggable: false, width: 600, height:600, modal: true, title: 'Create Your Own PopUp Window' }); 
}); 

This code should do the trick.!

• Prem Anandh: but i have 10 images each image id is same.
• writeToBhuwan: You are going against the rule of HTML.. A page should have unique element ID's.
• writeToBhuwan: you have to fetch the elements by class, not by ID. Assign the same class "yourImageClass" to every element and run the above code
• Prem Anandh: another one problem. <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170) ?>" width="151" height="140" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /> <span class="productname"> <!-- kepran changes removed product redirect url --> <a href="<?php echo $this->getUrl($_product->getUrlPath())?>" > <?php echo $_product->getName(); ?></a> </span>
• Prem Anandh: if once i click the image i get the image source. at the same time i want to get the image name and the price

Answer 2

 $("img").click(function(){
 var $dialog = $('<div id="urID"></div>') 
 .dialog({ autoOpen: true, resizable: false, draggable: false, width: 600, height:600, modal: true, title: 'Create Your Own PopUp Window' });
 //ur div id name.
 $('#urID').html('<img src="localhost:81/keprandemo/media/catalog/product/cache/1/...; width="200" height="200" alt="Milk(1 lit)">');
 });