Permalink
Browse files

Use the "Load Image" library for image loading and resizing.

Reorganized the project resources into folders.
Added a Makefile to create the minified versions.
  • Loading branch information...
1 parent e9bc4a2 commit 3d2ca1947f39f0f763f1d226c9cabad984723b01 @blueimp committed Feb 12, 2012
View
@@ -0,0 +1,9 @@
+.PHONY: default css js
+
+default: css js
+
+css:
+ lessc --compress css/jquery.image-gallery.css > css/jquery.image-gallery.min.css
+
+js:
+ uglifyjs -nc js/jquery.image-gallery.js > js/jquery.image-gallery.min.js
View
@@ -6,8 +6,7 @@
## Description & Usage
The Image Gallery plugin makes use of jQuery's
[delegate](http://api.jquery.com/delegate/) method to attach
-a click event handler for all child elements matching a selector,
-now or in the future, of the given set of root elements:
+a click event handler for all child elements of a container:
```js
$('#gallery').imagegallery();
@@ -89,6 +88,7 @@ $('#gallery').imagegallery('destroy');
## Requirements
* [jQuery](http://jquery.com/) v. 1.6+
* [jQuery UI](http://jqueryui.com/) v. 1.8+ (Required: Widget, Dialog)
+* [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) v. 1.1.4+
## License
Released under the [MIT license](http://www.opensource.org/licenses/MIT).
@@ -1,6 +1,6 @@
@charset 'UTF-8';
/*
- * jQuery Image Gallery Plugin CSS 2.0
+ * jQuery Image Gallery Plugin CSS 2.2
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -18,7 +18,7 @@
width: 128px;
height: 128px;
margin: -64px 0 0 -64px;
- background: url(loading.gif);
+ background: url(../img/loading.gif);
z-index: 9999;
}
@@ -0,0 +1,14 @@
+@charset 'UTF-8';
+#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 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;cursor:pointer;text-align:center;}
+.gallery-dialog-fullscreen .ui-dialog-content img,.gallery-dialog-fullscreen .ui-dialog-content canvas{float:left;border:0;}
+*html .gallery-dialog-fullscreen .ui-dialog-content img{float:none;}
+.gallery-body-fullscreen .ui-widget-overlay{opacity:1;filter:alpha(opacity=100);}
+.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;}
+.gallery-body,.gallery-body-fullscreen{overflow:hidden;}
+*html .gallery-body select,*html .gallery-body-fullscreen select{display:none;}
View
@@ -0,0 +1,59 @@
+@charset 'UTF-8';
+/*
+ * jQuery File Upload Plugin CSS Example 2.2
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+body {
+ margin: 0;
+ padding: 30px 60px;
+ background: #222;
+ color: #fff;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 18px;
+}
+h1 {
+ font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
+}
+a {
+ color: #08C;
+ text-decoration: none;
+}
+a:hover {
+ color: #005580;
+ text-decoration: underline;
+}
+img {
+ border: 0;
+}
+blockquote p {
+ margin-bottom: 0;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 22.5px;
+}
+ul.nav {
+ margin: 0;
+ padding: 0;
+}
+ul.nav li {
+ display: inline-block;
+ margin-right: 10px;
+}
+
+/* Fix for IE 6: */
+*html ul.nav li {
+ display: inline;
+}
+
+/* Fix for IE 7: */
+*+html ul.nav li {
+ display: inline;
+}
File renamed without changes
View
@@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<!--
/*
- * jQuery Image Gallery Plugin HTML Example 2.0.2
+ * jQuery Image Gallery Plugin Demo 2.2
* https://github.com/blueimp/jQuery-Image-Gallery
*
* Copyright 2011, Sebastian Tschan
@@ -15,69 +15,85 @@
<head>
<meta charset="utf-8">
<title>jQuery Image Gallery Demo</title>
-<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/south-street/jquery-ui.css" id="theme">
-<link rel="stylesheet" href="jquery.image-gallery.min.css">
-<link rel="stylesheet" href="style.css">
-<meta name="description" content="Image Gallery with Lightbox dialog, transition effects, fullscreen mode and slideshow functionality for jQuery UI">
+<meta name="description" content="jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.">
+<!-- jQuery UI styles -->
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/south-street/jquery-ui.css" id="theme">
+<!-- jQuery Image Gallery styles -->
+<link rel="stylesheet" href="css/jquery.image-gallery.min.css">
+<!-- Generic page styles -->
+<link rel="stylesheet" href="css/style.css">
</head>
<body>
-<div id="demo">
- <h1>jQuery Image Gallery Demo</h1>
- <div id="options">
- <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>
- </span>
- <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>
- <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>
- <span id="info">
- <a href="https://github.com/blueimp/jQuery-Image-Gallery">Source Code &amp; Download</a>
- <span>|</span>
- <span>Contact: <a href="https://blueimp.net">Sebastian Tschan</a></span>
- </span>
- </div>
- <div id="gallery"></div>
+<ul class="nav">
+ <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/downloads">Downloads</a></li>
+ <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Source Code</a></li>
+ <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Documentation</a></li>
+ <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/issues">Issues</a></li>
+ <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
+</ul>
+<br>
+<h1>jQuery Image Gallery Demo</h1>
+<blockquote>
+ <p>jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images.<br>
+ It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.</p>
+</blockquote>
+<br>
+<div>
+ <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>
+ </span>
+ <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>
+ <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>
+<br>
+<br>
+<!-- The container element for the gallery images -->
+<div id="gallery"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-<script src="jquery.image-gallery.min.js"></script>
-<script src="application.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
+<!-- The Load Image plugin, providing image loading and resizing functionality -->
+<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
+<!-- The jQuery Image Gallery plugin -->
+<script src="js/jquery.image-gallery.min.js"></script>
+<!-- The main application script -->
+<script src="js/main.js"></script>
</body>
-</html>
+</html>

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

Oops, something went wrong.

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

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 3d2ca19

Please sign in to comment.