Instamagic Marquee

Use the scrolling marquee to add an interesting effect to your gallery. Combine with filter & hover effects to really make your photos pop.

Basic Setup

<div class="im-marquee"
     data-im-marquee-speed = "25000"
     data-im-marquee-items = "6"
     data-im-number-of-images =	"6"
     data-im-tags = "{animals}">
</div>

Start by adding the
```
im-marquee
```
class to a div. There are only a couple of properties unique to the marquee. First is the
```
data-im-marquee-speed
```
property: The time it takes to do a full revolution of the marquee. Measured in milliseconds. The second property is
```
data-im-marquee-items
```
. This defines the number of images shown at any one time in the marquee.

Everything else has default settings (check out the options at the bottom of the page).

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

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

data-im-marquee-speed = "10000"
data-im-marquee-items = "4"
data-im-lightbox-group = "marquee-1-gallery"
data-im-filter = "blend-pink-yellow-light"
data-im-hover = "zoom-out"

data-im-marquee-speed = "12000"
data-im-marquee-items = "4"
data-im-lightbox-group = "marquee-2-gallery"
data-im-filter = "tiltshift" 
data-im-hover = "zoom-in"

If you really wanted to, you could probably do some pretty crazy stuff.

But perhaps it is not the most constructive use of ones time. However fun it may be.

Options:

Data property	Type	Default	Options	Description
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-marquee-speed	int	10000	none	Set the scroll speed of the marquee in milliseconds. Defaults is 10000 (10 seconds).
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 Marquee

Use the scrolling marquee to add an interesting effect to your gallery. Combine with filter & hover effects to really make your photos pop.

Basic Setup

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

If you really wanted to, you could probably do some pretty crazy stuff.

Options:

And there's more...

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