(function ($) { $.fn.scrollArrows = function (options) { // Default set up var config = $.extend({ numOfEls: 0, onNextButtonClick: function () {}, onPreviousButtonClick: function () {}, onButtonClick: function () {} }, options); // Keep track of which item we've scrolled to var currentElId = 0; var enableButton = function (buttonEl) { buttonEl.removeAttr('disabled'); }; var disableButton = function (buttonEl) { buttonEl.attr('disabled', 'disabled'); }; // Cache element references var prevButtonEl = $('button[value="previous"]', this); var nextButtonEl = $('button[value="next"]', this); // Click event handler for the arrows $(this).click(function (e) { // An almost superfluos event delegation var el = $(e.target); if (el.get(0).nodeName.toLowerCase() != 'button' || el.attr('disabled')) { return false; } // Increment for next if (el.val() == 'next') { currentElId++; config.onNextButtonClick.call(this, currentElId); // Decrement for previous } else if (el.val() == 'previous') { currentElId--; config.onPreviousButtonClick.call(this, currentElId); } // Call passed-in functions in the jQuery object's context config.onButtonClick.call(this, currentElId); // Enable/disable arrows as needed // First image if (currentElId === 0) { disableButton(prevButtonEl); enableButton(nextButtonEl); // Last image } else if (currentElId === (config.numOfEls - 1)) { disableButton(nextButtonEl); enableButton(prevButtonEl); // Everything in between } else { enableButton(prevButtonEl); enableButton(nextButtonEl); } }); return this; }; })(jQuery); // $(document).ready(function () { $('body').addClass('js'); });