{tocify} $title={Table of Contents}
This time we will discuss about how to create a popup image. Usually these web applications are widely used on the web e-commercial, photography and web image gallery. Popup Image and Photo images are images that will display a larger size if one of its thumbnail image is clicked.
Between <head> and </head>
Put the script below beetween <head> and </head> of your website :<link rel="stylesheet" type="text/css" href="css/twd-base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>This jQuery script is used to enable Jquery Lightbox with a target ID # gallery<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>Between <body> and </body>
<section>
<div id="gallery">
<ul>
<li>
<a href="photo/1.jpg" title="Satu">
<img src="photo/thumb/1.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/2.jpg" title="Dua">
<img src="photo/thumb/2.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/3.jpg" title="Tiga">
<img src="photo/thumb/3.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery"/>
</a>
</li>
<li>
<a href="photo/4.jpg" title="Empat">
<img src="photo/thumb/4.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/5.jpg" title="Lima">
<img src="photo/thumb/5.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/6.jpg" title="Lima">
<img src="photo/thumb/6.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/7.jpg" title="Lima">
<img src="photo/thumb/7.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
<li>
<a href="photo/8.jpg" title="Lima">
<img src="photo/thumb/8.jpg" alt="How To Create Popup Image & Photo Gallery With jQuery" />
</a>
</li>
</ul>
</div>
</section>Code CSS (css / style.css)
To beautify the appearance of the early use following css code, whereas for lightbox popup does not need to be changed, unless desired and needed.body{background:url('../images/white_carbonfiber.png');}
section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}Download the source code to learn more fully how the placement of its files.DownloadIt's finished for this tutorial
Hopefully can help and understand.
Good luck to you.