diff --git a/css/component.css b/css/component.css index 8f21f49..acee043 100755 --- a/css/component.css +++ b/css/component.css @@ -47,6 +47,16 @@ overflow: hidden; } +.glyphicon.glyphicon-menu-left, .glyphicon.glyphicon-menu-right{ + top: -210px; + font-size: 250%; + color: black; + } + +.glyphicon-menu-right{ + float:right; +} + .og-expander-inner { padding: 50px 30px; height: 100%; @@ -90,7 +100,7 @@ width: 50%; float: left; height: 100%; - overflow: hidden; + overflow: scroll; position: relative; } @@ -191,5 +201,5 @@ .og-fullimg { display: none; } .og-details { float: none; width: 100%; } - -} \ No newline at end of file + +} diff --git a/css/default.css b/css/default.css index d5e857d..97b4cb6 100755 --- a/css/default.css +++ b/css/default.css @@ -28,14 +28,35 @@ html { height: 100%; } *zoom: 1; } +.image{ + position: relative; + width: 100%; +} + +.image-container h2{ + position: absolute; + top: 150px; + left: 0; + width: 100%; + color: white; +} + +.image-container p{ + position: absolute; + top: 200px; + left: 0; + width: 100%; + color: white; +} + body { - font-family: 'Lato', Calibri, Arial, sans-serif; - background: #f9f9f9; - font-weight: 300; - font-size: 15px; - color: #333; - overflow: scroll; - overflow-x: hidden; + font-family: 'Lato', Calibri, Arial, sans-serif; + background: #f9f9f9; + font-weight: 300; + font-size: 15px; + color: #333; + overflow: scroll; + overflow-x: hidden; } a { @@ -111,4 +132,4 @@ a { .codrops-top span.right a { float: left; display: block; -} \ No newline at end of file +} diff --git a/index.html b/index.html index abf2ac5..2dcf7ec 100755 --- a/index.html +++ b/index.html @@ -2,19 +2,22 @@ - - + + Thumbnail Grid with Expanding Preview - + + + + -
+
« Previous Demo: HexaFlip @@ -24,13 +27,17 @@
-

Thumbnail Grid with Expanding Preview

+

Thumbnail Grid with Expanding Preview

  • - img01 +
    + img01 +

    +

    +
  • @@ -241,4 +248,4 @@

    Thumbnail Grid with Expanding Preview

    }); - \ No newline at end of file + diff --git a/js/grid.js b/js/grid.js index 21d5fd4..68b83b9 100755 --- a/js/grid.js +++ b/js/grid.js @@ -163,12 +163,15 @@ $.fn.imagesLoaded = function( callback ) { var Grid = (function() { // grid selector - var $selector = '#og-grid', + var $selector = '#og-grid', // list of items $grid = $( $selector ), // the items $items = $grid.children( 'li' ), // current expanded item's index + + $itemsArrows = $grid.children( 'li .glyphicon' ), + current = -1, // position (top) of the expanded item // used to know if the preview will expand in a different row @@ -199,7 +202,7 @@ var Grid = (function() { }; function init( config ) { - + // the settings.. settings = $.extend( true, {}, settings, config ); // preload all images @@ -247,16 +250,16 @@ var Grid = (function() { } function initEvents() { - + // when clicking an item, show the preview with the item´s info and large image. // close the item if already expanded. // also close if clicking on the item´s cross initItemsEvents( $items ); - + // on window resize get the window´s size again // reset some values.. $window.on( 'debouncedresize', function() { - + scrollExtra = 0; previewPos = -1; // save item´s offset @@ -283,6 +286,18 @@ var Grid = (function() { return false; } ); + // Find previous item and show that + $items.on( 'click', 'span.glyphicon-menu-left', function() { + var $item = $(this).closest('li').prev(); + hidePreview(); + showPreview($item); + } ); + // Find next item and show that + $items.on( 'click', 'span.glyphicon-menu-right', function() { + var $item = $(this).closest('li').next(); + hidePreview(); + showPreview($item); + }) ; } function getWinSize() { @@ -313,7 +328,7 @@ var Grid = (function() { preview.update( $item ); return false; } - + } // update previewPos @@ -326,6 +341,7 @@ var Grid = (function() { } function hidePreview() { + current = -1; var preview = $.data( this, 'preview' ); preview.close(); @@ -354,7 +370,9 @@ var Grid = (function() { this.$loading = $( '
    ' ); this.$fullimage = $( '
    ' ).append( this.$loading ); this.$closePreview = $( '' ); - this.$previewInner = $( '
    ' ).append( this.$closePreview, this.$fullimage, this.$details ); + this.$nextPreview = $("
    "); + this.$previousPreview = $('
    '); + this.$previewInner = $( '
    ' ).append( this.$closePreview, this.$fullimage, this.$details, this.$nextPreview, this.$previousPreview ); this.$previewEl = $( '
    ' ).append( this.$previewInner ); // append preview element to the item this.$item.append( this.getEl() ); @@ -368,7 +386,7 @@ var Grid = (function() { if( $item ) { this.$item = $item; } - + // if already expanded remove class "og-expanded" from current item and add it to new item if( current !== -1 ) { var $currentItem = $items.eq( current ); @@ -397,7 +415,7 @@ var Grid = (function() { } var self = this; - + // remove the current image in the preview if( typeof self.$largeImg != 'undefined' ) { self.$largeImg.remove(); @@ -415,13 +433,13 @@ var Grid = (function() { self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); } - } ).attr( 'src', eldata.largesrc ); + } ).attr( 'src', eldata.largesrc ); } }, open : function() { - setTimeout( $.proxy( function() { + setTimeout( $.proxy( function() { // set the height for the preview and the item this.setHeights(); // scroll to position the preview in the right place @@ -455,7 +473,7 @@ var Grid = (function() { } }, this ), 25 ); - + return false; }, @@ -501,7 +519,7 @@ var Grid = (function() { var position = this.$item.data( 'offsetTop' ), previewOffsetT = this.$previewEl.offset().top - scrollExtra, scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT; - + $body.animate( { scrollTop : scrollVal }, settings.speed ); }, @@ -514,9 +532,8 @@ var Grid = (function() { } } - return { + return { init : init, addItems : addItems }; - -})(); \ No newline at end of file +})();