Galpop is an content pop-up that can display images, HTML and iframes. It can be controlled with the left and right arrow keys and automatically resizes with your browser.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css ajax & iframe container size Mar 23, 2018
images browser prefix transforms Mar 4, 2015
js minified version May 14, 2018
.npmignore bower & npm json Dec 3, 2014
README.md version number Mar 24, 2018
ajax-content.html self-close meta tag Mar 23, 2018
bower.json version 1.0.7 Mar 23, 2018
demo.html update jquery Mar 23, 2018
package.json version 1.0.9 May 14, 2018

README.md

Galpop Image Gallery

Description: Galpop is an content pop-up that can display images, HTML and iframes. It can be controlled with the left and right arrow keys and automatically resizes with your browser.

Author: Richard Hung

More documentation and examples: http://galpop.magicmediamuse.com

Install

Install it using Bower:

$ bower install galpop

Install it using npm:

$ npm install galpop

Or download as ZIP.

Key Features

  • Resizes with your browser
  • Can use arrow keys for controls
  • Callbacks after every image is loaded
  • Backgrounds and borders can be easily changed with CSS

How to Use

Galpop has a CSS and JS file in addition to the jQuery library.

<link type="text/css" href="css/jquery.galpop.css" rel="stylesheet" media="screen" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="js/jquery.galpop.min.js"></script>

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>

Initiate the plugin after the HTML markup.

$('.galpop').galpop();