A single page Instagram Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.
Best jQuery Instagram Plugins & Tutorials with Demo
Onyx – jQuery Instagram Gallery
Onyx is a premium jQuery gallery with smooth hardware accelerated transitions. It helps you easily get photos and data from your Instagram account (or any users* on Instagram) and display them on your website. Onyx features an unfolding preview effect similar to the preview feature on Google Images. To use it all you need to do is give an Instagram username to the app and set your options.
InstaStream : jQuery plugin to stream pictures from Instagram
Instastream is a simple jQuery plugin to stream pictures from Instagram.Before to go further be sure you have an Instagram account and an Instagram API Key.You can choose how many pictures you want by slide. CSS cover 1,2,3 and 4 results, feel free to add new styles if you want more results by slide.
Pongstagr.am : jQuery plugin that display instagram photos to website
A jQuery plugin that lets you display instagram photos to your website. For the most part, Instagram’s API only requires the use of a client_id. A client_id simply associates your server, script, or program with a specific application. However, some requests require authentication – specifically requests made on behalf of a user. Authenticated requests require an access_token. These tokens are unique to a user and should be stored securely. Access tokens may expire at any time in the future.
Simple Instagram VIDEO with jQuery & HTML5
Simple Instagram Video is a premium Instagram plugin that uses the power of HTML5 Video to showcase the latest functionality of the Instagram API. We know you will love it as much as we do because we’ve designed it to be as beautiful as it is useful. Give it a try, have some fun, and share you moments with the world!
Features:
- Superior Codebase – Built on our amazingly bulletproof framework
- Responsive Design – Fully mobile-ready design adapts to any device.
- Fullscreen Video – Enjoy your videos fully regardless of the device.
- Advanced Video Thumbnail Gallery Mode – Share your best Instagram videos with our clean thumbnail gallery.
- Premium Video Playlist Gallery Mode – Display your videos with our unique playlist style video player.
- Popular Instagram Feed Mode – This feed mode pulls in the photos from the Instagram popular feed.
- Tag Instagram Feed Mode – This feed mode allows you to specify a tag to search from the Instagram API.
- User Instagram Feed Mode – This feed mode allows you to specify a user id to pull in photos from a specific user.
- Multiuser Instagram Feed Mode – This feed mode allows you to specify multiple user id’s to pull in photos from specific users. Note, this feature does NOT allow load more functionality.
- Liked Instagram Feed Mode – Display photos and videos that you’ve liked all accross the Instagram API.
Instafeed.js : A simple Instagram javascript plugin
Instafeed is a dead-simple way to add Instagram photos to your website. No jQuery required, just good ‘ol plain javascript.Setting up Instafeed is pretty straight-forward. Just download the script and include it in your HTML.
Instafeed with automatically look for a <div id="instafeed"></div> and fill it with linked thumbnails. Of course, you can easily change this behavior using standard options. Also check out the advanced options for some advanced ways of customizing Instafeed.js.
Make a Web App with Instagram-like Filters in jQuery & CamanJS
In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:
- Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
- Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
- jQuery Mousewheel – I am using this plugin to scroll the filter container;
- In addition, we are using the latest version jQuery at the time of writing.
filtrr : Javascript image filters library
Filtrr2 is a JavaScript image manipulation library. Think of it as Instagram filters on the browser. It uses the <canvas> element to paint filtered pictures in the place of normal pictures on your website.Filtrr has a many image effect like Brighten, Saturate, Gamma, Adjust, Expose, Curves, Sharpen, Blur, Fill, Subtract, Sepia, Contrast, Posterize, Invert, Alpha.
Blending modes
- Multiply
- Screen
- Overlay
- Soft Light
- Addition
- Exclusion
- Difference
Slider Shock : Most complete responsive jQuery/WordPress Slider
jQuery Slider Shock. A fully responsive slider and the most complete over the web right now. Available for you to download it as a jQuery code to use it wherever you need, or as a plugin for the most used CMS: WordPress. We wanted to make something that could take advantage of all the power that the jQuery code has to offer and this is the result. Take a look into this post and the features that our slider has to offer.
Do you want to build your own Slider? Sure, you can do it!. Look at the controls available to do so.
Features:
- You can easily add thumbnails on any of the sides of the slider ( top, bottom, left, right ) allowing users to navigate easily between slides.
- jQuery Slider Shock supports not only images but also allows you to show Videos from YouTube playlists, RSS Feeds, Twitter Feeds, Flickr and Instagram images from an account.
- You can create an slider from each of the following sources: Custom Slides, Posts (WordPress), Custom Post Types (WP), Taxonomies (WP), External RSS, YouTube, Flickr, Twitter and Instagram.
- Add videos from YouTube, Vimeo or Hulu.
- Create a unique slider adding not only videos or only images, but both of them between slides.
- You can have as many sliders as you want in the a single page.
- Add a flat color or a pattern based background the captions in the slides.
- You can adjust both the position and width of the slider captions.
- You can also include external URL images. By doing that, you can add completely different background patterns to your slider.
- You can choose a fixed width for your images, or adjust them to the 100% of its parent width..
- Add image descriptions within the thumbnail labels and display them on top, bottom, left or right side of your slider.
- Like the images, the labels can have their own background.
- You can adjust both the position and width of your captions.
- Pick one from 31 available effects (premium) or let them be random.
- Responsiveness can be deactivated, allowing your slider to remain the same disregarding the screen size.
- You choose the skin that fits on your site the best from 39 skins.
