Instamagic Gallery

Instamagic Gallery lets you quickly and easily add multiple galleries to one page with a single line of code. Add lightbox features, hover effects, filters and your Instagram likes, follows, tags, titles and more...

Basic Setup

<div class="im-gallery" 
    data-im-tags = "landscape"
    data-im-number-of-images = "8" 
    data-im-cols = "4" 
    data-im-lightbox = "true" 
    data-im-img-res = "medium">
</div>

First of all, add the
```
im-gallery
```
class to a div to define it as a gallery. The only other thing you need to do to get it working is set the
```
data-im-tags
```
property. You can have as many tags as you like, just seperate them with commas like so:
```
data-im-tags="landscape, animals, people"
```
or pass in a JSON object:
```
data-im-tags="{landscape, animals, people}"
```
.

Everything else has default settings (check out the options at the bottom of the page). Arrange your gallery however you like by first setting
```
data-im-number-of-images
```
, and then the number of columns:
```
data-im-cols
```
.

Instagram serves up its images in 3 resolutions, i.e., low, medium and high. Set this with the
```
data-im-img-res
```
property. The default is medium. You can add each gallery to its own lightbox group. Or have one group for all galleries. You can read more about the lightbox here.

Multiple galleries with lightbox groups, filter effects and hover effects:

data-im-lightbox-group = "landscape-gallery"
data-im-filter = "blend-pink-yellow-light"
data-im-hover = "zoom-out"

data-im-lightbox-group = "animals-gallery"
data-im-filter = "blend-blue-light"
data-im-hover = "zoom-out-flip-horiz"

data-im-lightbox-group = "people-gallery"
data-im-filter = "blend-red-blue-dark"
data-im-hover = "fold-up"

data-im-lightbox-group = "food-gallery"
data-im-filter = "hinge-down"
data-im-hover = "moon"

Similar to the basic example, we start off with a
```
im-gallery
```
class and the number of images and columns. The only difference here is that we define a lightbox group name for each different gallery like so:
```
data-im-lightbox-group = "landscape-gallery"
```
. This means we'll only see images from this gallery in this lightbox.

Next, we set a filter type: (check out the effects page for more info on filters)
```
data-im-filter = "blend-pink-yellow-light"
```
. And to jazz things up a little, why not add a nifty little hover effect? Check out the demo page for hover effects here. Set it by adding the
```
data-im-hover
```
property.

Adding your Instagram data:

<div class="im-gallery" 
    data-im-tags = "landscape"
    data-im-number-of-images = "3" 
    data-im-cols = "3" 
    data-im-lightbox = "false" 
    data-im-show-caption = "true"
    data-im-show-likes = "true"
    data-im-show-date = "true"
    data-im-show-location = "true"
    data-im-show-username = "true"
    data-im-show-tags = "true"
    data-im-hover = "reveal-up"
    data-im-img-res = "medium">
</div>

To display your Instagram data with each image you will need to use the
```
data-im-hover
```
property. Then, adding your Instagram data to your images is easy. Just add a data attribute followed by the piece of data you want, like this:
```
data-im-show-caption = "true".
```
Just change
```
caption
```
for any of the following:
```
date, location, comments
```
and many more. Check out the options below for more.

Options:

Data property	Type	Default	Options	Description
data-im-cols	int	6	1-12	Use this to set the number of columns in a gallery. Use in conjunction with im-number-of-images to arrange your galleries in grids.
data-im-lightbox	bool	false	true, false	Use this if you want your Instagram images in a popup lightbox. Use with im-lightbox-group to group images in to different lightboxes.
data-im-lightbox-group	string	gallery-img	none	Set a unique name for each lightbox group. Use with im-lightbox
data-im-img-res	string	medium	low, medium, high	Set the resolution for your Instagram images. Use low res for large galleries to speed page loading time.
data-im-number-of-images	int	20	1-20	Set the number of images to fit page size or for different layouts.
data-im-show-caption	bool	false	true, false	Show the Instagram caption on each image.
data-im-show-date	bool	false	true, false	Show the Instagram date on each image.
data-im-show-location	bool	false	true, false	Show the Instagram location on each image.
data-im-show-likes	bool	false	true, false	Show the Instagram likes on each image.
data-im-show-filter	bool	false	true, false	Show the Instagram filter used on each image.
data-im-show-username	bool	false	true, false	Show the Instagram username on each image.
data-im-filter	string	none		Add filter effects to spice up your images. Combine with data-im-hover for some cool hover effects.
data-im-hover	string	none		Use this to add some cool hover effects. Use in conjunction with data-im-filter .

Instamagic Gallery

Instamagic Gallery lets you quickly and easily add multiple galleries to one page with a single line of code. Add lightbox features, hover effects, filters and your Instagram likes, follows, tags, titles and more...

Basic Setup

Multiple galleries with lightbox groups, filter effects and hover effects:

Adding your Instagram data:

Options:

And there's more...

Check out even more cool demos and tutorials with tons of more features