WebSite X5Help Center

 
Lauren W.
Lauren W.
User

Instagram feed that rotates the pictures  en

Author: Lauren W.
Visited 1360, Followers 1, Shared 0  

I am going to tell you the end result and you can give me ideas. I want to project Instagram pictures on a wall during office hours. I would like (but not required) to approve posts before they go up. 

The Instagram feed I have now just shows the most current pictures/text and does not scroll the whole feed. 

Do you have something that scrolls the whole feed

As of right now, I am limited to download pictures, uploading to jessor slider (or something) 

Is there like a template similar masonary wall that auto scrolls/changes the window panes? 

Any other ideas to make this work?

http://www.publichardware.com/photos.html

Also, I am not a fan of showing so much of text and less picture, I want mainly the picture, no text

Posted on the
5 ANSWERS
John S.
John S.
User

How about using instafeed.js ?

You can specify how many images should be shown - and you can have have them shown randomly.

Some of the functions

Standard Options

  • clientId - Required. Your API client id from Instagram.
  • accessToken - A valid oAuth token. Can be used in place of a client ID.
  • target - The ID of a DOM element you want to add the images to.
  • template - Custom HTML template to use for images. See templating.
  • get - Customize what Instafeed fetches. Available options are:
    • popular (default) - Images from the popular page.
    • tagged - Images with a specific tag. Use tagName to specify the tag.
    • location - Images from a location. Use locationId to specify the location.
    • user - Images with a user. Use userId to specify the user. More info here.
  • tagName - Name of the tag to get. Use with get: 'tagged'.
  • locationId - Unique id of a location to get. Use with get: 'location'.
  • userId - Unique id of a user to get. Use with get: 'user'.
  • sortBy - Sort the images in a set order. Available options are:
    • none (default) - As they come from Instagram.
    • most-recent - Newest to oldest.
    • least-recent - Oldest to newest.
    • most-liked - Highest # of likes to lowest.
    • least-liked - Lowest # likes to highest.
    • most-commented - Highest # of comments to lowest.
    • least-commented - Lowest # of comments to highest.
    • random - Random order.
  • links - Wrap the images with a link to the photo on Instagram.
  • limit - Maximum number of Images to add.
  • resolution - Size of the images to get. Available options are:
    • thumbnail (default) - 150x150
    • low_resolution - 306x306
    • standard_resolution - 612x612


Advanced Options

  • before - A callback function called before fetching images from Instagram.
  • after - A callback function called when images have been added to the page.
  • success - A callback function called when Instagram returns valid data. Takes the JSON data as an object argument.
  • error - A callback function called when there is an error fetching images.Takes an error message as a string argument.
  • mock - Fetch data without inserting images into DOM. Use with success callback.
  • filter - A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. 

This is my suggestion

Read more
Posted on the from John S.
Lauren W.
Lauren W.
User
Author

now that gives me something to work with!!! Thanks a lot! 

Read more
Posted on the from Lauren W.
Lauren W.
Lauren W.
User
Author

I gave it a try... sooo clueless as to how it works. Could not make it happen (I do not know code)  

Read more
Posted on the from Lauren W.
John S.
John S.
User

Would it help if you had some code from one of the codepen's that was just to paste in a html-object?

Or have you simply given up?

Read more
Posted on the from John S.