Closed SuperRunt closed 11 years ago
With a bit of noodling I managed to come up with a way to display the username (& link to that usernames profile) associated with each photo when showcasing photos with a specific #hashtag, along with a datestamp of when the image was posted. I've got this stuff just below if (settings.showCaption) {, within function createPhotoElement(photo) {
if (settings.showTime) {
var date = new Date(parseInt(photo.created_time) * 1000);
(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear();
// parsing instagrams created_time to be legible by humans
var timeElm = $('<span>')
.addClass('instagram-date')
.text(photo.created_time);
}
if (settings.showUser) {
//link username to profile link, sort of sloppy but works
var instaFront = 'http://instagram.com/'
var instaBack = photo.user.username
var userElm = $('<a>')
.attr('target', '_blank')
.attr('href', instaFront+instaBack)
.addClass('instagram-user')
.text(photo.user.username);
}
//a couple tweaks to the Div wrapper below, changed it to <li> to play better with Zurbs Foundation
return $('<li>')
.addClass('ig-photo-wrapper')
.attr('id', photo.id)
.append(innerHtml, userElm, date);
// note: appending userElm and date outside of innerHtml to keep from having href inside an href (wont validate)
}
then finally at the top of jquery.instagram.js I added showUser and showTime and set value to true
(function ($){
$.fn.instagram = function (options) {
var that = this,
apiEndpoint = "https://api.instagram.com/v1",
settings = {
hash: null
, userId: null
, locationId: null
, search: null
, accessToken: null
, clientId: null
, show: null
, onLoad: null
, onComplete: null
, maxId: null
, minId: null
, next_url: null
, image_size: null
, photoLink: true
, showCaption: true
, showUser: true
, showTime: true
};
Thanks for the commit @SuperRunt - got me pointed in the right direction!
Thanks for putting this plugin together! I added a couple lines of code to display caption with the images. Figured I'd share it, and you can incorporate it if you want...