Skip to content

Add left and right scroll on preview pane #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add left and right scroll on preview pane #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions css/component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -90,7 +100,7 @@
width: 50%;
float: left;
height: 100%;
overflow: hidden;
overflow: scroll;
position: relative;
}

Expand Down Expand Up @@ -191,5 +201,5 @@

.og-fullimg { display: none; }
.og-details { float: none; width: 100%; }
}

}
37 changes: 29 additions & 8 deletions css/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -111,4 +132,4 @@ a {
.codrops-top span.right a {
float: left;
display: block;
}
}
21 changes: 14 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,22 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Grid with Expanding Preview</title>
<meta name="description" content="Thumbnail Grid with Expanding Preview" />
<meta name="keywords" content="thumbnails, grid, preview, google image search, jquery, image grid, expanding, preview, portfolio" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/HexaFlip/"><strong>&laquo; Previous Demo: </strong>HexaFlip</a>
Expand All @@ -24,13 +27,17 @@
</span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Thumbnail Grid <span>with Expanding Preview</span></h1>
<h1>Thumbnail Grid <span>with Expanding Preview</span></h1>
</header>
<div class="main">
<ul id="og-grid" class="og-grid">
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="images/thumbs/1.jpg" alt="img01"/>
<div class="image-container">
<img src="images/thumbs/1.jpg" alt="img01"/>
<h2></h2>
<p></p>
</div>
</a>
</li>
<li>
Expand Down Expand Up @@ -241,4 +248,4 @@ <h1>Thumbnail Grid <span>with Expanding Preview</span></h1>
});
</script>
</body>
</html>
</html>
49 changes: 33 additions & 16 deletions js/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -199,7 +202,7 @@ var Grid = (function() {
};

function init( config ) {

// the settings..
settings = $.extend( true, {}, settings, config );
// preload all images
Expand Down Expand Up @@ -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
Expand All @@ -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() {
Expand Down Expand Up @@ -313,7 +328,7 @@ var Grid = (function() {
preview.update( $item );
return false;
}

}

// update previewPos
Expand All @@ -326,6 +341,7 @@ var Grid = (function() {
}

function hidePreview() {

current = -1;
var preview = $.data( this, 'preview' );
preview.close();
Expand Down Expand Up @@ -354,7 +370,9 @@ var Grid = (function() {
this.$loading = $( '<div class="og-loading"></div>' );
this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
this.$closePreview = $( '<span class="og-close"></span>' );
this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
this.$nextPreview = $("<div><a><span class='glyphicon glyphicon-menu-right'></span></a></div>");
this.$previousPreview = $('<div><a><span class="glyphicon glyphicon-menu-left"></span></a></div>');
this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details, this.$nextPreview, this.$previousPreview );
this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
// append preview element to the item
this.$item.append( this.getEl() );
Expand All @@ -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 );
Expand Down Expand Up @@ -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();
Expand All @@ -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
Expand Down Expand Up @@ -455,7 +473,7 @@ var Grid = (function() {
}

}, this ), 25 );

return false;

},
Expand Down Expand Up @@ -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 );

},
Expand All @@ -514,9 +532,8 @@ var Grid = (function() {
}
}

return {
return {
init : init,
addItems : addItems
};

})();
})();