Welcome to Galpop Image Gallery
Galpop is a jQuery plugin that creates image galleries. It can be controlled with the left and right arrow keys and automatically resizes with your browser.
How to install
1. Link files
Galpop Image Gallery has a .js and a .css file in addition to the jQuery library.
<!-- Include the stylesheet --> <link type="text/css" href="css/jquery.galpop.css" rel="stylesheet" media="screen" /> <!-- Include jQuery --> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- Include the gallery plugin --> <script type="text/javascript" src="js/jquery.galpop.min.js"></script>
2. Create HTML
Create anchors that link to the pop-up image. You should add a "data-galpop-group" attribute to the anchor which will group all your images so you can use next and previous buttons.
<a href="images/image-1-large.jpg" class="galpop" data-galpop-group="gallery" title="first image"> <img src="images/image-1-tb.jpg" alt="first image thumbnail" /> </a> <a href="images/image-2-large.jpg" class="galpop" data-galpop-group="gallery" title="second image"> <img src="images/image-2-tb.jpg" alt="second image thumbnail" /> </a> <a href="images/image-3-large.jpg" class="galpop" data-galpop-group="gallery" title="third image"> <img src="images/image-3-tb.jpg" alt="third image thumbnail" /> </a> <a href="images/image-4-large.jpg" class="galpop" data-galpop-group="gallery" title="forth image"> <img src="images/image-4-tb.jpg" alt="forth image thumbnail" /> </a> <a href="images/image-5-large.jpg" class="galpop" data-galpop-group="gallery" title="fifth image"> <img src="images/image-5-tb.jpg" alt="fifth image thumbnail" /> </a>
3. Call the gallery
Initiate the plugin after the HTML markup.
$('.galpop').galpop();