potomak / jquery-instagram

Instagram jQuery plugin
http://potomak.github.io/jquery-instagram/
MIT License
555 stars 143 forks source link

Added caption to image #37

Closed SuperRunt closed 11 years ago

SuperRunt commented 11 years ago

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...

maplesyrupsucker commented 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!

potomak commented 11 years ago

Since version 0.3.0 plugin doesn't generate code anymore.