Create your own unique memes from your Instagram images.
Basic Setup
data-im-meme-text-top = "Holy Instamagic..."
data-im-meme-text-bottom = "Calm Down Robin..."
data-im-meme-text-top = "Instamagic."
data-im-meme-text-bottom = "I use it for..."
data-im-meme-text-top = "Instamagic!!!"
data-im-meme-text-bottom = "Ahhhmazing!"
Getting started with Instamgic Create is really simple. First add the
im-create
class to a div.
The default
width
and
height
is set to 300x300px. But you probably have some specific sizes in mind.
This is easy. Simply set the
data-im-create-width
and
data-im-create-height
properties to the pixel size you want.
In the example above we have defined an image 800x200px. Remember, Instagram images are square so using round numbers ensures no parts of the image are cropped.
Finally set the
data-im-tags
property and you're all set.
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-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
.
And there's more...
Check out even more cool demos and tutorials with tons of more features
