diff --git a/src/galleria.js b/src/galleria.js index a29a51c1..dd064a2b 100644 --- a/src/galleria.js +++ b/src/galleria.js @@ -128,7 +128,7 @@ var doc = window.document, get_image: function(data) { if ( data.entry.yt$hd ) { return PROT + '//img.youtube.com/vi/'+this.id+'/maxresdefault.jpg'; - } + } return data.entry.media$group.media$thumbnail[3].url; } }, @@ -191,20 +191,20 @@ var doc = window.document, }); this.getMedia = function( type, callback, fail ) { - fail = fail || F; + fail = fail || F; var self = this; var success = function( data ) { callback( self['get_'+type]( data ) ); }; - try { + try { if ( self.data ) { success( self.data ); } else { self.readys.push( success ); } - } catch(e) { - fail(); - } + } catch(e) { + fail(); + } }; }, @@ -1300,8 +1300,8 @@ Galleria = function() { next: self.$('thumb-nav-right'), prev: self.$('thumb-nav-left'), - // cache the width - width: 0, + // cache the size (width or height, depends on vertical option) + size: 0, // track the current position current: 0, @@ -1317,35 +1317,42 @@ Galleria = function() { update: function() { var w = 0, h = 0, + wh = 0, hooks = [0]; + vertical = ( self._options.carousel === "vertical" ); $.each( self._thumbnails, function( i, thumb ) { if ( thumb.ready ) { - w += thumb.outerWidth || $( thumb.container ).outerWidth( true ); - // Due to a bug in jquery, outerwidth() returns the floor of the actual outerwidth, + w = thumb.outerWidth || $( thumb.container ).outerWidth( true ); + h = thumb.outerHeight || $( thumb.container ).outerHeight( true ); + // Due to a bug in jquery, outerwidth() returns the floor of the actual outerwidth, // if the browser is zoom to a value other than 100%. height() returns the floating point value. var containerWidth = $( thumb.container).width(); w += containerWidth - M.floor(containerWidth); + var containerHeight = $( thumb.container).height(); + h += containerHeight - M.floor(containerHeight); - hooks[ i+1 ] = w; + wh += vertical ? ( h ) : ( w ); + hooks[ i+1 ] = wh; h = M.max( h, thumb.outerHeight || $( thumb.container).outerHeight( true ) ); + w = M.max( w, thumb.outerWidth || $( thumb.container).outerWidth( true ) ); } }); self.$( 'thumbnails' ).css({ - width: w, - height: h + width: vertical ? w : wh, + height: vertical ? wh : h }); - carousel.max = w; + carousel.max = wh; carousel.hooks = hooks; - carousel.width = self.$( 'thumbnails-list' ).width(); + carousel.size = vertical ? self.$( 'thumbnails-list' ).height() : self.$( 'thumbnails-list' ).width(); carousel.setClasses(); - self.$( 'thumbnails-container' ).toggleClass( 'galleria-carousel', w > carousel.width ); + self.$( 'thumbnails-container' ).toggleClass( 'galleria-carousel', wh > carousel.size ); // one extra calculation - carousel.width = self.$( 'thumbnails-list' ).width(); + carousel.size = vertical ? self.$( 'thumbnails-list' ).height() : self.$( 'thumbnails-list' ).width(); // todo: fix so the carousel moves to the left }, @@ -1360,7 +1367,7 @@ Galleria = function() { if ( self._options.carouselSteps === 'auto' ) { for ( i = carousel.current; i < carousel.hooks.length; i++ ) { - if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.width ) { + if ( carousel.hooks[i] - carousel.hooks[ carousel.current ] > carousel.size ) { carousel.set(i - 2); break; } @@ -1377,7 +1384,7 @@ Galleria = function() { if ( self._options.carouselSteps === 'auto' ) { for ( i = carousel.current; i >= 0; i-- ) { - if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.width ) { + if ( carousel.hooks[ carousel.current ] - carousel.hooks[i] > carousel.size ) { carousel.set( i + 2 ); break; } else if ( i === 0 ) { @@ -1394,7 +1401,7 @@ Galleria = function() { // calculate and set positions set: function( i ) { i = M.max( i, 0 ); - while ( carousel.hooks[i - 1] + carousel.width >= carousel.max && i >= 0 ) { + while ( carousel.hooks[i - 1] + carousel.size >= carousel.max && i >= 0 ) { i--; } carousel.current = i; @@ -1418,7 +1425,7 @@ Galleria = function() { // calculate last position var last = carousel.current; while( carousel.hooks[last] - carousel.hooks[ carousel.current ] < - carousel.width && last <= carousel.hooks.length ) { + carousel.size && last <= carousel.hooks.length ) { last ++; } @@ -1433,7 +1440,7 @@ Galleria = function() { // helper for setting disabled classes setClasses: function() { carousel.prev.toggleClass( 'disabled', !carousel.current ); - carousel.next.toggleClass( 'disabled', carousel.hooks[ carousel.current ] + carousel.width >= carousel.max ); + carousel.next.toggleClass( 'disabled', carousel.hooks[ carousel.current ] + carousel.size >= carousel.max ); }, // the animation method @@ -1450,7 +1457,10 @@ Galleria = function() { return $(this).css('left'); }); - Utils.animate(self.get( 'thumbnails' ), { + Utils.animate(self.get( 'thumbnails' ), (self._options.carousel === "vertical" ) ? { + top: num + } : + { left: num },{ duration: self._options.carouselSpeed, @@ -2673,20 +2683,20 @@ Galleria.prototype = { if ( options ) { - // turn off debug + // turn off debug if ( options.debug === false ) { - DEBUG = false; - } + DEBUG = false; + } - // set timeout + // set timeout if ( typeof options.imageTimeout === 'number' ) { - TIMEOUT = options.imageTimeout; - } + TIMEOUT = options.imageTimeout; + } - // set dummy + // set dummy if ( typeof options.dummy === 'string' ) { - DUMMY = options.dummy; - } + DUMMY = options.dummy; + } // set theme if ( typeof options.theme == 'string' ) { @@ -2894,6 +2904,11 @@ Galleria.prototype = { 'galleria-theme-'+this.theme.name ].join(' ')); + // add a vertical class on the container if option carousel: "vertical" + if ( options.carousel ) { + this.$( 'container' ).addClass( (options.carousel === "vertical") ? 'vertical' : 'horizontal' ); + } + // add images to the controls if ( !this._options.swipe ) { $.each( new Array(2), function( i ) { @@ -3090,6 +3105,14 @@ Galleria.prototype = { position: 'relative' }); + if (options.carousel === "vertical") { + this.$( 'thumbnails-list' ).css({ + position: 'absolute', + top: 0, + bottom: 0 + }); + } + // bind image navigation arrows this.$( 'image-nav-right, image-nav-left' ).on( 'click:fast', function(e) { @@ -4915,24 +4938,24 @@ this.prependChild( 'info', 'myElement' ); window.setTimeout(function() { - // load if not ready + // load if not ready if ( !image.ready || $(image.image).attr('src') != src ) { if ( data.iframe && !data.image ) { image.isIframe = true; } - image.load(src, function(image) { + image.load(src, function(image) { evObj.imageTarget = image.image; - self._scaleImage(image, complete).trigger($.extend(evObj, { - type: Galleria.IMAGE - })); - complete(); - }); - } else { - self.trigger($.extend(evObj, { + self._scaleImage(image, complete).trigger($.extend(evObj, { type: Galleria.IMAGE })); complete(); - } + }); + } else { + self.trigger($.extend(evObj, { + type: Galleria.IMAGE + })); + complete(); + } }, 100); } else { @@ -5172,7 +5195,7 @@ this.prependChild( 'info', 'myElement' ); if ( ( data.iframe && data.image ) || data.link || self._options.lightbox || self._options.clicknext ) { layer.css( 'cursor', 'pointer' ).off( 'mouseup' ).mouseup( mousetrigger ); } - } + } // add play icon if( data.video && data.image ) { @@ -5722,12 +5745,12 @@ Galleria.addTheme = function( theme ) { var retryCount = 0; var tryLoadCss = function() { $('script').each(function (i, script) { - // look for the theme script + // look for the theme script reg = new RegExp('galleria\\.' + theme.name.toLowerCase() + '\\.'); if (reg.test(script.src)) { - // we have a match - css = script.src.replace(/[^\/]*$/, '') + theme.css; + // we have a match + css = script.src.replace(/[^\/]*$/, '') + theme.css; window.setTimeout(function () { Utils.loadCSS(css, 'galleria-theme-'+theme.name, function () { @@ -5735,10 +5758,10 @@ Galleria.addTheme = function( theme ) { // run galleries with this theme _themeLoad(theme); - }); - }, 1); - } - }); + }); + }, 1); + } + }); if (!css) { if (retryCount++ > 5) { Galleria.raise('No theme CSS loaded'); diff --git a/src/themes/vertical/classic-loader.gif b/src/themes/vertical/classic-loader.gif new file mode 100644 index 00000000..27df81f4 Binary files /dev/null and b/src/themes/vertical/classic-loader.gif differ diff --git a/src/themes/vertical/galleria.vertical.css b/src/themes/vertical/galleria.vertical.css new file mode 100644 index 00000000..c81969c4 --- /dev/null +++ b/src/themes/vertical/galleria.vertical.css @@ -0,0 +1,216 @@ +/* Galleria Classic Theme 2012-08-07 | https://raw.github.com/aino/galleria/master/LICENSE | (c) Aino */ + +#galleria-loader{height:1px!important} + +.galleria-container { + position: relative; + overflow: hidden; + background: #000; +} +.galleria-container img { + -moz-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.galleria-stage { + position: absolute; + top: 10px; + bottom: 10px; + left: 80px; + right: 10px; + overflow:hidden; +} +.galleria-thumbnails-container { + width: 60px; + left: 10px; + position: absolute; + top: 10px; + bottom: 10px; + z-index: 2; +} +.galleria-carousel .galleria-thumbnails-list { + margin-top: 30px; + margin-bottom: 30px; +} +.galleria-thumbnails .galleria-image { + height: 40px; + width: 60px; + background: #000; + margin: 0 0 5px 0; + border: 1px solid #000; + float: left; + cursor: pointer; +} +.galleria-counter { + position: absolute; + bottom: 10px; + right: 10px; + text-align: left; + color: #fff; + font: normal 11px/1 arial,sans-serif; + z-index: 1; +} +.galleria-loader { + background: #000; + width: 20px; + height: 20px; + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + display: none; + background: url(classic-loader.gif) no-repeat 2px 2px; +} +.galleria-info { + width: 50%; + top: 15px; + left: 85px; + z-index: 2; + position: absolute; +} +.galleria-info-text { + background-color: #000; + padding: 12px; + display: none; + /* IE7 */ zoom:1; +} +.galleria-info-title { + font: bold 12px/1.1 arial,sans-serif; + margin: 0; + color: #fff; + margin-bottom: 7px; +} +.galleria-info-description { + font: italic 12px/1.4 georgia,serif; + margin: 0; + color: #bbb; +} +.galleria-info-close { + width: 9px; + height: 9px; + position: absolute; + top: 5px; + right: 5px; + background-position: -753px -11px; + opacity: .5; + filter: alpha(opacity=50); + cursor: pointer; + display: none; +} +.notouch .galleria-info-close:hover{ + opacity:1; + filter: alpha(opacity=100); +} +.touch .galleria-info-close:active{ + opacity:1; + filter: alpha(opacity=100); +} +.galleria-info-link { + background-position: -669px -5px; + opacity: .7; + filter: alpha(opacity=70); + position: absolute; + width: 20px; + height: 20px; + cursor: pointer; + background-color: #000; +} +.notouch .galleria-info-link:hover { + opacity: 1; + filter: alpha(opacity=100); +} +.touch .galleria-info-link:active { + opacity: 1; + filter: alpha(opacity=100); +} +.galleria-image-nav { + position: absolute; + top: 50%; + margin-top: -62px; + width: 100%; + height: 62px; + left: 0; +} +.galleria-image-nav-left, +.galleria-image-nav-right { + opacity: .3; + filter: alpha(opacity=30); + cursor: pointer; + width: 62px; + height: 124px; + position: absolute; + left: 10px; + z-index: 2; + background-position: 0 46px; +} +.galleria-image-nav-right { + left: auto; + right: 10px; + background-position: -254px 46px; + z-index: 2; +} +.notouch .galleria-image-nav-left:hover, +.notouch .galleria-image-nav-right:hover { + opacity: 1; + filter: alpha(opacity=100); +} +.touch .galleria-image-nav-left:active, +.touch .galleria-image-nav-right:active { + opacity: 1; + filter: alpha(opacity=100); +} +.galleria-thumb-nav-left, +.galleria-thumb-nav-right { + cursor: pointer; + display: none; + background-position: -480px 0; + position: absolute; + top: 0; + height: 23px; + width: 60px; + z-index: 3; + opacity: .8; + filter: alpha(opacity=80); +} +.galleria-thumb-nav-right { + background-position: -559px -7px; + border-right: none; + bottom: 0; + top: auto; +} +.galleria-thumbnails-container .disabled { + opacity: .2; + filter: alpha(opacity=20); + cursor: default; +} +.notouch .galleria-thumb-nav-left:hover, +.notouch .galleria-thumb-nav-right:hover { + opacity: 1; + filter: alpha(opacity=100); + background-color: #111; +} +.touch .galleria-thumb-nav-left:active, +.touch .galleria-thumb-nav-right:active { + opacity: 1; + filter: alpha(opacity=100); + background-color: #111; +} +.notouch .galleria-thumbnails-container .disabled:hover { + opacity: .2; + filter: alpha(opacity=20); + background-color: transparent; +} + +.galleria-carousel .galleria-thumb-nav-left, +.galleria-carousel .galleria-thumb-nav-right { + display: block; +} +.galleria-thumb-nav-left, +.galleria-thumb-nav-right, +.galleria-info-link, +.galleria-info-close, +.galleria-image-nav-left, +.galleria-image-nav-right { + background-image: url(vertical-map.png); + background-repeat: no-repeat; +} diff --git a/src/themes/vertical/galleria.vertical.js b/src/themes/vertical/galleria.vertical.js new file mode 100644 index 00000000..06b5b7c3 --- /dev/null +++ b/src/themes/vertical/galleria.vertical.js @@ -0,0 +1,97 @@ +/** + * Galleria Vertical Theme 2013-02-24 + * based on Classic + * http://galleria.io + * + * Licensed under the MIT license + * https://raw.github.com/aino/galleria/master/LICENSE + * + */ + +(function($) { + +/*global jQuery, Galleria */ + +Galleria.addTheme({ + name: 'vertical', + author: 'Galleria', + css: 'galleria.vertical.css', + defaults: { + transition: 'slide', + thumbCrop: 'width', + carousel: 'vertical', + + // set this to false if you want to show the caption all the time: + _toggleInfo: true + }, + init: function(options) { + + Galleria.requires(1.3, 'This version of Classic theme requires Galleria 1.3 or later'); + + // add some elements + this.addElement('info-link','info-close'); + this.append({ + 'info' : ['info-link','info-close'] + }); + + // cache some stuff + var info = this.$('info-link,info-close,info-text'), + touch = Galleria.TOUCH, + click = touch ? 'touchstart' : 'click'; + + // show loader & counter with opacity + this.$('loader,counter').show().css('opacity', 0.4); + + // some stuff for non-touch browsers + if (! touch ) { + this.addIdleState( this.get('image-nav-left'), { left:-50 }); + this.addIdleState( this.get('image-nav-right'), { right:-50 }); + this.addIdleState( this.get('counter'), { opacity:0 }); + } + + // toggle info + if ( options._toggleInfo === true ) { + info.bind( click, function() { + info.toggle(); + }); + } else { + info.show(); + this.$('info-link, info-close').hide(); + } + + // bind some stuff + this.bind('thumbnail', function(e) { + + if (! touch ) { + // fade thumbnails + $(e.thumbTarget).css('opacity', 0.6).parent().hover(function() { + $(this).not('.active').children().stop().fadeTo(100, 1); + }, function() { + $(this).not('.active').children().stop().fadeTo(400, 0.6); + }); + + if ( e.index === this.getIndex() ) { + $(e.thumbTarget).css('opacity',1); + } + } else { + $(e.thumbTarget).css('opacity', this.getIndex() ? 1 : 0.6); + } + }); + + this.bind('loadstart', function(e) { + if (!e.cached) { + this.$('loader').show().fadeTo(200, 0.4); + } + + this.$('info').toggle( this.hasInfo() ); + + $(e.thumbTarget).css('opacity',1).parent().siblings().children().css('opacity', 0.6); + }); + + this.bind('loadfinish', function(e) { + this.$('loader').fadeOut(200); + }); + } +}); + +}(jQuery)); diff --git a/src/themes/vertical/vertical-map.png b/src/themes/vertical/vertical-map.png new file mode 100644 index 00000000..118416c2 Binary files /dev/null and b/src/themes/vertical/vertical-map.png differ diff --git a/src/themes/vertical/vertical.html b/src/themes/vertical/vertical.html new file mode 100644 index 00000000..a50285bd --- /dev/null +++ b/src/themes/vertical/vertical.html @@ -0,0 +1,98 @@ + + + + + Galleria Vertical Theme + + + + + + + + + + +
+

Galleria Vertical Theme

+

Demonstrating a basic gallery example.

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Made by Galleria.

+
+ + + +