Permalink
Browse files

Initial commit.

  • Loading branch information...
blueimp committed May 19, 2011
0 parents commit 877760ad057129108fe46bd1f62d6f577e6083f1
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
@@ -0,0 +1 @@
+.DS_Store
@@ -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.
@@ -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
@@ -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');
+ });
+ }
+ });
+
+});
Binary file not shown.
@@ -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>
@@ -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;
+}
Oops, something went wrong.

0 comments on commit 877760a

Please sign in to comment.