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-lightboxboolfalsetrue, falseUse 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-groupstringgallery-imgnoneSet a unique name for each lightbox group. Use with
im-lightbox
data-im-img-resstringmediumlow, medium, highSet the resolution for your Instagram images. Use low res for large galleries to speed page loading time.
data-im-number-of-imagesint201-20Set the number of images to fit page size or for different layouts.
data-im-marquee-speedint10000noneSet the scroll speed of the marquee in milliseconds. Defaults is 10000 (10 seconds).
data-im-show-captionboolfalsetrue, falseShow the Instagram caption on each image.
data-im-show-dateboolfalsetrue, falseShow the Instagram date on each image.
data-im-show-locationboolfalsetrue, falseShow the Instagram location on each image.
data-im-show-likesboolfalsetrue, falseShow the Instagram likes on each image.
data-im-show-filterboolfalsetrue, falseShow the Instagram filter used on each image.
data-im-show-usernameboolfalsetrue, falseShow the Instagram username on each image.
data-im-filterstringnoneAdd filter effects to spice up your images. Combine with
data-im-hover
for some cool hover effects.
data-im-hoverstringnoneUse this to add some cool hover effects. Use in conjunction with
data-im-filter
.

And there's more...

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

  • Fully Responsive
  • HTML5
  • CSS3
  • jQuery
  • Super Lightweight
  • Lightbox
  • Multiple Carousels
  • Hover Effects
  • Color Filters & effects
  • Quick & easy setup
  • Create images on the fly
  • Create personalised memes