Examples

Single Image

Just bind galpop to the anchor link.

An apocalyptic Earth.

<a class="galpop-single" href="./images/gallery/large/apocalypse.jpg">
	<img src="./images/gallery/thumbs/apocalypse.jpg" alt="An apocalyptic Earth." />
</a>
$('.galpop-single').galpop();

Multiple Images

Bind a series of images with the same "data-galpop-group" attribute value.

An apocalyptic Earth.An old, vintage poster.A scene of a magical forest.An underwater scene with lots of tension.A dog and his pet.A scene where nothing is what it seems.Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.A portrait of a wolf marine.The scene from Alice in Wonderland where she meets the caterpillar.A magical poster with a reflection. 

<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/apocalypse.jpg">
	<img src="./images/gallery/thumbs/apocalypse.jpg" alt="An apocalyptic Earth." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/vintage.jpg">
	<img src="./images/gallery/thumbs/vintage.jpg" alt="An old, vintage poster." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/magicLake.jpg">
	<img src="./images/gallery/thumbs/magicLake.jpg" alt="A scene of a magical forest." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/underwater.jpg">
	<img src="./images/gallery/thumbs/underwater.jpg" alt="An underwater scene with lots of tension." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/goodBoy.jpg">
	<img src="./images/gallery/thumbs/goodBoy.jpg" alt="A dog and his pet." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/darkroad.jpg">
	<img src="./images/gallery/thumbs/darkroad.jpg" alt="A scene where nothing is what it seems." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/roadkill.jpg">
	<img src="./images/gallery/thumbs/roadkill.jpg" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/wolfMarine.jpg">
	<img src="./images/gallery/thumbs/wolfMarine.jpg" alt="A portrait of a wolf marine." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/alice.jpg">
	<img src="./images/gallery/thumbs/alice.jpg" alt="The scene from Alice in Wonderland where she meets the caterpillar." />
</a>
<a class="galpop-multiple" data-galpop-group="multiple" href="./images/gallery/large/reflection.jpg">
	<img src="./images/gallery/thumbs/reflection.jpg" alt="A magical poster with a reflection." />
</a>
$('.galpop-multiple').galpop();

Image Info

Galpop has a box on the lower left corner for captions. If the anchor contains a "title" attribute, that will be added to the box. If the anchor contains a "data-galpop-link" attribute, it will add an anchor to the box. Adding a "data-galpop-link-title" attribute will change the text of the anchor, and adding a "data-galpop-link-target" attribute will change the target of the anchor.

An apocalyptic Earth.An old, vintage poster.A scene of a magical forest.An underwater scene with lots of tension.A dog and his pet.A scene where nothing is what it seems.Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.A portrait of a wolf marine.The scene from Alice in Wonderland where she meets the caterpillar.A magical poster with a reflection. 

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/apocalypse" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An apocalyptic Earth." href="./images/gallery/large/apocalypse.jpg">
	<img src="./images/gallery/thumbs/apocalypse.jpg" alt="An apocalyptic Earth." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/vintage" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An old, vintage poster." href="./images/gallery/large/vintage.jpg">
	<img src="./images/gallery/thumbs/vintage.jpg" alt="An old, vintage poster." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/magicLake" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A scene of a magical forest." href="./images/gallery/large/magicLake.jpg">
	<img src="./images/gallery/thumbs/magicLake.jpg" alt="A scene of a magical forest." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/underwater" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="An underwater scene with lots of tension." href="./images/gallery/large/underwater.jpg">
	<img src="./images/gallery/thumbs/underwater.jpg" alt="An underwater scene with lots of tension." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/goodBoy" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A dog and his pet." href="./images/gallery/large/goodBoy.jpg">
	<img src="./images/gallery/thumbs/goodBoy.jpg" alt="A dog and his pet." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/darkroad" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A scene where nothing is what it seems." href="./images/gallery/large/darkroad.jpg">
	<img src="./images/gallery/thumbs/darkroad.jpg" alt="A scene where nothing is what it seems." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/roadkill" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." href="./images/gallery/large/roadkill.jpg">
	<img src="./images/gallery/thumbs/roadkill.jpg" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/wolfMarine" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A portrait of a wolf marine." href="./images/gallery/large/wolfMarine.jpg">
	<img src="./images/gallery/thumbs/wolfMarine.jpg" alt="A portrait of a wolf marine." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/alice" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="The scene from Alice in Wonderland where she meets the caterpillar." href="./images/gallery/large/alice.jpg">
	<img src="./images/gallery/thumbs/alice.jpg" alt="The scene from Alice in Wonderland where she meets the caterpillar." />
</a>

<a class="galpop-info" data-galpop-group="info" data-galpop-link="http://www.magicmediamuse.com/graphic/reflection" data-galpop-link-title="Click Here For More Info" data-galpop-link-target="_blank" title="A magical poster with a reflection." href="./images/gallery/large/reflection.jpg">
	<img src="./images/gallery/thumbs/reflection.jpg" alt="A magical poster with a reflection." />
</a>

$('.galpop-info').galpop();

Callbacks

You can add a callback function to fire after every completion of an image. You can grab the index and count from the "#galpop-wrapper" element.

An apocalyptic Earth.An old, vintage poster.A scene of a magical forest.An underwater scene with lots of tension.A dog and his pet.A scene where nothing is what it seems.Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.A portrait of a wolf marine.The scene from Alice in Wonderland where she meets the caterpillar.A magical poster with a reflection. 

