Flickr Module

Flickr Module

by Nirvanachain

HTML

<div class="flickrContainer" data-options='{"searchQuery" : "candy", "tagQuery" : "candy", "tagMode": "all", "picsPerPage" : "10", "curPage" : 1}'>
    
</div>

JavaScript

var FlickrModule = (function ($) {
    
    var flickrFeed = function ($element) {
        this.$element = $element;
        
        this.init();
    };
    
    flickrFeed.prototype.init = function () {
        this.setOptions()
            .jaxPhotos(this.settings.curPage)
            .onScrollHandler();
    };
    
    flickrFeed.prototype.setOptions = function () {
        var options = this.$element.data().options;
        
        var defaults = {
            searchQuery : '',
            tagQuery : '',
            tagMode : '',
            picsPerPage: '1',
            curPage: 1
        }
        
        this.settings = $.extend({}, defaults, options);
        
        return this;
    };
    
    flickrFeed.prototype.jaxPhotos = function (pageNumber) {
        var self = this;
        
        // ajax call to flickr json
        $.ajax({
            url: '//api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=' + self.settings.searchQuery + '&tag_mode=' + self.settings.tagMode + '&page=' + self.settings.currPage + '&per_page=' + self.settings.picsPerPage + '&format=json&jsoncallback=?',
            dataType: 'jsonp',
            data: JSON,
            success: function (data) {
                
                // start assembling some dom elements to wrap around each page
                var pageTxtWrap = document.createElement('div'),
                pageTxt= document.createElement('p');
                    
                pageTxt.textContent = 'Page ' + pageNumber + ' - Scroll down for more pictures!';
                pageTxt.innerText = 'Page ' + pageNumber + ' - Scroll down for more pictures!';

                pageTxtWrap.className = 'pageTextWrap';

                pageTxtWrap.appendChild(pageTxt);
                    
                // Use createDocumentFragment() as it is the fastest method of element creation
                var docFragPageHdr = document.createDocumentFragment();
          ...