photogallery.js

//
// Gallery
//
(function ($) {
    $.fn.mediagallery = function (opts) {
        return this.each(function () {
            var $this = $(this);

            // Merge options
            var options = $.extend(true, {}, $.fn.mediagallery.defaults, opts);

            //jQuery.fx.interval = options.animationInterval;

            // Data
            var data = options.data;

            // Current
            var current = options.current;

            // Width
            var itemWidth = 0;

            // In touch move
            var inTouchMove = false;

            var isWebkitTransform = (function () {
                //if ($('body').hasClass('android')) return false; // geen webkit voor android atm

                var div = document.createElement('div');
                div.innerHTML = '<div style="-webkit-transition:color 1s linear;"></div>';
                var cssTransitionsSupported = (div.firstChild.style.webkitTransition !== undefined);
                delete div;
                return cssTransitionsSupported;
            })();

            // Navigation

            var navContainer = $this.find(options.selectors.nav.self);
            var nav = {
                self: navContainer,
                prev: navContainer.find(options.selectors.nav.prev),
                next: navContainer.find(options.selectors.nav.next),
                pgnr: navContainer.find(options.selectors.nav.pgnr)
            };

            // Media
            var mediaContainer = $this.find(options.selectors.media.self);
            var media = {
                self: mediaContainer,
                item: mediaContainer.find(options.selectors.media.item),
                prev: mediaContainer.find(options.selectors.media.prev),
                next: mediaContainer.find(options.selectors.media.next)
            };

            // Carousel
            var carouselContainer = $this.find(options.selectors.carousel.self);
            var carousel = {
                self: carouselContainer,
                items: carouselContainer.find(options.selectors.carousel.item)
            };

            // Scroller
            var scroller = {
                container: $this.find('#prop-media-scroller-holder'),
                self: $this.find('#prop-media-scroller')
            };

            //
            // Previous item
            //
            var previous = function (smooth) {
                if (current > 0) {
                    select(current - 1, smooth);
                }
                return false;
            };

            //
            // Next item
            //
            var next = function (smooth) {
                if (current < data.length - 1) {
                    select(current + 1, smooth);
                }
                return false;
            };

            //
            // Select item
            //
            var select = function (idx, smooth) {
                // Deselect previously selected item
                carousel.items.eq(current).removeClass(options.classNames.selected);

                // last item was?
                var previousIdx = current;

                // Store index of selected item
                current = idx;

                // Select item
                carousel.items.eq(current).addClass(options.classNames.selected);

                // Display item in gallery
                refresh(smooth, previousIdx);

                return false;
            };

            //
            // Refresh gallery
            //
            var refresh = function (smooth, previousIdx) {
                if (smooth && previousIdx !== current) {
                    repositionContainer(current * itemWidth, options.animationSpeed, function () {
                        inTouchMove = false;
                        setImages();
                    });
                } else {
                    setImages(true); // set correct images and force reposition
                }
                refreshUi();
            };

            var refreshUi = function () {
                // Navigation: previous
                if (current > 0) {
                    nav.prev.removeClass(options.classNames.disabled);
                } else {
                    nav.prev.addClass(options.classNames.disabled);
                }

                // Navigation: next
                if (current < data.length - 1) {
                    nav.next.removeClass(options.classNames.disabled);
                } else {
                    nav.next.addClass(options.classNames.disabled);
                }

                // Navigation: current item number
                nav.pgnr.html(current + 1);

                // toggle media prev/next buttons
                media.prev.toggle(!nav.prev.hasClass(options.classNames.disabled));
                media.next.toggle(!nav.next.hasClass(options.classNames.disabled));
            };

            //
            // Scroll element into view
            //
            var scrollIntoView = function (obj, offset) {
                $.smoothScroll({ scrollTop: (obj.offset().top + (offset || 0)) });
            };

            //
            // Reserve space for item
            //
            var reserveSpace = function () {
                // Use expected dimensions ratio for guidance
                var ratio = options.dimensions.height / options.dimensions.width;

                // Use CSS values for min. and max. dimensions
                var minHeight = parseInt(media.item.css('min-width'), 10) * ratio;
                var maxHeight = parseInt(media.item.css('max-width'), 10) * ratio;

                // Calculate expected height based on current width
                var height = media.self.width() * ratio;

                if (height < minHeight) height = minHeight;
                if (height > maxHeight) height = maxHeight;

                media.self.height(height);
            };

            //
            // Get absolute URL
            //
            var getAbsoluteUrl = function (url) {
                return options.baseUrl + url;
            };

            //
            // Apply handlers
            //

            // Navigation: previous / next
            nav.prev.add(nav.next).bind('click', function () {
                // Determine previous or next
                if (this === nav.prev.get(0)) {
                    previous();
                } else if (this === nav.next.get(0)) {
                    next();
                }

                return false;
            });

            // Media navigation: previous / next
            var currentAtMousedown;
            media.prev.add(media.next).bind('click', function () {
                if (inTouchMove || currentAtMousedown !== current) return false;

                // Determine previous or next
                if (this === media.prev.get(0)) {
                    select(current - 1, false);
                } else if (this === media.next.get(0)) {
                    select(current + 1, false);
                }

                return false;
            }).mousedown(function () {
                currentAtMousedown = current;
            });

            // Carousel select
            carousel.items.bind('click', function () {
                // Select item
                select(carousel.items.index(this));

                // Scroll media into view
                scrollIntoView(media.self);

                return false;
            });

            // Swipe events
            $(document).ready(function () {
                var prevSwipe = 0;
                var prevDx = 0;

                var $this = scroller.self;

                $(media.self).wipe({
                    events: {
                        wipeStart: function () {
                            if (inTouchMove) {
                                // zijn we nog in de touch move? dan stop anim
                                if (isWebkitTransform) {
                                    $this.css({
                                        '-webkit-transition-duration': '0ms'
                                    });
                                } else {
                                    $this.stop(true, true);
                                }
                            }

                            setImages();
                        },
                        wipe: function (dx, dy) {
                            inTouchMove = true;

                            var curDt = new Date().getTime();

                            // we updaten max elke 15 ms.
                            // $(this).css({ left: dx });

                            // aan de zijkanten mag je niet zover meer door
                            var baseLine = current * itemWidth;

                            if ((current === 0 && dx > 0) || (current === data.length - 1 && dx < 0)) {
                                dx = 0.4 * dx;
                            }

                            repositionContainer(baseLine - dx, 0);

                            prevSwipe = curDt;
                        },
                        wipeEnd: function (dx, dy) {
                            if (dx < 0 && (Math.abs(dx) > itemWidth * 0.2) && data[current + 1]) {
                                // animeer naar volgende afbeelding
                                next(true);
                            } else if (dx > 0 && (Math.abs(dx) > itemWidth * 0.2) && data[current - 1]) {
                                // animeer naar vorige afbeelding
                                previous(true);
                            } else {
                                var baseLine = current * itemWidth;

                                repositionContainer(baseLine, options.animationSpeed);
                                setTimeout(function () { inTouchMove = false; }, options.animationSpeed);
                            }
                        }
                    },
                    minTimeBetweenSwipeEvents: 0
                });
            });

            // Set correct swipe images
            var setImages = function (forceReposition) {
                if (forceReposition) {
                    repositionContainer(current * itemWidth, 0);
                }

                // we zetten altijd vorige / current / volgende
                if (data[current - 1] && !scroller.self.find('img:eq(' + (current - 1) + ')').attr('src')) {
                    scroller.self.find('img:eq(' + (current - 1) + ')').attr('src', data[current - 1]);
                }

                if (!scroller.self.find('img:eq(' + (current) + ')').attr('src')) {
                    scroller.self.find('img:eq(' + current + ')').attr('src', data[current]);
                }

                if (data[current + 1] && !scroller.self.find('img:eq(' + (current + 1) + ')').attr('src')) {
                    scroller.self.find('img:eq(' + (current + 1) + ')').attr('src', data[current + 1]);
                }
            };

            // toggle media prev/next buttons
            media.prev.toggle(!nav.prev.hasClass(options.classNames.disabled));
            media.next.toggle(!nav.next.hasClass(options.classNames.disabled));

            var repositionContainer = function (x, duration, finishedCallback) {
                x = (x | 0);

                finishedCallback = finishedCallback || function () { };

                if (!isWebkitTransform) {
                    if (!duration) {
                        scroller.self.css({ left: -x });
                        finishedCallback();
                    } else {
                        scroller.self.animate({ left: -x }, duration, finishedCallback);
                    }
                } else {
                    // webkit on anim finished
                    var cb = function () {
                        finishedCallback();
                        scroller.self.unbind('webkitTransitionEnd');
                    }
                    scroller.self.bind('webkitTransitionEnd', cb);

                    scroller.self.css({
                        '-webkit-transform': 'translate(' + -x + 'px,0px)',
                        '-webkit-transition-duration': (duration || 0) + 'ms',
                        '-webkit-backface-visibility': 'hidden',
                        '-webkit-transition-property': '-webkit-transform'
                    });
                }
            };

            // when loaded, set positioning correct
            var reserveSwipeSpace = function () {
                if (scroller.self.find('img').length === data.length) { // reposition
                    var height = media.self.height();

                    if (height > options.dimensions.height) {
                        height = options.dimensions.height;
                        media.self.height(height);
                    }

                    itemWidth = (height * (options.dimensions.width / options.dimensions.height) | 0);

                    for (var ix = 0; ix < data.length; ix++) {
                        scroller.self.find('img:eq(' + ix + ')').css({ height: height, width: itemWidth, left: ix * itemWidth });
                    }

                    setImages(true);

                    scroller.container.css({ left: ($('body').width() / 2) - (itemWidth / 2) });
                    scroller.container.width(itemWidth);

                    return;
                }

                //  eerste keer
                var temporaryImage = new Image();
                temporaryImage.onload = function () {
                    var height = media.self.height();

                    if (height > options.dimensions.height) {
                        height = options.dimensions.height;
                        media.self.height(height);
                    }

                    itemWidth = (height * (options.dimensions.width / options.dimensions.height) | 0);

                    for (var ix = 0; ix < data.length; ix++) {
                        var obj = $('<img/>').css({ height: height, width: itemWidth, position: 'absolute', left: ix * itemWidth });
                        scroller.self.append(obj);
                    }

                    media.item.remove(); // remove media.self

                    setImages(true);

                    // container zetten
                    scroller.container.css({ left: ($('body').width() / 2) - (itemWidth / 2) });
                    scroller.container.width(itemWidth);
                };
                // fire in the hole!
                temporaryImage.src = media.item.attr('src');
            };

            // Reflow on orientation change or screensize change
            $(window).bind('orientationchange', function () {
                reserveSpace();
                reserveSwipeSpace();
            });
            $(window).trigger('orientationchange');

            window.onresize = function () {
                reserveSpace();
                reserveSwipeSpace();
            };

            return this;
        });
    };

    // Default options
    $.fn.mediagallery.defaults = {
        // Classnames
        classNames: {
            disabled: 'disabled',
            selected: 'selected'
        },

        // Current pic
        current: 0,

        // Selectors
        selectors: {
            nav: {
                self: '.nav-pg',
                prev: '.nav-pg-prev a.button-pg',
                next: '.nav-pg-next a.button-pg',
                pgnr: '.nav-pg-current'
            },

            media: {
                self: '.prop-media-img',
                item: 'img.current',
                prev: '.prop-media-prev',
                next: '.prop-media-next'
            },

            carousel: {
                self: '.prop-media-carousel',
                item: 'a.thumb-media'
            }
        },

        // Media
        data: [
        // Array of strings
        ],

        dimensions: {
            width: 600,
            height: 400
        },

        animationSpeed: 300,
        animationInterval: 0
    };
})(jQuery);