Permalink
Browse files

Improved support for dialog effects.

  • Loading branch information...
1 parent 9c7efcd commit 093f86f52a9a98d59b55b14d7535cb71ba22b105 @blueimp committed May 22, 2011
Showing with 398 additions and 204 deletions.
  1. +7 −5 README.md
  2. +7 −5 README.txt
  3. +8 −3 application.js
  4. +13 −1 index.html
  5. +25 −4 jquery.image-gallery.css
  6. +338 −186 jquery.image-gallery.js
View
@@ -17,17 +17,19 @@ jQuery UI dialog initialization and allows to set any dialog options:
$('a[rel=gallery]').imagegallery({
open: function (event, ui) {/* called on dialogopen */},
title: 'Image Gallery', // Sets the dialog title
+ show: 'scale', // The effect to be used when the dialog is opened
+ hide: 'explode', // The effect to be used when the dialog is closed
offsetWidth: 50, // Offset of image width to viewport width
offsetHeight: 50, // Offset of image height to viewport height
slideshow: 5000, // Shows the next image after 5000 ms
- fullscreen: true, // Displays images fullscreen
- canvas: true, // Displays images as canvas element
+ fullscreen: true, // Displays images fullscreen (overrides offsets)
+ canvas: true, // Displays images as canvas elements
namespace: 'myimagegallery' // event handler namespace
});
-offsetWidth, offsetHeight, slideshow, fullscreen, canvas and
-namespace are imagegallery specific options, while open and title are
-jQuery UI dialog options.
+offsetWidth, offsetHeight, slideshow, fullscreen, canvas and namespace
+are imagegallery specific options, while open, title, show and hide
+are jQuery UI dialog options.
The click event listeners can be removed by calling the imagegallery
method with "destroy" as first argument, using the same selector for
View
@@ -20,17 +20,19 @@ jQuery UI dialog initialization and allows to set any dialog options:
$('a[rel=gallery]').imagegallery({
open: function (event, ui) {/* called on dialogopen */},
title: 'Image Gallery', // Sets the dialog title
+ show: 'scale', // The effect to be used when the dialog is opened
+ hide: 'explode', // The effect to be used when the dialog is closed
offsetWidth: 50, // Offset of image width to viewport width
offsetHeight: 50, // Offset of image height to viewport height
slideshow: 5000, // Shows the next image after 5000 ms
- fullscreen: true, // Displays images fullscreen
- canvas: true, // Displays images as canvas element
+ fullscreen: true, // Displays images fullscreen (overrides offsets)
+ canvas: true, // Displays images as canvas elements
namespace: 'myimagegallery' // event handler namespace
});
-offsetWidth, offsetHeight, slideshow, fullscreen, canvas and
-namespace are imagegallery specific options, while open and title are
-jQuery UI dialog options.
+offsetWidth, offsetHeight, slideshow, fullscreen, canvas and namespace
+are imagegallery specific options, while open, title, show and hide
+are jQuery UI dialog options.
The click event listeners can be removed by calling the imagegallery
method with "destroy" as first argument, using the same selector for
View
@@ -1,5 +1,5 @@
/*
- * jQuery Image Gallery Plugin JS Example 1.1.2
+ * jQuery Image Gallery Plugin JS Example 1.3
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -28,10 +28,15 @@ $(function () {
);
});
- // Initialize the options checkboxes:
- $('#buttonset').buttonset().find('input').change(function () {
+ // Create a buttonset out of the checkbox options:
+ $('#buttonset').buttonset();
+
+ // Listen to options changes:
+ $('#buttonset input, #effect').change(function () {
$('a[rel="gallery"]').imagegallery('destroy');
$('a[rel="gallery"]').imagegallery({
+ show: $('#effect').val(),
+ hide: $('#effect').val(),
fullscreen: $('#option-fullscreen').is(':checked'),
slideshow: $('#option-slideshow').is(':checked') && 5000
});
View
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<!--
/*
- * jQuery Image Gallery Plugin HTML Example 1.1.1
+ * jQuery Image Gallery Plugin HTML Example 1.3
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -50,6 +50,18 @@
<option value="ui-lightness">UI Lightness</option>
<option value="vader">Vader</option>
</select>
+ <select id="effect">
+ <option>blind</option>
+ <option>clip</option>
+ <option>drop</option>
+ <option>explode</option>
+ <option selected>fade</option>
+ <option>fold</option>
+ <option>puff</option>
+ <option>random</option>
+ <option>slide</option>
+ <option>scale</option>
+ </select>
<span id="buttonset">
<input type="checkbox" id="option-fullscreen"><label for="option-fullscreen">Fullscreen</label>
<input type="checkbox" id="option-slideshow"><label for="option-slideshow">Slideshow</label>
View
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * jQuery Image Gallery Plugin CSS 1.1.1
+ * jQuery Image Gallery Plugin CSS 1.3
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -10,7 +10,9 @@
* http://creativecommons.org/licenses/MIT/
*/
-.gallery-loader {
+/* The loading animation: */
+.gallery-dialog-loader,
+.gallery-dialog-fullscreen-loader {
position: fixed;
top: 50%;
left: 50%;
@@ -20,19 +22,22 @@
background: url(loading.gif);
}
-/* IE 6: */
-*html .gallery-loader {
+/* Fix for IE 6: */
+*html .gallery-loader,
+*html .gallery-dialog-fullscreen-loader {
position: absolute;
}
.gallery-dialog .ui-dialog-content {
text-align: center;
+ cursor: pointer;
}
.gallery-dialog .ui-dialog-content img {
border: 0;
}
+/* Full screen styles: */
.gallery-dialog-fullscreen {
padding: 0;
border: 0;
@@ -49,14 +54,30 @@
.gallery-dialog-fullscreen .ui-dialog-content {
padding: 0;
border: 0;
+ cursor: pointer;
}
.gallery-dialog-fullscreen .ui-dialog-content img,
.gallery-dialog-fullscreen .ui-dialog-content canvas {
float: left;
+ border: 0;
}
.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: 9999!important;
+}
+
+/* Fix for scrollbars showing with some effects: */
+.gallery-body,
+.gallery-body-fullscreen {
+ overflow: hidden;
}
Oops, something went wrong.

0 comments on commit 093f86f

Please sign in to comment.