<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/apocalypse.jpg">
	<img src="./images/gallery/thumbs/apocalypse.jpg" alt="An apocalyptic Earth." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/vintage.jpg">
	<img src="./images/gallery/thumbs/vintage.jpg" alt="An old, vintage poster." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/magicLake.jpg">
	<img src="./images/gallery/thumbs/magicLake.jpg" alt="A scene of a magical forest." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/underwater.jpg">
	<img src="./images/gallery/thumbs/underwater.jpg" alt="An underwater scene with lots of tension." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/goodBoy.jpg">
	<img src="./images/gallery/thumbs/goodBoy.jpg" alt="A dog and his pet." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/darkroad.jpg">
	<img src="./images/gallery/thumbs/darkroad.jpg" alt="A scene where nothing is what it seems." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/roadkill.jpg">
	<img src="./images/gallery/thumbs/roadkill.jpg" alt="Either an anti-hunting poster or a pro-hunting one, depending on how you look at it." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/wolfMarine.jpg">
	<img src="./images/gallery/thumbs/wolfMarine.jpg" alt="A portrait of a wolf marine." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/alice.jpg">
	<img src="./images/gallery/thumbs/alice.jpg" alt="The scene from Alice in Wonderland where she meets the caterpillar." />
</a>
<a class="galpop-callback" data-galpop-group="callback" href="./images/gallery/large/reflection.jpg">
	<img src="./images/gallery/thumbs/reflection.jpg" alt="A magical poster with a reflection." />
</a>

var callback = function() {
	var wrapper = $('#galpop-wrapper');
	var info    = $('#galpop-info');
	var count   = wrapper.data('count');
	var index   = wrapper.data('index');
	var current = index + 1;
	var string  = 'Image '+ current +' of '+ count;

	info.append('<p>'+ string +'</p>').fadeIn();

};
$('.galpop-callback').galpop({
	callback: callback
});

Manual Open

You can also manually open the popup whenever you wish. You will have to use the "openBox" method and pass it the settings and image URL to open.

<select class="manual-open">
<option value="">Choose Image</option>
<option value="./images/gallery/large/apocalypse.jpg">An apocalyptic Earth.</option>
<option value="./images/gallery/large/vintage.jpg">An old, vintage poster.</option>
<option value="./images/gallery/large/magicLake.jpg">A scene of a magical forest.</option>
<option value="./images/gallery/large/underwater.jpg">An underwater scene with lots of tension.</option>
<option value="./images/gallery/large/goodBoy.jpg">A dog and his pet.</option>
<option value="./images/gallery/large/darkroad.jpg">A scene where nothing is what it seems.</option>
<option value="./images/gallery/large/roadkill.jpg">Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.</option>
<option value="./images/gallery/large/wolfMarine.jpg">A portrait of a wolf marine.</option>
<option value="./images/gallery/large/alice.jpg">The scene from Alice in Wonderland where she meets the caterpillar.</option>
<option value="./images/gallery/large/reflection.jpg">A magical poster with a reflection.</option>
</select>

$('.manual-click').click(function(e) {
	var settings = {};
	$.fn.galpop('openBox',settings,'/images/gallery/large/magicLake.jpg');
});

Manual Open Group

You can also manually open the popup as a group. Instead of passing it one url, you can use an array.

<select class="manual-open">
<option value="">Choose Image</option>
<option value="0">An apocalyptic Earth.</option>
<option value="1">An old, vintage poster.</option>
<option value="2">A scene of a magical forest.</option>
<option value="3">An underwater scene with lots of tension.</option>
<option value="4">A dog and his pet.</option>
<option value="5">A scene where nothing is what it seems.</option>
<option value="6">Either an anti-hunting poster or a pro-hunting one, depending on how you look at it.</option>
<option value="7">A portrait of a wolf marine.</option>
<option value="8">The scene from Alice in Wonderland where she meets the caterpillar.</option>
<option value="9">A magical poster with a reflection.</option>
</select>

$('.manual-open-group').change(function(e) {
	var v = $(this).val();
	var images = [
		'images/gallery/large/apocalypse.jpg',
		'images/gallery/large/vintage.jpg',
		'images/gallery/large/magicLake.jpg',
		'images/gallery/large/underwater.jpg',
		'images/gallery/large/goodBoy.jpg',
		'images/gallery/large/darkroad.jpg',
		'images/gallery/large/roadkill.jpg',
		'images/gallery/large/wolfMarine.jpg',
		'images/gallery/large/alice.jpg',
		'images/gallery/large/reflection.jpg',
	];
	var settings = {};
	$.fn.galpop('openBox',settings,images,v);
});

Load iframe

In addition to images, you can also load an iframe into the popup.

Click here to open iframe

<a href="ajax-content.html" class="click-open-iframe">Click here to open iframe</a>

$('.click-open-iframe').galpop({
	contentType: 'iframe',
});

Load AJAX

If you don't want to load the entire window into an iframe, you can pick specific elements to load.

Click here to open ajax

<a href="ajax-content.html" data-galpop-container=".text-content" class="click-open-ajax">Click here to open ajax</a>

$('.click-open-ajax').galpop({
	contentType: 'AJAX',
});