├── jquery_lightbox ├── models.py ├── __init__.py └── static │ ├── img │ ├── close.png │ ├── next.png │ ├── prev.png │ └── loading.gif │ ├── css │ └── lightbox.css │ └── js │ └── lightbox.js ├── .npmignore ├── .gitignore ├── .jshintrc ├── setup.py └── README.markdown /jquery_lightbox/models.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .jshintrc 2 | coffee 3 | releases 4 | sass 5 | -------------------------------------------------------------------------------- /jquery_lightbox/__init__.py: -------------------------------------------------------------------------------- 1 | '''Django static files for the jQuery lightbox plugin.''' 2 | -------------------------------------------------------------------------------- /jquery_lightbox/static/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebryant/django-jquery-lightbox/django/jquery_lightbox/static/img/close.png -------------------------------------------------------------------------------- /jquery_lightbox/static/img/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebryant/django-jquery-lightbox/django/jquery_lightbox/static/img/next.png -------------------------------------------------------------------------------- /jquery_lightbox/static/img/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebryant/django-jquery-lightbox/django/jquery_lightbox/static/img/prev.png -------------------------------------------------------------------------------- /jquery_lightbox/static/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebryant/django-jquery-lightbox/django/jquery_lightbox/static/img/loading.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # SVN # 2 | ###################### 3 | *.svn 4 | 5 | # Logs and databases # 6 | ###################### 7 | *.log 8 | *.sql 9 | *.sqlite 10 | 11 | # OS generated files # 12 | ###################### 13 | *.DS_Store 14 | ehthumbs.db 15 | Icon? 16 | Thumbs.db 17 | 18 | # Software files # 19 | ###################### 20 | .espresso* 21 | .sass-cache/* 22 | Rakefile 23 | rsync-exclude 24 | /node_modules 25 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "boss": true, 4 | "browser": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "indent": 2, 9 | "latedef": false, 10 | "maxerr": 100, 11 | "multistr": true, 12 | "noarg": true, 13 | "noempty": true, 14 | "plusplus": false, 15 | "quotmark": "true", 16 | "regexp": true, 17 | "strict": false, 18 | "trailing": true, 19 | "unused": true 20 | } 21 | -------------------------------------------------------------------------------- /setup.py: -------------------------------------------------------------------------------- 1 | from setuptools import setup 2 | 3 | setup( 4 | name='django-jquery-lightbox', 5 | version='2.6', 6 | url='https://github.com/mikebryant/django-jquery-lightbox', 7 | description='Django package for Lightbox: a small javascript library used to overlay images on top of the current page.', 8 | author='Lokesh Dhakar', 9 | maintainer='Mike Bryant', 10 | maintainer_email='mike@mikebryant.me.uk', 11 | license='Creative Commons Attribution 2.5 License', 12 | keywords=['django', 'jquery', 'lightbox', 'staticfiles', 'overlay', 'image'], 13 | platforms='any', 14 | classifiers=[ 15 | 'Development Status :: 5 - Production/Stable', 16 | 'Environment :: Web Environment', 17 | 'Framework :: Django', 18 | 'Intended Audience :: Developers', 19 | 'Natural Language :: English', 20 | 'Operating System :: OS Independent', 21 | 'Programming Language :: Python', 22 | 'Topic :: Utilities', 23 | ], 24 | packages=['jquery_lightbox'], 25 | package_data={'jquery_lightbox': ['static/js/*.js', 'static/css/*.css', 'static/img/*']}, 26 | install_requires=['django-jquery >= 1.9',], 27 | ) 28 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | ## Lightbox2 2 | by Lokesh Dhakar | [lokeshdhakar.com](http://www.lokeshdhakar.com) | [twitter.com/lokesh](http://twitter.com/lokesh) 3 | 4 | ### Examples & step-by-step instructions 5 | 6 | [Goto the Lightbox2 demo page](http://lokeshdhakar.com/projects/lightbox2/) 7 | 8 | 9 | ### License 10 | Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ 11 | 12 | * Free for use in both personal and commercial projects. 13 | * Attribution requires leaving author name, author homepage link, and the license info intact. 14 | 15 | 16 | ### Thanks 17 | 18 | For helping during the early days: 19 | 20 | * Scott Upton [(uptonic.com)](uptonic.com), Peter-Paul Koch [(quirksmode.com)](quirksmode.com), and Thomas Fuchs [(mir.aculo.us)](mir.aculo.us) for ideas, libs, and snippets. 21 | * Artemy Tregubenko [(arty.name)](arty.name) for cleanup and help in updating to latest proto-aculous in v2.05. 22 | 23 | For helping and submitting PRs in the Github era: 24 | 25 | * Matthias Vill [(https://github.com/TheConstructor)](https://github.com/TheConstructor) 26 | * XhmikosR - [(https://github.com/XhmikosR)](https://github.com/XhmikosR) 27 | * mwasson - [(https://github.com/mwasson)](https://github.com/mwasson) 28 | * Heleen v.d. S - [(https://github.com/Heleen)](https://github.com/Heleen) 29 | * careilly - [(https://github.com/careilly)](https://github.com/careilly) -------------------------------------------------------------------------------- /jquery_lightbox/static/css/lightbox.css: -------------------------------------------------------------------------------- 1 | /* line 7, ../sass/lightbox.sass */ 2 | body:after { 3 | content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png); 4 | display: none; 5 | } 6 | 7 | /* line 11, ../sass/lightbox.sass */ 8 | .lightboxOverlay { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | z-index: 9999; 13 | background-color: black; 14 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 15 | opacity: 0.8; 16 | display: none; 17 | } 18 | 19 | /* line 20, ../sass/lightbox.sass */ 20 | .lightbox { 21 | position: absolute; 22 | left: 0; 23 | width: 100%; 24 | z-index: 10000; 25 | text-align: center; 26 | line-height: 0; 27 | font-weight: normal; 28 | } 29 | /* line 28, ../sass/lightbox.sass */ 30 | .lightbox .lb-image { 31 | display: block; 32 | height: auto; 33 | -webkit-border-radius: 3px; 34 | -moz-border-radius: 3px; 35 | -ms-border-radius: 3px; 36 | -o-border-radius: 3px; 37 | border-radius: 3px; 38 | } 39 | /* line 32, ../sass/lightbox.sass */ 40 | .lightbox a img { 41 | border: none; 42 | } 43 | 44 | /* line 35, ../sass/lightbox.sass */ 45 | .lb-outerContainer { 46 | position: relative; 47 | background-color: white; 48 | *zoom: 1; 49 | width: 250px; 50 | height: 250px; 51 | margin: 0 auto; 52 | -webkit-border-radius: 4px; 53 | -moz-border-radius: 4px; 54 | -ms-border-radius: 4px; 55 | -o-border-radius: 4px; 56 | border-radius: 4px; 57 | } 58 | /* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ 59 | .lb-outerContainer:after { 60 | content: ""; 61 | display: table; 62 | clear: both; 63 | } 64 | 65 | /* line 44, ../sass/lightbox.sass */ 66 | .lb-container { 67 | padding: 4px; 68 | } 69 | 70 | /* line 47, ../sass/lightbox.sass */ 71 | .lb-loader { 72 | position: absolute; 73 | top: 43%; 74 | left: 0%; 75 | height: 25%; 76 | width: 100%; 77 | text-align: center; 78 | line-height: 0; 79 | } 80 | 81 | /* line 56, ../sass/lightbox.sass */ 82 | .lb-cancel { 83 | display: block; 84 | width: 32px; 85 | height: 32px; 86 | margin: 0 auto; 87 | background: url(../img/loading.gif) no-repeat; 88 | } 89 | 90 | /* line 63, ../sass/lightbox.sass */ 91 | .lb-nav { 92 | position: absolute; 93 | top: 0; 94 | left: 0; 95 | height: 100%; 96 | width: 100%; 97 | z-index: 10; 98 | } 99 | 100 | /* line 71, ../sass/lightbox.sass */ 101 | .lb-container > .nav { 102 | left: 0; 103 | } 104 | 105 | /* line 74, ../sass/lightbox.sass */ 106 | .lb-nav a { 107 | outline: none; 108 | } 109 | 110 | /* line 77, ../sass/lightbox.sass */ 111 | .lb-prev, .lb-next { 112 | width: 49%; 113 | height: 100%; 114 | cursor: pointer; 115 | /* Trick IE into showing hover */ 116 | display: block; 117 | } 118 | 119 | /* line 84, ../sass/lightbox.sass */ 120 | .lb-prev { 121 | left: 0; 122 | float: left; 123 | } 124 | /* line 87, ../sass/lightbox.sass */ 125 | .lb-prev:hover { 126 | background: url(../img/prev.png) left 48% no-repeat; 127 | } 128 | 129 | /* line 90, ../sass/lightbox.sass */ 130 | .lb-next { 131 | right: 0; 132 | float: right; 133 | } 134 | /* line 93, ../sass/lightbox.sass */ 135 | .lb-next:hover { 136 | background: url(../img/next.png) right 48% no-repeat; 137 | } 138 | 139 | /* line 96, ../sass/lightbox.sass */ 140 | .lb-dataContainer { 141 | margin: 0 auto; 142 | padding-top: 5px; 143 | *zoom: 1; 144 | width: 100%; 145 | -moz-border-radius-bottomleft: 4px; 146 | -webkit-border-bottom-left-radius: 4px; 147 | border-bottom-left-radius: 4px; 148 | -moz-border-radius-bottomright: 4px; 149 | -webkit-border-bottom-right-radius: 4px; 150 | border-bottom-right-radius: 4px; 151 | } 152 | /* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ 153 | .lb-dataContainer:after { 154 | content: ""; 155 | display: table; 156 | clear: both; 157 | } 158 | 159 | /* line 103, ../sass/lightbox.sass */ 160 | .lb-data { 161 | padding: 0 4px; 162 | color: #bbbbbb; 163 | } 164 | /* line 106, ../sass/lightbox.sass */ 165 | .lb-data .lb-details { 166 | width: 85%; 167 | float: left; 168 | text-align: left; 169 | line-height: 1.1em; 170 | } 171 | /* line 111, ../sass/lightbox.sass */ 172 | .lb-data .lb-caption { 173 | font-size: 13px; 174 | font-weight: bold; 175 | line-height: 1em; 176 | } 177 | /* line 115, ../sass/lightbox.sass */ 178 | .lb-data .lb-number { 179 | display: block; 180 | clear: left; 181 | padding-bottom: 1em; 182 | font-size: 12px; 183 | color: #999999; 184 | } 185 | /* line 121, ../sass/lightbox.sass */ 186 | .lb-data .lb-close { 187 | display: block; 188 | float: right; 189 | width: 30px; 190 | height: 30px; 191 | background: url(../img/close.png) top right no-repeat; 192 | text-align: right; 193 | outline: none; 194 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 195 | opacity: 0.7; 196 | } 197 | /* line 130, ../sass/lightbox.sass */ 198 | .lb-data .lb-close:hover { 199 | cursor: pointer; 200 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 201 | opacity: 1; 202 | } 203 | -------------------------------------------------------------------------------- /jquery_lightbox/static/js/lightbox.js: -------------------------------------------------------------------------------- 1 | (function(){var b,d,c;b=jQuery;c=(function(){function b(){this.fadeDuration=500;this.fitImagesInViewport=true;this.resizeDuration=700;this.showImageNumberLabel=true;this.wrapAround=false}b.prototype.albumLabel=function(b,c){return"Image "+b+" of "+c};return b})();d=(function(){function c(b){this.options=b;this.album=[];this.currentImageIndex=void 0;this.init()}c.prototype.init=function(){this.enable();return this.build()};c.prototype.enable=function(){var c=this;return b('body').on('click','a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]',function(d){c.start(b(d.currentTarget));return false})};c.prototype.build=function(){var c=this;b("
").appendTo(b('body'));this.$lightbox=b('#lightbox');this.$overlay=b('#lightboxOverlay');this.$outerContainer=this.$lightbox.find('.lb-outerContainer');this.$container=this.$lightbox.find('.lb-container');this.containerTopPadding=parseInt(this.$container.css('padding-top'),10);this.containerRightPadding=parseInt(this.$container.css('padding-right'),10);this.containerBottomPadding=parseInt(this.$container.css('padding-bottom'),10);this.containerLeftPadding=parseInt(this.$container.css('padding-left'),10);this.$overlay.hide().on('click',function(){c.end();return false});this.$lightbox.hide().on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$outerContainer.on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$lightbox.find('.lb-prev').on('click',function(){if(c.currentImageIndex===0){c.changeImage(c.album.length-1)}else{c.changeImage(c.currentImageIndex-1)}return false});this.$lightbox.find('.lb-next').on('click',function(){if(c.currentImageIndex===c.album.length-1){c.changeImage(0)}else{c.changeImage(c.currentImageIndex+1)}return false});return this.$lightbox.find('.lb-loader, .lb-close').on('click',function(){c.end();return false})};c.prototype.start=function(c){var f,e,j,d,g,n,o,k,l,m,p,h,i;b(window).on("resize",this.sizeOverlay);b('select, object, embed').css({visibility:"hidden"});this.$overlay.width(b(document).width()).height(b(document).height()).fadeIn(this.options.fadeDuration);this.album=[];g=0;j=c.attr('data-lightbox');if(j){h=b(c.prop("tagName")+'[data-lightbox="'+j+'"]');for(d=k=0,m=h.length;kj)||(c.height>i)){if((c.width/j)>(c.height/i)){h=j;g=parseInt(c.height/(c.width/h),10);d.width(h);d.height(g)}else{g=i;h=parseInt(c.width/(c.height/g),10);d.width(h);d.height(g)}}}return e.sizeContainer(d.width(),d.height())};c.src=this.album[f].link;this.currentImageIndex=f};c.prototype.sizeOverlay=function(){return b('#lightboxOverlay').width(b(document).width()).height(b(document).height())};c.prototype.sizeContainer=function(f,g){var b,d,e,h,c=this;h=this.$outerContainer.outerWidth();e=this.$outerContainer.outerHeight();d=f+this.containerLeftPadding+this.containerRightPadding;b=g+this.containerTopPadding+this.containerBottomPadding;this.$outerContainer.animate({width:d,height:b},this.options.resizeDuration,'swing');setTimeout(function(){c.$lightbox.find('.lb-dataContainer').width(d);c.$lightbox.find('.lb-prevLink').height(b);c.$lightbox.find('.lb-nextLink').height(b);c.showImage()},this.options.resizeDuration)};c.prototype.showImage=function(){this.$lightbox.find('.lb-loader').hide();this.$lightbox.find('.lb-image').fadeIn('slow');this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};c.prototype.updateNav=function(){this.$lightbox.find('.lb-nav').show();if(this.album.length>1){if(this.options.wrapAround){this.$lightbox.find('.lb-prev, .lb-next').show()}else{if(this.currentImageIndex>0){this.$lightbox.find('.lb-prev').show()}if(this.currentImageIndex1&&this.options.showImageNumberLabel){this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn('fast')}else{this.$lightbox.find('.lb-number').hide()}this.$outerContainer.removeClass('animating');this.$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration,function(){return b.sizeOverlay()})};c.prototype.preloadNeighboringImages=function(){var c,b;if(this.album.length>this.currentImageIndex+1){c=new Image();c.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){b=new Image();b.src=this.album[this.currentImageIndex-1].link}};c.prototype.enableKeyboardNav=function(){b(document).on('keyup.keyboard',b.proxy(this.keyboardAction,this))};c.prototype.disableKeyboardNav=function(){b(document).off('.keyboard')};c.prototype.keyboardAction=function(g){var d,e,f,c,b;d=27;e=37;f=39;b=g.keyCode;c=String.fromCharCode(b).toLowerCase();if(b===d||c.match(/x|o|c/)){this.end()}else if(c==='p'||b===e){if(this.currentImageIndex!==0){this.changeImage(this.currentImageIndex-1)}}else if(c==='n'||b===f){if(this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}}};c.prototype.end=function(){this.disableKeyboardNav();b(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);return b('select, object, embed').css({visibility:"visible"})};return c})();b(function(){var e,b;b=new c();return e=new d(b)})}).call(this); --------------------------------------------------------------------------------