How To Create Popup Image & Photo Gallery With jQuery

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.
Open a web editor and let's start practicing to create a popup image and the photo gallery. Here are some of the script :

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.
Download
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.

1 Comments

  1. Thank you for taking the time to publish this information very useful.

    ReplyDelete
Previous Post Next Post