An underwater scene with lots of tension.

Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.

The scene from Alice in Wonderland where she meets the caterpillar.

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();