easySlider for jQuery

February 11th, 2010

Yesterday my supervisor and I used EasySlider (a jQuery plugin) created by Alen Grakalic to make a Flickr slideshow that uses external controls to control the slideshow. It uses the Flickr feed to return a photoset in JSON to get the photos then a slightly modified version of EasySlider to do this. All that was added was a way to have a callback function on slide changes. The function is used by passing the function to trigger with the rest of options by setting onChangedCallBack to the function name. The rest of the script is unchanged. I am sending the code to author for possible future releases. The page it was used on is not currently public, but later I might update this post with a link to it. This is the page that it was used on: http://www.missouristate.edu/presidentialsearch/missouristate.htm Here is the code and at the end I will link the actual .js file.

/*
 * 	Easy Slider 1.7 - jQuery plugin
 *	written by Alen Grakalic
 *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */

/*
 *	markup example for $("#slider").easySlider();
 *
 * 	<div id="slider">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 *	</div>
 *
 */

(function($) {

    $.fn.easySlider = function(options) {

        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            controlsShow: true,
            controlsBefore: '',
            controlsAfter: '',
            controlsFade: true,
            firstId: 'firstBtn',
            firstText: 'First',
            firstShow: false,
            lastId: 'lastBtn',
            lastText: 'Last',
            lastShow: false,
            vertical: false,
            speed: 800,
            auto: false,
            pause: 2000,
            continuous: false,
            numeric: false,
            numericId: 'controls',
            onChangedCallback: null
        };

        var options = $.extend(defaults, options);

        this.each(function() {
            var obj = $(this);
            var s = $("li", obj).length;
            var w = $("li", obj).width();
            var h = $("li", obj).height();
            var clickable = true;
            obj.width(w);
            obj.height(h);
            obj.css("overflow", "hidden");
            var ts = s - 1;
            var t = 0;
            $("ul", obj).css('width', s * w);

            if (options.continuous) {
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                $("ul", obj).css('width', (s + 1) * w);
            };

            if (!options.vertical) $("li", obj).css('float', 'left');

            if (options.controlsShow) {
                var html = options.controlsBefore;
                if (options.numeric) {
                    html += '<ol id="' + options.numericId + '"></ol>';
                } else {
                    if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>';
                    html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
                    html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
                    if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>';
                };

                html += options.controlsAfter;
                $(obj).after(html);
            };

            if (options.numeric) {
                for (var i = 0; i < s; i++) {
                    $(document.createElement("li"))
						.attr('id', options.numericId + (i + 1))
						.html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>')
						.appendTo($("#" + options.numericId))
						.click(function() {
						    animate($("a", $(this)).attr('rel'), true);
						});
                };
            } else {
                $("a", "#" + options.nextId).click(function() {
                    animate("next", true);
                });
                $("a", "#" + options.prevId).click(function() {
                    animate("prev", true);
                });
                $("a", "#" + options.firstId).click(function() {
                    animate("first", true);
                });
                $("a", "#" + options.lastId).click(function() {
                    animate("last", true);
                });
            };

            function setCurrent(i) {
                i = parseInt(i) + 1;
                $("li", "#" + options.numericId).removeClass("current");
                $("li#" + options.numericId + i).addClass("current");
            };

            function showMeta(i) {
                document.getElementById("fss_meta").style.display = "block";
                debugger;
                var a = $("ul", obj);
                $("#fss_meta h3").html($("#fss ul:nth-child(" + i + ") img").attr("alt"));
                $("#fss_meta p").html(options.metaInfo[i - 1]);
            };

            function adjust() {
                if (t > ts) t = 0;
                if (t < 0) t = ts;
                if (!options.vertical) {
                    $("ul", obj).css("margin-left", (t * w * -1));
                } else {
                    $("ul", obj).css("margin-left", (t * h * -1));
                }
                clickable = true;
                if (options.numeric) setCurrent(t);
                if (options.onChangedCallback) options.onChangedCallback(t);
            };

            function animate(dir, clicked) {
                if (clickable) {
                    clickable = false;
                    var ot = t;
                    switch (dir) {
                        case "next":
                            t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
                            break;
                        case "prev":
                            t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
                            break;
                        case "first":
                            t = 0;
                            break;
                        case "last":
                            t = ts;
                            break;
                        default:
                            t = dir;
                            break;
                    };
                    var diff = Math.abs(ot - t);
                    var speed = diff * options.speed;
                    if (!options.vertical) {
                        p = (t * w * -1);
                        $("ul", obj).animate(
							{ marginLeft: p },
							{ queue: false, duration: speed, complete: adjust }
						);
                    } else {
                        p = (t * h * -1);
                        $("ul", obj).animate(
							{ marginTop: p },
							{ queue: false, duration: speed, complete: adjust }
						);
                    };

                    if (!options.continuous && options.controlsFade) {
                        if (t == ts) {
                            $("a", "#" + options.nextId).hide();
                            $("a", "#" + options.lastId).hide();
                        } else {
                            $("a", "#" + options.nextId).show();
                            $("a", "#" + options.lastId).show();
                        };
                        if (t == 0) {
                            $("a", "#" + options.prevId).hide();
                            $("a", "#" + options.firstId).hide();
                        } else {
                            $("a", "#" + options.prevId).show();
                            $("a", "#" + options.firstId).show();
                        };
                    };

                    if (clicked) clearTimeout(timeout);
                    if (options.auto && dir == "next" && !clicked) {
                        ;
                        timeout = setTimeout(function() {
                            animate("next", false);
                        }, diff * options.speed + options.pause);
                    };

                };

            };
            // init
            var timeout;
            if (options.auto) {
                ;
                timeout = setTimeout(function() {
                    animate("next", false);
                }, options.pause);
            };

            if (options.numeric) setCurrent(0);
            if (options.onChangedCallback)
                options.onChangedCallback(0);

            if (!options.continuous && options.controlsFade) {
                $("a", "#" + options.prevId).hide();
                $("a", "#" + options.firstId).hide();
            };

        });

    };

})(jQuery);

File: easySlider1.7-Callback

Tags: callback, custom flickr slideshow, javascript, jquery plugin, slideshow
Posted in programming | No Comments »