Skip to content
Browse files

Initial commit.

  • Loading branch information...
0 parents commit 877760ad057129108fe46bd1f62d6f577e6083f1 @blueimp committed
Showing with 561 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +54 −0 README.md
  3. +60 −0 README.txt
  4. +55 −0 application.js
  5. BIN forkme.png
  6. +56 −0 index.html
  7. +30 −0 jquery.image-gallery.css
  8. +254 −0 jquery.image-gallery.js
  9. BIN loading.gif
  10. +51 −0 style.css
1 .gitignore
@@ -0,0 +1 @@
+.DS_Store
54 README.md
@@ -0,0 +1,54 @@
+# jQuery Image Gallery Plugin
+
+## Demo
+[jQuery Image Gallery](http://blueimp.github.com/jQuery-Image-Gallery/)
+
+## Description & Usage
+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: 50000, // 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.
+
+## Requirements
+* [jQuery](http://jquery.com/) v. 1.4+
+* [jQuery UI](http://jqueryui.com/) v. 1.8+ (Required: Dialog)
+
+## License
+Released under the [MIT license](http://creativecommons.org/licenses/MIT/).
+
+## Source Code & Download
+* Browse and checkout the [source code](https://github.com/blueimp/jQuery-Image-Gallery).
+* [Download](https://github.com/blueimp/jQuery-Image-Gallery/archives/master) the project to add the plugin to your website.
60 README.txt
@@ -0,0 +1,60 @@
+jQuery Image Gallery Plugin
+===========================
+
+Demo
+----
+http://blueimp.github.com/jQuery-Image-Gallery/
+
+Description & Usage
+-------------------
+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: 50000, // 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.
+
+Requirements
+------------
+ - jQuery v. 1.4+
+ - jQuery UI v. 1.8+ (Required: Dialog)
+
+License
+-------
+Released under the MIT license:
+http://creativecommons.org/licenses/MIT/
+
+Source Code & Download
+----------------------
+https://github.com/blueimp/jQuery-Image-Gallery
55 application.js
@@ -0,0 +1,55 @@
+/*
+ * jQuery Image Gallery Plugin JS Example 1.0
+ * https://github.com/blueimp/jQuery-Image-Gallery
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+
+/*jslint regexp: false */
+/*global $ */
+
+$(function () {
+
+ // Initialize the Image Gallery plugin:
+ $('a[rel="gallery"]').imagegallery();
+
+ // Initialize the theme switcher:
+ $('#theme-switcher').change(function () {
+ var theme = $('#theme');
+ theme.prop(
+ 'href',
+ theme.prop('href').replace(
+ /[\w\-]+\/jquery-ui.css/,
+ $(this).val() + '/jquery-ui.css'
+ )
+ );
+ });
+
+ // Load images via flickr for demonstration purposes:
+ $.ajax({
+ url: 'http://api.flickr.com/services/rest/',
+ data: {
+ format: 'json',
+ method: 'flickr.interestingness.getList',
+ api_key: '7617adae70159d09ba78cfec73c13be3'
+ },
+ dataType: 'jsonp',
+ jsonp: 'jsoncallback',
+ success: function (data) {
+ $.each(data.photos.photo, function (index, photo) {
+ var url = 'http://farm' + photo.farm + '.static.flickr.com/' +
+ photo.server + '/' + photo.id + '_' + photo.secret;
+ $('<a rel="gallery"></a>')
+ .append($('<img>').prop('src', url + '_s.jpg'))
+ .prop('href', url + '_b.jpg')
+ .prop('title', photo.title)
+ .appendTo('body');
+ });
+ }
+ });
+
+});
BIN forkme.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<!--
+/*
+ * jQuery Image Gallery Plugin HTML Example 1.0
+ * https://github.com/blueimp/jQuery-Image-Gallery
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+-->
+<html lang="en" class="no-js">
+<head>
+<meta charset="utf-8">
+<title>jQuery Image Gallery Example</title>
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/south-street/jquery-ui.css" id="theme">
+<link rel="stylesheet" href="jquery.image-gallery.css">
+<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>
+<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>
+<script src="application.js"></script>
+</body>
+</html>
30 jquery.image-gallery.css
@@ -0,0 +1,30 @@
+@charset 'UTF-8';
+/*
+ * jQuery Image Gallery Plugin CSS 1.0
+ * https://github.com/blueimp/jQuery-Image-Gallery
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+
+.gallery-dialog-loader {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 32px;
+ height: 32px;
+ margin: -16px 0 0 -16px;
+ background: url(loading.gif);
+}
+
+/* IE 6: */
+*html .gallery-dialog-loader {
+ position: absolute;
+}
+
+.gallery-dialog .ui-dialog-content {
+ text-align: center;
+}
254 jquery.image-gallery.js
@@ -0,0 +1,254 @@
+/*
+ * jQuery Image Gallery Plugin 1.1
+ * https://github.com/blueimp/jQuery-Image-Gallery
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+
+/*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: 50000, // 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.
+
+ $.fn.imagegallery = function (options, opts) {
+ opts = $.extend({
+ namespace: 'imagegallery',
+ selector: $(this).selector
+ }, opts);
+ if (typeof options === 'string') {
+ if (options === 'destroy') {
+ $(opts.selector).die('click.' + opts.namespace);
+ } else if (options === 'open') {
+ $.fn.imagegallery.open(this, opts);
+ }
+ return this;
+ }
+ options = $.extend(opts, options);
+ $(options.selector).live('click.' + options.namespace, function (e) {
+ e.preventDefault();
+ $.fn.imagegallery.open(this, options);
+ });
+ 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) {
+ var canvas = document.createElement('canvas'),
+ scale = Math.min(
+ (maxWidth || img.width) / img.width,
+ (maxHeight || 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) {
+ return img;
+ }
+ canvas.width = img.width;
+ canvas.height = img.height;
+ canvas.getContext('2d')
+ .drawImage(img, 0, 0, img.width, img.height);
+ return canvas;
+ };
+
+ // Opens the image of the given link in a jQuery UI dialog
+ // and provides gallery functionality for related images:
+ $.fn.imagegallery.open = function (link, options) {
+ link = link instanceof $ ? link[0] : link;
+ var rel = link.rel || 'gallery',
+ className = rel.replace(/\W/g, '-') + '-dialog',
+ links = $((options && options.selector) || 'a[rel="' + rel + '"]'),
+ prevLink,
+ nextLink,
+ // The loader is displayed until the image has loaded
+ // and the dialog has been opened:
+ loader = $('<div class="' + className + '-loader"></div>')
+ .hide()
+ .appendTo($('.ui-widget-overlay:last')[0] || 'body')
+ .fadeIn();
+ options = $.extend({
+ namespace: 'imagegallery',
+ 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
+ }, options);
+ links.each(function (index) {
+ // Check the next and next but one link, to account for
+ // thumbnail and name linking twice to the same image:
+ if ((links[index + 1] === link || links[index + 2] === link) &&
+ this.href !== link.href) {
+ prevLink = this;
+ }
+ if ((links[index - 1] === link || links[index - 2] === link) &&
+ this.href !== link.href) {
+ nextLink = this;
+ return false;
+ }
+ });
+ if (!prevLink) {
+ prevLink = links[links.length - 1];
+ }
+ if (!nextLink) {
+ nextLink = links[0];
+ }
+ $('<img>').bind('load error', function (e) {
+ var dialog = $('<div></div>'),
+ wheelCounter = 0,
+ keyHandler = function (e) {
+ switch (e.which) {
+ case 37: // left
+ case 38: // up
+ dialog.trigger(
+ $.Event('click', {altKey: true})
+ );
+ return false;
+ case 39: // right
+ case 40: // down
+ dialog.click();
+ return false;
+ }
+ },
+ wheelHandler = function (e) {
+ wheelCounter = wheelCounter + (e.wheelDelta || e.detail || 0);
+ if ((e.wheelDelta && wheelCounter >= 120) ||
+ (!e.wheelDelta && wheelCounter < 0)) {
+ dialog.trigger(
+ $.Event('click', {altKey: true})
+ );
+ wheelCounter = 0;
+ } else if ((e.wheelDelta && wheelCounter <= -120) ||
+ (!e.wheelDelta && wheelCounter > 0)) {
+ dialog.click();
+ wheelCounter = 0;
+ }
+ return false;
+ },
+ closeDialog = function () {
+ dialog.dialog('close');
+ $(document).unbind(
+ 'keydown.' + options.namespace,
+ keyHandler
+ );
+ $(document).unbind(
+ 'mousewheel.' + options.namespace +
+ ', DOMMouseScroll.' + options.namespace,
+ wheelHandler
+ );
+ },
+ slideShow,
+ scaledImage;
+ if (e.type === 'error') {
+ scaledImage = this;
+ dialog.addClass('ui-state-error');
+ } else {
+ scaledImage = $.fn.imagegallery.scale(
+ this,
+ $(window).width() - options.offsetWidth,
+ $(window).height() - options.offsetHeight,
+ options.canvas
+ );
+ }
+ $(document).bind(
+ 'keydown.' + options.namespace,
+ keyHandler
+ );
+ $(document).bind(
+ 'mousewheel.' + options.namespace +
+ ', DOMMouseScroll.' + options.namespace,
+ wheelHandler
+ );
+ if (options.slideshow) {
+ slideShow = setTimeout(function () {
+ dialog.click();
+ }, options.slideshow);
+ }
+ dialog.bind({
+ click: function (e) {
+ clearTimeout(slideShow);
+ dialog.unbind('click').dialog('widget').fadeOut();
+ var newLink = (e.altKey && prevLink) || nextLink;
+ if (newLink.href !== link.href) {
+ options.callback = closeDialog;
+ delete options.title;
+ $.fn.imagegallery.open(newLink, options);
+ } else {
+ closeDialog();
+ }
+ },
+ dialogopen: function () {
+ if (typeof options.callback === 'function') {
+ options.callback();
+ }
+ $('.ui-widget-overlay:last').click(closeDialog);
+ },
+ dialogclose: function () {
+ clearTimeout(slideShow);
+ $(this).remove();
+ }
+ }).css('cursor', 'pointer').append(
+ scaledImage
+ ).appendTo('body').dialog(options);
+ loader.fadeOut(function () {
+ loader.remove();
+ });
+ }).prop('src', link.href);
+ // Preload the next and previous images:
+ $('<img>').prop('src', nextLink.href);
+ $('<img>').prop('src', prevLink.href);
+ };
+
+}(jQuery));
BIN loading.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 style.css
@@ -0,0 +1,51 @@
+@charset 'UTF-8';
+/*
+ * jQuery Image Gallery Plugin CSS Example 1.0
+ * https://github.com/blueimp/jQuery-Image-Gallery
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+
+body {
+ padding: 60px 40px;
+ background: #222;
+ color: #fff;
+ font-size: 13px;
+}
+
+#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;
+}
+
+.gallery-dialog .ui-dialog-titlebar {
+ display: none;
+}
+
+.gallery-dialog .ui-dialog-content {
+ padding: 0;
+ border: 0;
+}
+
+.gallery-dialog .ui-dialog-content img {
+ float: left;
+}
+*/

0 comments on commit 877760a

Please sign in to comment.
Something went wrong with that request. Please try again.