Merge branch 'release/1.0.2'

README.md

@@ -11,3 +11,38 @@ jQuery plugin to add Instagram feed to a page.
 - Infinite load while in FancyBox popup (new images added dynamically)
 - Link to a location on map (configurable)
 - Configurable image title, with "caption", "map", "likes" and "author" fields
+
+## Usage
+
+    $('#masongram').masongram();
+
+### Options
+
+| Option | Type | Configuration for | Description | Default  |
+|---|---|---|---|---|
+| ```access_token``` | ```string``` | Instagram API | Authorization (required) |  |
+| ```endpoint``` | ```string``` | Instagram API | Endpoint of Instagram API media source | ```users/self``` |
+| ```count``` | ```number``` | Instagram API | Number of results for one API request | ```10``` |
+| ```offset``` | ```number``` | MasonGram | Distance from bottom of page where new API request is sent | ```100``` |
+| ```columnWidth``` | ```number``` | Masonry | Column width for Masonry brick | ```324``` |
+| ```title``` | ```object``` | FancyBox | FancyBox title templating. See below details for each property |  |
+| ```title.html``` | ```string``` | FancyBox | Main FancyBox title html. Available template elements: ```{caption}```, ```{likes}```,```{author}```,```{map}``` | ```{caption} {likes} {author} {map}``` |
+| ```title.likes``` | ```string``` | FancyBox | Template for displaying likes. Available template elements: ```{likes:count}``` | ```♡ {likes:count}``` |
+| ```title.author``` | ```string``` | FancyBox | Template for displaying author. If value for ```full_name``` is not available, ```username``` will be used. Available template elements: ```{author:username}```,```{author:full_name}``` | ```<a href="https://www.instagram.com/{author:username}" target="_blank">{author:full_name}</a>``` |
+| ```title.map``` | ```string``` | FancyBox | Template for displaying link to map with coordinates. Available template elements: ```{map:latitude}```,```{map:longitude}``` | ```<a href="https://www.google.com/maps?q={map:latitude},{map:longitude}" target="_blank">map</a>``` |
+
+### Events
+
+| Event | Description |
+|---|---|
+|```masongram:error```| Triggered when error detected |
+|```masongram:api:end```| Triggered when reached end of API resources |
+
+## Dependencies
+
+- jQuery
+- InfiniteScroll (jQuery plugin)
+- Masonry (jQuery plugin)
+- ImagesLoaded (jQuery plugin)
+- FancyBox (jQuery plugin)
+

dist/masongram.js

@@ -24,11 +24,11 @@
             offset: 100,
             columnWidth: 324,
             loop: false,
-            template: {
-                title: "{caption} {likes} {author} {map}",
+            title: {
+                html: "{caption} {likes} {author} {map}",
                 likes: "♡ {likes:count}",
                 author: '<a href="https://www.instagram.com/{author:username}" target="_blank">{author:full_name}</a>',
-                map: '<a href="https://www.google.com/maps?q={map:latitude},{map:longitude}">map</a>'
+                map: '<a href="https://www.google.com/maps?q={map:latitude},{map:longitude}" target="_blank">map</a>'
             }
         }, options);
         return this.each(function() {
@@ -48,14 +48,14 @@
                 },
                 afterLoad: function() {
                     var object = $container.find(".masongram-image-container").eq(this.index).data("object");
-                    this.title = config.template.title;
+                    this.title = config.title.html;
                     if (object.caption) {
                         this.title = this.title.replace(/\{caption}/gi, object.caption.text.replace(/#([^\s]+)/g, "<a onclick=\"masongram.filter('$1')\">#$1</a>").replace(/@([^\s]+)/g, '<a href="https://www.instagram.com/$1" target="_blank">@$1</a>'));
                     }
-                    this.title = this.title.replace(/\{likes}/gi, config.template.likes).replace(/\{likes:count}/gi, object.likes.count);
-                    this.title = this.title.replace(/\{author}/gi, config.template.author).replace(/\{author:username}/gi, object.user.username).replace(/\{author:full_name}/gi, object.user.full_name ? object.user.full_name : object.user.username);
+                    this.title = this.title.replace(/\{likes}/gi, config.title.likes).replace(/\{likes:count}/gi, object.likes.count);
+                    this.title = this.title.replace(/\{author}/gi, config.title.author).replace(/\{author:username}/gi, object.user.username).replace(/\{author:full_name}/gi, object.user.full_name ? object.user.full_name : object.user.username);
                     if (object.location) {
-                        this.title = this.title.replace(/\{map}/gi, config.template.map).replace(/\{map:latitude}/g, object.location.latitude).replace(/\{map:longitude}/g, object.location.longitude);
+                        this.title = this.title.replace(/\{map}/gi, config.title.map).replace(/\{map:latitude}/g, object.location.latitude).replace(/\{map:longitude}/g, object.location.longitude);
                     }
                     this.title = this.title.replace(/\{[^}]+}/gi, "").trim();
                 },