Permalink
Browse files

Load previous images for clicks on the left part of the image.

The option imageClickDivision defines the percentage of the image that
is used to load previous images on click.
Added hover icons indicating that previous/next images can be loaded on
click.
Closes #9.
  • Loading branch information...
1 parent 1c83c72 commit df21f1222400c1c92d3ed2d78ff661e607c4dc13 @blueimp committed Apr 5, 2012
Showing with 49 additions and 17 deletions.
  1. +33 −13 css/jquery.image-gallery.css
  2. +3 −0 css/jquery.image-gallery.min.css
  3. +12 −3 js/jquery.image-gallery.js
  4. +1 −1 js/jquery.image-gallery.min.js
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * jQuery Image Gallery Plugin CSS 2.2
+ * jQuery Image Gallery Plugin CSS 2.3
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -21,21 +21,49 @@
background: url(../img/loading.gif);
z-index: 9999;
}
-
/* Fix for IE 6 which does not support position:fixed: */
*html #gallery-loader {
position: absolute;
}
-
.gallery-dialog .ui-dialog-content {
cursor: pointer;
text-align: center;
}
-
+.gallery-dialog .ui-dialog-content:hover:before,
+.gallery-dialog .ui-dialog-content:hover:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 25px;
+ width: 40px;
+ height: 40px;
+ margin-top: -20px;
+ font-size: 60px;
+ font-weight: 100;
+ line-height: 30px;
+ color: #ffffff;
+ text-align: center;
+ background: #222222;
+ border: 3px solid #ffffff;
+ -webkit-border-radius: 23px;
+ -moz-border-radius: 23px;
+ border-radius: 23px;
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+ z-index: 1;
+}
+.gallery-dialog .ui-dialog-content:hover:after {
+ content: '';
+ left: auto;
+ right: 25px;
+}
+.gallery-dialog-single .ui-dialog-content:hover:before,
+.gallery-dialog-single .ui-dialog-content:hover:after {
+ display: none;
+}
.gallery-dialog .ui-dialog-content img {
border: 0;
}
-
/* Full screen styles: */
.gallery-dialog-fullscreen {
padding: 0;
@@ -45,48 +73,40 @@
-moz-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
}
-
.gallery-dialog-fullscreen .ui-dialog-titlebar {
display: none;
}
-
.gallery-dialog-fullscreen .ui-dialog-content {
padding: 0;
border: 0;
cursor: pointer;
text-align: center;
}
-
.gallery-dialog-fullscreen .ui-dialog-content img,
.gallery-dialog-fullscreen .ui-dialog-content canvas {
float: left;
border: 0;
}
-
/* Fix for IE 6 which shows a full width dialog: */
*html .gallery-dialog-fullscreen .ui-dialog-content img {
float: none;
}
-
.gallery-body-fullscreen .ui-widget-overlay {
opacity: 1;
filter: alpha(opacity=100);
}
-
/* Fix for overlay hiding the dialog effects: */
.gallery-body .ui-effects-explode,
.gallery-body .ui-effects-wrapper,
.gallery-body-fullscreen .ui-effects-wrapper,
.gallery-body-fullscreen .ui-effects-explode {
z-index: 10000!important;
}
-
/* Fix for scrollbars showing with some effects: */
.gallery-body,
.gallery-body-fullscreen {
overflow: hidden;
}
-
/* Fix for IE 6 showing select boxes on top: */
*html .gallery-body select,
*html .gallery-body-fullscreen select {
@@ -2,6 +2,9 @@
#gallery-loader{position:fixed;top:50%;left:50%;width:128px;height:128px;margin:-64px 0 0 -64px;background:url(../img/loading.gif);z-index:9999;}
*html #gallery-loader{position:absolute;}
.gallery-dialog .ui-dialog-content{cursor:pointer;text-align:center;}
+.gallery-dialog .ui-dialog-content:hover:before,.gallery-dialog .ui-dialog-content:hover:after{content:'';position:absolute;top:50%;left:25px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ffffff;text-align:center;background:#222222;border:3px solid #ffffff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:0.5;filter:alpha(opacity=50);z-index:1;}
+.gallery-dialog .ui-dialog-content:hover:after{content:'';left:auto;right:25px;}
+.gallery-dialog-single .ui-dialog-content:hover:before,.gallery-dialog-single .ui-dialog-content:hover:after{display:none;}
.gallery-dialog .ui-dialog-content img{border:0;}
.gallery-dialog-fullscreen{padding:0;border:0;border-radius:0;-webkit-box-shadow:0 0 20px #000;-moz-box-shadow:0 0 20px #000;box-shadow:0 0 20px #000;}
.gallery-dialog-fullscreen .ui-dialog-titlebar{display:none;}
View
@@ -1,5 +1,5 @@
/*
- * jQuery Image Gallery Plugin 2.3
+ * jQuery Image Gallery Plugin 2.4
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -54,6 +54,8 @@
fullscreen: false,
// Display images as canvas elements:
canvas: false,
+ // Defines the image division for previous/next clicks:
+ imageClickDivision: 0.5,
// body class added on dialog display:
bodyClass: 'gallery-body',
// element id of the loading animation:
@@ -150,8 +152,10 @@
},
_clickHandler: function (e) {
- var that = e.data.imagegallery;
- if (e.altKey) {
+ var that = e.data.imagegallery,
+ dialog = that._dialog;
+ if ((e.pageX - dialog.offset().left) / dialog.width() <
+ that.options.imageClickDivision) {
that._prev();
} else {
that._next();
@@ -285,6 +289,11 @@
this._dialog
.append(img)
.appendTo(document.body)
+ .toggleClass(
+ 'gallery-dialog-single',
+ this._prevLink === this._link &&
+ this._nextLink === this._link
+ )
.dialog(options);
},

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit df21f12

Please sign in to comment.