To create a pop up image

sir,
    I want to create a pop up image while clicking on the thumbnail image..But i am not able to get it.plshelp me.the below is my markup
<!doctype>
<html>
<head>
<title>popup</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



<style>

.large-image-bg { 
  background-color: #333; 
  filter: alpha(opacity=70); 
  left: 0; 
  opacity: 0.7; 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 1000; 
} 
.large-image-wrapper { 
  background-color: white; 
  border: 3px solid #444; 
  box-shadow: 0 0 5px #222; 
  left: 50%; 
  padding: 3px; 
  position: fixed; 
  top: 50%; 
  z-index: 1001; 
} 
.large-image-close { 
  background: transparent url("../img/popup-close-icon.png") no-repeat 0 0; 
  height: 32px; 
  position: absolute; 
  right: -16px; 
  text-indent: -9999px; 
  top: -16px; 
  width: 32px; 
}
</style>
</head>
<body>

<a href="javascript:;" class="image-popup" data-large-image="img/scooby_image.jpg" data-width="344" data-height="500"> 
  <img src="img/thumb1.jpg" alt="Scooby Doo" /> 
</a>








</body>
</html>

Open in new window

codeoxygenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Are you trying to create a lightbox? If so why not use one of the many lightbox libraries out there?

If you want to do it yourself - can you describe what you want to achieve. Your code above contains no javascript - CSS does not respond to clicks - only hover - so if you want to action a popup on click you need script.

Please describe what you want to happen when you click on the thumbnail.
0
codeoxygenAuthor Commented:
sir,i want to happen popup image while clicking on thumbnail
0
Julian HansenCommented:
Yes I understood that - what I need to know is how you want the image to look.

This article gives step by step instructions on how to create your own lightbox

http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528

Here are some lightbox libraries you can look at that do it for you

http://noelboss.github.io/featherlight/
http://fancyapps.com/fancybox/
http://lokeshdhakar.com/projects/lightbox2/

Alternatively you can Google "lightbox jQuery" for more options.

If none of the above meet your requirements then post back here and we can take it further.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prakash SamariyaIT ProfessionalCommented:
Please check with the below modified code for popup image!  

If you are new to this, I would suggest to get ready made plug-ins as suggested by Julian Hansen for the ease

You might need to work on CSS part for below sample code!
<!doctype>
<html>
<head>
<title>popup</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.large-image-bg { 
  background-color: #333; 
  filter: alpha(opacity=70); 
  left: 0; 
  opacity: 0.7; 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 1000; 
} 
.large-image-wrapper { 
  background-color: white; 
  border: 3px solid #444; 
  box-shadow: 0 0 5px #222; 
  left: 50%; 
  padding: 3px; 
  position: fixed; 
  top: 50%; 
  z-index: 1001; 
} 
.large-image-close { 
  background: transparent url("../img/popup-close-icon.png") no-repeat 0 0; 
  height: 32px; 
  position: absolute; 
  right: -16px; 
  text-indent: -9999px; 
  top: -16px; 
  width: 32px; 
}
</style>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}

.close{
float:right; top:0px;right:0px;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function(){
overlay.show();
//alert($(this).attr('data-width')); 
$('#imgShow').attr('src',$(this).attr('data-large-image'));
$('#imgShow').attr('width',$(this).attr('data-width'));
$('#imgShow').attr('height',$(this).attr('data-height'));

overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>

<div class='popup' style="display:none">
<div class='content'>
  <img id="imgShow" /> 
<a href='' class='close'>Close</a>
</div>
</div>      

<div id='container'>
<a href='' class='click' class="image-popup" data-large-image="iis-85.png" data-width="500" data-height="500">
	<img src="w-brand.png" alt="Scooby Doo" />
</a> 
<a href='' class='click' class="image-popup" data-large-image="iis-8.png" data-width="500" data-height="300">
	<img src="w-brand.png" alt="Scooby Doo" />
</a> 


</div>

</body>
</html>

Open in new window

0
Rajesh JoshiCommented:
Please try the following code.
<HTML>
<HEAD>
<TITLE>Java Popup Window Example with size, title and background colour parameters</TITLE>
<script language="JavaScript1.2" type="text/javascript">

var newwindow;
var wheight = 0, wwidth = 0;

function popitup5(url, title, iwidth, iheight, colour) {
var pwidth, pheight;

if ( !newwindow || newwindow.closed ) {
pwidth=iwidth+30;
pheight=iheight+30;
newwindow=window.open('','htmlname','width=' + pwidth +',height=' +pheight + ',resizable=1,top=50,left=10');
wheight=iheight;
wwidth=iwidth;
}

if (wheight!=iheight || wwidth!=iwidth ) {
pwidth=iwidth+30;
pheight=iheight+90;
// The resizeTo needs Javascript 1.2 or higher so the Script should also specify language="JavaScript1.2" 
if (window.resizeTo) newwindow.resizeTo(pwidth, pheight);
wheight=iheight;
wwidth=iwidth;
}

newwindow.document.clear();
newwindow.focus();
newwindow.document.writeln('<html> <head> <title>' + title + '<\/title> <\/head> <body bgcolor= \"' + colour + '\"> <center>');
newwindow.document.writeln('<img src=' + url + ' title=\"' + title + '\" alt=\"' + title + '\" >');
newwindow.document.writeln('<\/center> <\/body> <\/html>');
newwindow.document.close();
newwindow.focus();
}

// Routines to tidy up popup windows when page is left
// Call with an onUnload="tidy5()" in body tag

function tidy5() {
if (newwindow && !newwindow.closed) { newwindow.close(); }
}

// Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->
</script>

</HEAD>
<BODY onUnload="tidy5()" >

<A HREF="javascript:popitup5('http://www.pcurtis.com/gallery/dv17a72w.jpg','Temple of Heavenly Bliss', 384, 288,'white')"><IMG SRC="http://www.pcurtis.com/gallery/dv17a72i.jpg" WIDTH="160" BORDER="0" HEIGHT="120" HSPACE="10" VSPACE="5" ALT="Temple of Heavenly Bliss" TITLE="Temple of Heavenly Bliss" ALIGN=left></A>

</BODY>
</HTML>

Open in new window

It is nicely given at http://www.pcurtis.com/popup_advanced.htm with examples.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.