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.

How To Create Popup Image & Photo Gallery With jQuery

Senin, 14 Oktober 2013