Permalink
Browse files

Added fullscreen option.

  • Loading branch information...
1 parent ca54d21 commit 94f32acf1f9dc6195eb9d3908e881d0cc4830166 @blueimp committed May 20, 2011
Showing with 195 additions and 135 deletions.
  1. +4 −3 README.md
  2. +4 −3 README.txt
  3. +12 −3 application.js
  4. +35 −29 index.html
  5. +35 −3 jquery.image-gallery.css
  6. +93 −60 jquery.image-gallery.js
  7. +12 −34 style.css
View
7 README.md
@@ -20,13 +20,14 @@ jQuery UI dialog initialization and allows to set any dialog options:
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
namespace: 'myimagegallery' // event handler namespace
});
-offsetWidth, offsetHeight, canvas, slideshow 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 and title 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
7 README.txt
@@ -23,13 +23,14 @@ jQuery UI dialog initialization and allows to set any dialog options:
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
namespace: 'myimagegallery' // event handler namespace
});
-offsetWidth, offsetHeight, canvas, slideshow 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 and title 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
15 application.js
@@ -1,5 +1,5 @@
/*
- * jQuery Image Gallery Plugin JS Example 1.0
+ * jQuery Image Gallery Plugin JS Example 1.1
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -13,7 +13,6 @@
/*global $ */
$(function () {
-
// Initialize the Image Gallery plugin:
$('a[rel="gallery"]').imagegallery();
@@ -28,6 +27,16 @@ $(function () {
)
);
});
+
+ // Initialize the options checkboxes:
+ $('#options').buttonset();
+ $('#options input').change(function () {
+ $('a[rel="gallery"]').imagegallery('destroy');
+ $('a[rel="gallery"]').imagegallery({
+ fullscreen: $('#option-fullscreen').is(':checked'),
+ slideshow: $(this).is(':checked') && 5000
+ });
+ });
// Load images via flickr for demonstration purposes:
$.ajax({
@@ -47,7 +56,7 @@ $(function () {
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)
- .appendTo('body');
+ .appendTo('#demo');
});
}
});
View
64 index.html
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<!--
/*
- * jQuery Image Gallery Plugin HTML Example 1.0
+ * jQuery Image Gallery Plugin HTML Example 1.1
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -20,34 +20,40 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
-<a href="http://github.com/blueimp/jQuery-Image-Gallery"><img style="position: absolute; top: 0; right: 0; border: 0;" src="forkme.png" alt="Fork me on GitHub" /></a>
-<select id="theme-switcher">
- <option value="base">Base</option>
- <option value="black-tie">Black Tie</option>
- <option value="blitzer">Blitzer</option>
- <option value="cupertino">Cupertino</option>
- <option value="dark-hive">Dark Hive</option>
- <option value="dot-luv">Dot Luv</option>
- <option value="eggplant">Eggplant</option>
- <option value="excite-bike">Excite Bike</option>
- <option value="flick">Flick</option>
- <option value="hot-sneaks">Hot sneaks</option>
- <option value="humanity">Humanity</option>
- <option value="le-frog">Le Frog</option>
- <option value="mint-choc">Mint Choc</option>
- <option value="overcast">Overcast</option>
- <option value="pepper-grinder">Pepper Grinder</option>
- <option value="redmond">Redmond</option>
- <option value="smoothness">Smoothness</option>
- <option value="south-street" selected>South Street</option>
- <option value="start">Start</option>
- <option value="sunny">Sunny</option>
- <option value="swanky-purse">Swanky Purse</option>
- <option value="trontastic">Trontastic</option>
- <option value="ui-darkness">UI Darkness</option>
- <option value="ui-lightness">UI Lightness</option>
- <option value="vader">Vader</option>
-</select>
+<div id="demo">
+ <a href="http://github.com/blueimp/jQuery-Image-Gallery"><img style="position: absolute; top: 0; right: 0; border: 0;" src="forkme.png" alt="Fork me on GitHub" /></a>
+ <div id="options">
+ <select id="theme-switcher">
+ <option value="base">Base</option>
+ <option value="black-tie">Black Tie</option>
+ <option value="blitzer">Blitzer</option>
+ <option value="cupertino">Cupertino</option>
+ <option value="dark-hive">Dark Hive</option>
+ <option value="dot-luv">Dot Luv</option>
+ <option value="eggplant">Eggplant</option>
+ <option value="excite-bike">Excite Bike</option>
+ <option value="flick">Flick</option>
+ <option value="hot-sneaks">Hot sneaks</option>
+ <option value="humanity">Humanity</option>
+ <option value="le-frog">Le Frog</option>
+ <option value="mint-choc">Mint Choc</option>
+ <option value="overcast">Overcast</option>
+ <option value="pepper-grinder">Pepper Grinder</option>
+ <option value="redmond">Redmond</option>
+ <option value="smoothness">Smoothness</option>
+ <option value="south-street" selected>South Street</option>
+ <option value="start">Start</option>
+ <option value="sunny">Sunny</option>
+ <option value="swanky-purse">Swanky Purse</option>
+ <option value="trontastic">Trontastic</option>
+ <option value="ui-darkness">UI Darkness</option>
+ <option value="ui-lightness">UI Lightness</option>
+ <option value="vader">Vader</option>
+ </select>
+ <input type="checkbox" id="option-fullscreen"><label for="option-fullscreen">Fullscreen</label>
+ <input type="checkbox" id="option-slideshow"><label for="option-slideshow">Slideshow</label>
+ </div>
+</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="jquery.image-gallery.js"></script>
View
38 jquery.image-gallery.css
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * jQuery Image Gallery Plugin CSS 1.0
+ * jQuery Image Gallery Plugin CSS 1.1
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -10,7 +10,7 @@
* http://creativecommons.org/licenses/MIT/
*/
-.gallery-dialog-loader {
+.gallery-loader {
position: fixed;
top: 50%;
left: 50%;
@@ -21,10 +21,42 @@
}
/* IE 6: */
-*html .gallery-dialog-loader {
+*html .gallery-loader {
position: absolute;
}
.gallery-dialog .ui-dialog-content {
text-align: center;
+}
+
+.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;
+}
+
+.gallery-dialog-fullscreen .ui-dialog-content {
+ padding: 0;
+ border: 0;
+}
+
+.gallery-dialog-fullscreen .ui-dialog-content img,
+.gallery-dialog-fullscreen .ui-dialog-content canvas {
+ float: left;
+}
+
+.gallery-fullscreen .ui-widget-overlay {
+ opacity: 1;
+ filter: alpha(opacity=100);
}
View
153 jquery.image-gallery.js
@@ -1,5 +1,5 @@
/*
- * jQuery Image Gallery Plugin 1.1
+ * jQuery Image Gallery Plugin 1.2
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -9,49 +9,56 @@
* http://creativecommons.org/licenses/MIT/
*/
+/*
+ * The Image Gallery plugin makes use of jQuery's live method to attach
+ * a click handler to all elements that match the selector of the given
+ * jQuery collection, now and in the future:
+ *
+ * $('a[rel=gallery]').imagegallery();
+ *
+ * The click handler opens the linked images in a jQuery UI dialog.
+ * The options object given to the imagegallery method is passed to the
+ * 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
+ * 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
+ * namespace: 'myimagegallery' // event handler namespace
+ * });
+ *
+ * offsetWidth, offsetHeight, canvas, slideshow and namespace are
+ * imagegallery specific options, while open and title 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
+ * the jQuery collection and the same namespace:
+ *
+ * $('a[rel=gallery]').imagegallery('destroy', {namespace: 'ns'});
+ *
+ * To directly open an image with gallery functionality, the imagegallery
+ * method can be called with "open" as first argument:
+ *
+ * $('a:last').imagegallery('open', {selector: 'a[rel=gallery]'});
+ *
+ * The selector for related images can be overriden with the "selector"
+ * option.
+ */
+
/*global jQuery, window, document, setTimeout, clearTimeout */
(function ($) {
'use strict';
- // The Image Gallery plugin makes use of jQuery's live method to attach
- // a click handler to all elements that match the selector of the given
- // jQuery collection, now and in the future:
- //
- // $('a[rel=gallery]').imagegallery();
- //
- // The click handler opens the linked images in a jQuery UI dialog.
- // The options object given to the imagegallery method is passed to the
- // 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
- // 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
- // canvas: true, // Displays images as canvas element
- // namespace: 'myimagegallery' // event handler namespace
- // });
- //
- // offsetWidth, offsetHeight, canvas, slideshow and namespace are
- // imagegallery specific options, while open and title 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
- // the jQuery collection and the same namespace:
- //
- // $('a[rel=gallery]').imagegallery('destroy', {namespace: 'ns'});
- //
- // To directly open an image with gallery functionality, the imagegallery
- // method can be called with "open" as first argument:
- //
- // $('a:last').imagegallery('open', {selector: 'a[rel=gallery]'});
- //
- // The selector for related images can be overriden with the "selector"
- // option.
-
+ // Adds the imagegallery method to the jQuery object.
+ // Adds a live click handler with the selector of the jQuery collection,
+ // removes the live handler when called with "destroy" as first argument,
+ // and directly opens the first image when called with "open" as argument:
$.fn.imagegallery = function (options, opts) {
opts = $.extend({
namespace: 'imagegallery',
@@ -73,21 +80,25 @@
return this;
};
- // Scales the given image (img HTML element) using the given arguments.
- // Returns a canvas object if useCanvas is true and the browser supports
- // canvas, else the scaled image:
- $.fn.imagegallery.scale = function (img, maxWidth, maxHeight, useCanvas) {
+ // Scales the given image (img HTML element) using the given options.
+ // Returns a canvas object if the canvas option is true and the
+ // browser supports canvas, else the scaled image:
+ $.fn.imagegallery.scale = function (img, options) {
+ options = options || {};
var canvas = document.createElement('canvas'),
scale = Math.min(
- (maxWidth || img.width) / img.width,
- (maxHeight || img.height) / img.height
+ (options.maxWidth || img.width) / img.width,
+ (options.maxHeight || img.height) / img.height
+ );
+ if (scale >= 1) {
+ scale = Math.max(
+ (options.minWidth || img.width) / img.width,
+ (options.minHeight || img.height) / img.height
);
- if (scale > 1) {
- scale = 1;
}
img.width = parseInt(img.width * scale, 10);
img.height = parseInt(img.height * scale, 10);
- if (!useCanvas || !canvas.getContext) {
+ if (!options.canvas || !canvas.getContext) {
return img;
}
canvas.width = img.width;
@@ -102,7 +113,7 @@
$.fn.imagegallery.open = function (link, options) {
link = link instanceof $ ? link[0] : link;
var rel = link.rel || 'gallery',
- className = rel.replace(/\W/g, '-') + '-dialog',
+ className = rel.replace(/\W/g, ''),
links = $((options && options.selector) || 'a[rel="' + rel + '"]'),
prevLink,
nextLink,
@@ -111,21 +122,28 @@
loader = $('<div class="' + className + '-loader"></div>')
.hide()
.appendTo($('.ui-widget-overlay:last')[0] || 'body')
- .fadeIn();
+ .fadeIn(),
+ bodyClass = className + '-body';
options = $.extend({
namespace: 'imagegallery',
+ offsetWidth: 100,
+ offsetHeight: 100,
modal: true,
resizable: false,
width: 'auto',
height: 'auto',
show: 'fade',
hide: 'fade',
- offsetWidth: 100,
- offsetHeight: 100,
title: link.title ||
decodeURIComponent(link.href.split('/').pop()),
- dialogClass: className
+ dialogClass: className + '-dialog'
}, options);
+ if (options.fullscreen) {
+ options.offsetWidth = 0;
+ options.offsetHeight = 0;
+ options.dialogClass = className + '-dialog-fullscreen';
+ bodyClass += '-fullscreen';
+ }
links.each(function (index) {
// Check the next and next but one link, to account for
// thumbnail and name linking twice to the same image:
@@ -190,16 +208,26 @@
);
},
slideShow,
- scaledImage;
- if (e.type === 'error') {
scaledImage = this;
+ if (e.type === 'error') {
dialog.addClass('ui-state-error');
} else {
+ if (options.fullscreen) {
+ scaledImage = $.fn.imagegallery.scale(
+ scaledImage,
+ {
+ minWidth: $(window).width(),
+ minHeight: $(window).height()
+ }
+ );
+ }
scaledImage = $.fn.imagegallery.scale(
- this,
- $(window).width() - options.offsetWidth,
- $(window).height() - options.offsetHeight,
- options.canvas
+ scaledImage,
+ {
+ maxWidth: $(window).width() - options.offsetWidth,
+ maxHeight: $(window).height() - options.offsetHeight,
+ canvas: options.canvas
+ }
);
}
$(document).bind(
@@ -230,12 +258,17 @@
}
},
dialogopen: function () {
+ $('body').addClass(bodyClass);
+ $('.ui-widget-overlay:last')
+ .click(closeDialog);
if (typeof options.callback === 'function') {
options.callback();
}
- $('.ui-widget-overlay:last').click(closeDialog);
},
dialogclose: function () {
+ if ($('.' + options.dialogClass).length < 2) {
+ $('body').removeClass(bodyClass);
+ }
clearTimeout(slideShow);
$(this).remove();
}
View
46 style.css
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * jQuery Image Gallery Plugin CSS Example 1.0
+ * jQuery Image Gallery Plugin CSS Example 1.1
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -10,42 +10,20 @@
* http://creativecommons.org/licenses/MIT/
*/
-body {
- padding: 60px 40px;
+html, body {
+ height: 100%;
+ margin: 0;
background: #222;
color: #fff;
- font-size: 13px;
+ font-family: Verdana,Arial,sans-serif;
+ font-size: 14px;
}
-#theme-switcher {
- position: absolute;
- top: 20px;
-}
-
-/*
- * Uncomment the following style definitions
- * for an example gallery dialog customization.
- */
-
-/*
-.gallery-dialog {
- border: 0;
- padding: 0;
- -webkit-box-shadow: 0 0 20px #000;
- -moz-box-shadow: 0 0 20px #000;
- box-shadow: 0 0 20px #000;
+#demo {
+ padding: 90px 60px;
}
-.gallery-dialog .ui-dialog-titlebar {
- display: none;
-}
-
-.gallery-dialog .ui-dialog-content {
- padding: 0;
- border: 0;
-}
-
-.gallery-dialog .ui-dialog-content img {
- float: left;
-}
-*/
+#options {
+ position: absolute;
+ top: 30px;
+}

0 comments on commit 94f32ac

Please sign in to comment.