galleryObj Plug
by SamsChoice
HTML
<div id="container"></div>
JavaScript
// Cheating @ jQueryPlugins
// (Mildly stolen from how SwipeJS does their stuff)
// START PROTO
var BFGGallery = function (container, options) {
this.perPage = options.perPage || 8;
this.galleryApiUrl = options.galleryApiUrl || "/generic/gallery/get";
this.callback = options.callback || null;
this.currentPage = 1;
this.container = container;
this.getGalleryEntries();
}
BFGGallery.prototype.getGalleryEntries = function () {
// AJAX REQUEST
// This is tricky because we tend to rely on jQuery for this..
// Anyway, lets "assume" a basic XHR Request and make a request to this.galleryApiUrl..
// Derp Derp Derp ....
var response = "hello rob";
this.container.innerHTML = response;
if(typeof this.callback === "function"){
this.callback();
}
}
BFGGallery.prototype.nextPage = function () {
// NEXT FUNCTION
// calls get entries on next page
}
BFGGallery.prototype.prevPage = function () {
// PREV FUNCTION
//Calls get entries on prev. page
}
// END PROTO
/* Makes a proto into a plugin. This allows for dual-use.
-------------------------------------------------------------------------------------------------------*/
if (window.jQuery) {
(function ($) {
$.fn.BFGGallery = function (params) {
var params = params || {};
return this.each(function () {
$(this).data('BFGGallery', new BFGGallery($(this)[0], params)); //Stores Object in JQuery
});
}
})(window.jQuery)
}
/*----------------------------------------------------------------------------------------------------*/
// <- Lets make a SUPER BASIC GALLERY ->
var params = {perPage:30, galleryApiUrl: "herp/derp/merp"};
$("#container").BFGGallery(params);
var galleryObject = $("#container").data('BFGGallery');
$(".next").on("click", galleryObject.nextPage());
$(".prev").on("click", galleryObject.prevPage());
/*
Note - We can still extend functionality through...