generate thumbs with imagemagick; js lightbox
This commit is contained in:
Bachir Soussi Chiadmi
+2
-1
@@ -17,6 +17,7 @@
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "^3.1.0"
|
||||
"jquery": "^3.1.0",
|
||||
"lightbox2": "^2.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "lightbox2",
|
||||
"homepage": "http://lokeshdhakar.com/projects/lightbox2/",
|
||||
"authors": [
|
||||
"Lokesh Dhakar <lokesh.dhakar@gmail.com>"
|
||||
],
|
||||
"description": "The original Lightbox script. Uses jQuery.",
|
||||
"main": [
|
||||
"./dist/js/lightbox.js",
|
||||
"./dist/css/lightbox.css",
|
||||
"./dist/images/close.png",
|
||||
"./dist/images/loading.gif",
|
||||
"./dist/images/next.png",
|
||||
"./dist/images/prev.png"
|
||||
],
|
||||
"keywords": [
|
||||
"lightbox",
|
||||
"lightbox2",
|
||||
"overlay",
|
||||
"gallery",
|
||||
"slideshow",
|
||||
"images"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "~2"
|
||||
},
|
||||
"version": "2.9.0",
|
||||
"_release": "2.9.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v2.9.0",
|
||||
"commit": "3c792b46c0e5dd6923f9d71db8cad611beef8050"
|
||||
},
|
||||
"_source": "https://github.com/lokesh/lightbox2.git",
|
||||
"_target": "^2.9.0",
|
||||
"_originalSource": "lightbox2",
|
||||
"_direct": true
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
# Contributing to Lightbox2
|
||||
|
||||
## Found a bug?
|
||||
|
||||
[Search through existing Github Issues](https://github.com/lokesh/lightbox2/issues) that have been reported to avoid creating a duplicate issue. If your bug has not been reported, create a new issue with the following details:
|
||||
|
||||
- What version of Lightbox2 you are using
|
||||
- Information on which browsers and operating systems you have reproduced the bug on
|
||||
- Steps to reproduce the bug
|
||||
- A link to your production site where the bug is visible or all relevant HTML, CSS, and Javascript required to recreate the bug
|
||||
|
||||
All of the above are required.
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
concat: {
|
||||
dist: {
|
||||
src: ['bower_components/jquery/dist/jquery.js', 'src/js/lightbox.js'],
|
||||
dest: 'dist/js/lightbox-plus-jquery.js',
|
||||
},
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: 8000
|
||||
}
|
||||
}
|
||||
},
|
||||
copy: {
|
||||
dist: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: 'src/',
|
||||
src: ['**'],
|
||||
dest: 'dist/'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
jshint: {
|
||||
all: [
|
||||
'src/js/lightbox.js'
|
||||
],
|
||||
options: {
|
||||
jshintrc: true
|
||||
}
|
||||
},
|
||||
jscs: {
|
||||
src: [
|
||||
'src/js/lightbox.js'
|
||||
],
|
||||
options: {
|
||||
config: ".jscsrc"
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
preserveComments: 'some',
|
||||
sourceMap: true
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/js/lightbox.min.js': ['src/js/lightbox.js'],
|
||||
'dist/js/lightbox-plus-jquery.min.js': ['dist/js/lightbox-plus-jquery.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
jshint: {
|
||||
files: ['src/js/lightbox.js'],
|
||||
tasks: ['jshint', 'jscs']
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
minify: {
|
||||
src: 'dist/css/lightbox.css',
|
||||
dest: 'dist/css/lightbox.min.css'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks("grunt-jscs");
|
||||
|
||||
grunt.registerTask('default', ['connect', 'watch']);
|
||||
grunt.registerTask('test', ['jshint', 'jscs']);
|
||||
grunt.registerTask('build', ['jshint', 'jscs', 'copy:dist', 'concat', 'uglify', 'cssmin:minify']);
|
||||
};
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Lokesh Dhakar
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
# Lightbox2
|
||||
|
||||
The original lightbox script. Eight years later — still going strong!
|
||||
|
||||
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
|
||||
|
||||
For demos and usage instructions, visit [lokeshdhakar.com/projects/lightbox2/](http://lokeshdhakar.com/projects/lightbox2/).
|
||||
|
||||
by [Lokesh Dhakar](http://www.lokeshdhakar.com)
|
||||
|
||||
|
||||
## Roadmap
|
||||
|
||||
### Actively being worked on
|
||||
|
||||
- **Maintenance.** Geting open Issues and PRs number down. Not working on new features for v2.x.
|
||||
|
||||
### Features *NOT* on the roadmap
|
||||
|
||||
The goal of this script from it's beginnings till today is to to provide a better *image viewing experience*.
|
||||
|
||||
- **HTML or video content.** If you need to show html or video content, I recommend googling for an alternative script as there are many options.
|
||||
- **Social sharing buttons.**
|
||||
|
||||
### v3.0 - In Brainstorming Phase
|
||||
|
||||
**Interactions**
|
||||
- Add touch gesture support.
|
||||
- Exploring using tilt gesture on mobile devices with extra-wide images.
|
||||
- If user attempts to go forward when at end of image set, animation (shake?) indicating the end or option to close Lightbox.
|
||||
- Make sure right-click/long pressing works to access the image's context menu.
|
||||
|
||||
**Layout**
|
||||
- Allow vertical centering.
|
||||
- Update sizing on window resize.
|
||||
- Should the dev be able to choose the position of the caption, close button, and nav controls?
|
||||
- Optimize layout for mobile.
|
||||
- Optimize layout for screens of varying densities.
|
||||
- Should the close button still live in the bottom right corner?
|
||||
|
||||
**Animations**
|
||||
- Evaluate start, end, and transition animations.
|
||||
- Rewrite animations for performance and flexibility.
|
||||
|
||||
**Assets**
|
||||
- Use inline SVG for UI elements.
|
||||
|
||||
**Caching**
|
||||
- Review if and how images should be preloaded
|
||||
|
||||
**Accessibility**
|
||||
- Should opening lightbox update the url? and should this url be parsed on page load to show Lightbox automatically?
|
||||
- Review alt attributes.
|
||||
- Review ARIA roles.
|
||||
- Review constrast ratios.
|
||||
- Review keyboard input and tabbing.
|
||||
- Review click/touch target size.
|
||||
- Test with screen reader.
|
||||
|
||||
**API**
|
||||
- Do not initialize automatically and allow multiple instances.
|
||||
- Add event handlers.
|
||||
- Allow setting options on the fly.
|
||||
- Allow the setting of options from HTML?
|
||||
- Allow instantiation with jQuery plugin syntax.
|
||||
- Evaluate preloading and caching.
|
||||
- Evaluate droppping jQuery requirement.
|
||||
- Allow placement inside of a specified element? Orig feature requester was dealing with iframe.
|
||||
|
||||
## Changelog
|
||||
|
||||
### v2.9.0 - 2016-10-30
|
||||
|
||||
- [Fix] Allow loading of lightbox.js anywhere on page. Prev requirement was at the end of the body tag. [Commit](https://github.com/lokesh/lightbox2/commit/7047214f77cfc8f892e8513426b57d45bf29e9cd)
|
||||
- [Add] Add imageFadeDuration option. [Commit](https://github.com/lokesh/lightbox2/commit/6d5f99a65f189a5d2bd7bbfac4682fe36e62871e)
|
||||
- [Change] Right-clicking image now shows context menu for image. [Commit](https://github.com/lokesh/lightbox2/commit/363c3cb8af8fae1b6f95d6679df976022290f878)
|
||||
- [Change] Allow controlling of image border with a simpler css border vs a parent container padding _hack_. [Commit](https://github.com/lokesh/lightbox2/commit/214361297f1dd5f0c19c1d80ff37c398cdda55cb)
|
||||
|
||||
### v2.8.2 - 2015-12-13
|
||||
|
||||
- [Add] npm support. ```npm install --save lightbox2```
|
||||
- [Add] Add option to disable vertical scrolling [#487](https://github.com/lokesh/lightbox2/pull/487) Thanks [blacksunshineCoding](https://github.com/blacksunshineCoding)
|
||||
- [Fix] When horizontal scrolling is on page the overlay is not covering entire page [#485](https://github.com/lokesh/lightbox2/pull/485) Thanks [@manuel-io](https://github.com/manuel-io)
|
||||
- [Change] Add css minify task to Gruntfile.js and removedlegacy css vendor prefixes for border-radius. [#470](https://github.com/lokesh/lightbox2/pull/470) Thanks [ajerez](https://github.com/ajerez)
|
||||
|
||||
|
||||
### v2.8.1 - 2015-07-09
|
||||
|
||||
- [Fix] Change AMD jQuery require statement to use all lowercase. [#464](https://github.com/lokesh/lightbox2/pull/464) Thanks [@vtforester](https://github.com/vtforester)
|
||||
|
||||
### v2.8.0 - 2015-06-29
|
||||
|
||||
- [Add] UMD support (AMD, CommonJS, fallback to global export).[#461](https://github.com/lokesh/lightbox2/pull/461)
|
||||
- [Add] option method for setting options. [#461](https://github.com/lokesh/lightbox2/commit/d708fbd716aaa90e01ba4198944c8955e7283d87)
|
||||
- [Add] CONTRIBUTING.md
|
||||
|
||||
### v2.7.4 - 2015-06-23
|
||||
|
||||
- [Change] Revert jquery dep version to 2.x from 1.x. Added note to Lightbox page about using jQuery 1.x to get IE6, 7, and 8 support.
|
||||
- [Fix] Preserve author and license comments from lightbox.js in minified files.
|
||||
|
||||
### v2.7.3 - 2015-06-22
|
||||
|
||||
- [Add] Barebone HTML file with examples /examples/index.html.
|
||||
- [Add] jquery.lightbox.js which concatenates jQuery and Lightbox. This is for those who are Bower averse or want an extra easy install.
|
||||
|
||||
### v2.7.2 - 2015-06-16
|
||||
|
||||
- [Add] maxWidth and maxHeight options added [#197](https://github.com/lokesh/lightbox2/pull/197)
|
||||
- [Add] Enable target attribute in caption links [#299](https://github.com/lokesh/lightbox2/pull/299)
|
||||
- [Change] Switched to The MIT License from Creative Commons Attribution 4.0 International License.
|
||||
- [Change] Add CSS and images to bower.json main property.
|
||||
- [Change] Dropped version property from bower.json. [#453](https://github.com/lokesh/lightbox2/pull/453)
|
||||
- [Change] Use src -> dist folder structure for build.
|
||||
- [Fix] Remove empty src attribute from img tag [#287](https://github.com/lokesh/lightbox2/pull/287)
|
||||
- [Fix] Correct grammatical error in comment [#224](https://github.com/lokesh/lightbox2/pull/224)
|
||||
- [Fix] Clear the jquery animation queue before hiding the .lb-loader [#309](https://github.com/lokesh/lightbox2/pull/309)
|
||||
- [Remove] Remove releases's zips from repo.
|
||||
|
||||
### v2.7.1 - 2014-03-30
|
||||
|
||||
- [Fix] Enable links in captions
|
||||
|
||||
### v2.7.0 - 2014-03-29
|
||||
|
||||
- [Add] Support for data-title attribute for the caption. - Thanks [@copycut](https://github.com/copycut)
|
||||
- [Add] New option to enable always visible prev and next arrows
|
||||
- [Change] Rewrite Coffeescript code into plain ole Javascript
|
||||
- [Change] Updated jQuery to v1.10.2
|
||||
- [Fix] prev/next arrows not appearing in IE9 and IE 10 - Thanks [@rebizu](https://github.com/rebizu)
|
||||
- [Fix] Support wrap around option w/keyboard actions. Thanks [@vovayatsyuk](https://github.com/vovayatsyuk)
|
||||
|
||||
### v2.6.0 - 2013-07-06
|
||||
|
||||
- [Add] Added wraparound option
|
||||
- [Add] Added fitImagesInViewport option - now mobile friendly
|
||||
- [Add] Added showImageNumber label
|
||||
- [Add] Compatibility with html5shiv
|
||||
- [Add] Html5 valid using new data-lightbox attribute
|
||||
- [Add] Compatibility with hmtl5shiv and modernizr
|
||||
- [Add] Support jquery 1.9+
|
||||
- [Change] Move reference to loading and close images into css
|
||||
- [Change] Cache jquery objects
|
||||
|
||||
### v2.5.0 - 2012-04-11
|
||||
|
||||
- [Change] Switch to jQuery from Prototype and Scriptaculous
|
||||
- [Change] Switch from Javacript to Coffeescript
|
||||
- [Change] Switch from CSS to SASS
|
||||
- [Add] Repo created on Github
|
||||
|
||||
|
||||
## How to deploy
|
||||
|
||||
- Update version number in ```src/lightbox.js```
|
||||
- Update README.md Changelog with release date
|
||||
- grunt build
|
||||
- Push to Github repo
|
||||
- Create a new Github release along with tag. Naming convention for both ```v2.8.1```
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "lightbox2",
|
||||
"homepage": "http://lokeshdhakar.com/projects/lightbox2/",
|
||||
"authors": [
|
||||
"Lokesh Dhakar <lokesh.dhakar@gmail.com>"
|
||||
],
|
||||
"description": "The original Lightbox script. Uses jQuery.",
|
||||
"main": [
|
||||
"./dist/js/lightbox.js",
|
||||
"./dist/css/lightbox.css",
|
||||
"./dist/images/close.png",
|
||||
"./dist/images/loading.gif",
|
||||
"./dist/images/next.png",
|
||||
"./dist/images/prev.png"
|
||||
],
|
||||
"keywords": [
|
||||
"lightbox",
|
||||
"lightbox2",
|
||||
"overlay",
|
||||
"gallery",
|
||||
"slideshow",
|
||||
"images"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "~2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
/* Preload images */
|
||||
body:after {
|
||||
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+508
@@ -0,0 +1,508 @@
|
||||
/*!
|
||||
* Lightbox v2.9.0
|
||||
* by Lokesh Dhakar
|
||||
*
|
||||
* More info:
|
||||
* http://lokeshdhakar.com/projects/lightbox2/
|
||||
*
|
||||
* Copyright 2007, 2015 Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
// Uses Node, AMD or browser globals to create a module.
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node. Does not work with strict CommonJS, but
|
||||
// only CommonJS-like environments that support module.exports,
|
||||
// like Node.
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.lightbox = factory(root.jQuery);
|
||||
}
|
||||
}(this, function ($) {
|
||||
|
||||
function Lightbox(options) {
|
||||
this.album = [];
|
||||
this.currentImageIndex = void 0;
|
||||
this.init();
|
||||
|
||||
// options
|
||||
this.options = $.extend({}, this.constructor.defaults);
|
||||
this.option(options);
|
||||
}
|
||||
|
||||
// Descriptions of all options available on the demo site:
|
||||
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
|
||||
Lightbox.defaults = {
|
||||
albumLabel: 'Image %1 of %2',
|
||||
alwaysShowNavOnTouchDevices: false,
|
||||
fadeDuration: 600,
|
||||
fitImagesInViewport: true,
|
||||
imageFadeDuration: 600,
|
||||
// maxWidth: 800,
|
||||
// maxHeight: 600,
|
||||
positionFromTop: 50,
|
||||
resizeDuration: 700,
|
||||
showImageNumberLabel: true,
|
||||
wrapAround: false,
|
||||
disableScrolling: false,
|
||||
/*
|
||||
Sanitize Title
|
||||
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
|
||||
This will free you to add html tags, such as links, in the caption.
|
||||
|
||||
If the caption data is user submitted or from some other untrusted source, then set this to true
|
||||
to prevent xss and other injection attacks.
|
||||
*/
|
||||
sanitizeTitle: false
|
||||
};
|
||||
|
||||
Lightbox.prototype.option = function(options) {
|
||||
$.extend(this.options, options);
|
||||
};
|
||||
|
||||
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
|
||||
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
|
||||
};
|
||||
|
||||
Lightbox.prototype.init = function() {
|
||||
var self = this;
|
||||
// Both enable and build methods require the body tag to be in the DOM.
|
||||
$(document).ready(function() {
|
||||
self.enable();
|
||||
self.build();
|
||||
});
|
||||
};
|
||||
|
||||
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
|
||||
// that contain 'lightbox'. When these are clicked, start lightbox.
|
||||
Lightbox.prototype.enable = function() {
|
||||
var self = this;
|
||||
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
|
||||
self.start($(event.currentTarget));
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// Build html for the lightbox and the overlay.
|
||||
// Attach event handlers to the new DOM elements. click click click
|
||||
Lightbox.prototype.build = function() {
|
||||
var self = this;
|
||||
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||
|
||||
// Cache jQuery objects
|
||||
this.$lightbox = $('#lightbox');
|
||||
this.$overlay = $('#lightboxOverlay');
|
||||
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
|
||||
this.$container = this.$lightbox.find('.lb-container');
|
||||
this.$image = this.$lightbox.find('.lb-image');
|
||||
this.$nav = this.$lightbox.find('.lb-nav');
|
||||
|
||||
// Store css values for future lookup
|
||||
this.containerPadding = {
|
||||
top: parseInt(this.$container.css('padding-top'), 10),
|
||||
right: parseInt(this.$container.css('padding-right'), 10),
|
||||
bottom: parseInt(this.$container.css('padding-bottom'), 10),
|
||||
left: parseInt(this.$container.css('padding-left'), 10)
|
||||
};
|
||||
|
||||
this.imageBorderWidth = {
|
||||
top: parseInt(this.$image.css('border-top-width'), 10),
|
||||
right: parseInt(this.$image.css('border-right-width'), 10),
|
||||
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
|
||||
left: parseInt(this.$image.css('border-left-width'), 10)
|
||||
};
|
||||
|
||||
// Attach event handlers to the newly minted DOM elements
|
||||
this.$overlay.hide().on('click', function() {
|
||||
self.end();
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.hide().on('click', function(event) {
|
||||
if ($(event.target).attr('id') === 'lightbox') {
|
||||
self.end();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$outerContainer.on('click', function(event) {
|
||||
if ($(event.target).attr('id') === 'lightbox') {
|
||||
self.end();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.find('.lb-prev').on('click', function() {
|
||||
if (self.currentImageIndex === 0) {
|
||||
self.changeImage(self.album.length - 1);
|
||||
} else {
|
||||
self.changeImage(self.currentImageIndex - 1);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.find('.lb-next').on('click', function() {
|
||||
if (self.currentImageIndex === self.album.length - 1) {
|
||||
self.changeImage(0);
|
||||
} else {
|
||||
self.changeImage(self.currentImageIndex + 1);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/*
|
||||
Show context menu for image on right-click
|
||||
|
||||
There is a div containing the navigation that spans the entire image and lives above of it. If
|
||||
you right-click, you are right clicking this div and not the image. This prevents users from
|
||||
saving the image or using other context menu actions with the image.
|
||||
|
||||
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
|
||||
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
|
||||
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
|
||||
we set the pointer events back to auto for the nav div so it can capture hover and left-click
|
||||
events as usual.
|
||||
*/
|
||||
this.$nav.on('mousedown', function(event) {
|
||||
if (event.which === 3) {
|
||||
self.$nav.css('pointer-events', 'none');
|
||||
|
||||
self.$lightbox.one('contextmenu', function() {
|
||||
setTimeout(function() {
|
||||
this.$nav.css('pointer-events', 'auto');
|
||||
}.bind(self), 0);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
|
||||
self.end();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
||||
Lightbox.prototype.start = function($link) {
|
||||
var self = this;
|
||||
var $window = $(window);
|
||||
|
||||
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
||||
|
||||
$('select, object, embed').css({
|
||||
visibility: 'hidden'
|
||||
});
|
||||
|
||||
this.sizeOverlay();
|
||||
|
||||
this.album = [];
|
||||
var imageNumber = 0;
|
||||
|
||||
function addToAlbum($link) {
|
||||
self.album.push({
|
||||
link: $link.attr('href'),
|
||||
title: $link.attr('data-title') || $link.attr('title')
|
||||
});
|
||||
}
|
||||
|
||||
// Support both data-lightbox attribute and rel attribute implementations
|
||||
var dataLightboxValue = $link.attr('data-lightbox');
|
||||
var $links;
|
||||
|
||||
if (dataLightboxValue) {
|
||||
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
|
||||
for (var i = 0; i < $links.length; i = ++i) {
|
||||
addToAlbum($($links[i]));
|
||||
if ($links[i] === $link[0]) {
|
||||
imageNumber = i;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ($link.attr('rel') === 'lightbox') {
|
||||
// If image is not part of a set
|
||||
addToAlbum($link);
|
||||
} else {
|
||||
// If image is part of a set
|
||||
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
|
||||
for (var j = 0; j < $links.length; j = ++j) {
|
||||
addToAlbum($($links[j]));
|
||||
if ($links[j] === $link[0]) {
|
||||
imageNumber = j;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Position Lightbox
|
||||
var top = $window.scrollTop() + this.options.positionFromTop;
|
||||
var left = $window.scrollLeft();
|
||||
this.$lightbox.css({
|
||||
top: top + 'px',
|
||||
left: left + 'px'
|
||||
}).fadeIn(this.options.fadeDuration);
|
||||
|
||||
// Disable scrolling of the page while open
|
||||
if (this.options.disableScrolling) {
|
||||
$('body').addClass('lb-disable-scrolling');
|
||||
}
|
||||
|
||||
this.changeImage(imageNumber);
|
||||
};
|
||||
|
||||
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
||||
Lightbox.prototype.changeImage = function(imageNumber) {
|
||||
var self = this;
|
||||
|
||||
this.disableKeyboardNav();
|
||||
var $image = this.$lightbox.find('.lb-image');
|
||||
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
|
||||
$('.lb-loader').fadeIn('slow');
|
||||
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
||||
|
||||
this.$outerContainer.addClass('animating');
|
||||
|
||||
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||
var preloader = new Image();
|
||||
preloader.onload = function() {
|
||||
var $preloader;
|
||||
var imageHeight;
|
||||
var imageWidth;
|
||||
var maxImageHeight;
|
||||
var maxImageWidth;
|
||||
var windowHeight;
|
||||
var windowWidth;
|
||||
|
||||
$image.attr('src', self.album[imageNumber].link);
|
||||
|
||||
$preloader = $(preloader);
|
||||
|
||||
$image.width(preloader.width);
|
||||
$image.height(preloader.height);
|
||||
|
||||
if (self.options.fitImagesInViewport) {
|
||||
// Fit image inside the viewport.
|
||||
// Take into account the border around the image and an additional 10px gutter on each side.
|
||||
|
||||
windowWidth = $(window).width();
|
||||
windowHeight = $(window).height();
|
||||
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
|
||||
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
|
||||
|
||||
// Check if image size is larger then maxWidth|maxHeight in settings
|
||||
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
||||
maxImageWidth = self.options.maxWidth;
|
||||
}
|
||||
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
|
||||
maxImageHeight = self.options.maxHeight;
|
||||
}
|
||||
|
||||
// Is there a fitting issue?
|
||||
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||
imageWidth = maxImageWidth;
|
||||
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
} else {
|
||||
imageHeight = maxImageHeight;
|
||||
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
self.sizeContainer($image.width(), $image.height());
|
||||
};
|
||||
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
this.currentImageIndex = imageNumber;
|
||||
};
|
||||
|
||||
// Stretch overlay to fit the viewport
|
||||
Lightbox.prototype.sizeOverlay = function() {
|
||||
this.$overlay
|
||||
.width($(document).width())
|
||||
.height($(document).height());
|
||||
};
|
||||
|
||||
// Animate the size of the lightbox to fit the image we are showing
|
||||
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
||||
var self = this;
|
||||
|
||||
var oldWidth = this.$outerContainer.outerWidth();
|
||||
var oldHeight = this.$outerContainer.outerHeight();
|
||||
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
|
||||
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
|
||||
|
||||
function postResize() {
|
||||
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
||||
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
||||
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
||||
self.showImage();
|
||||
}
|
||||
|
||||
if (oldWidth !== newWidth || oldHeight !== newHeight) {
|
||||
this.$outerContainer.animate({
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
}, this.options.resizeDuration, 'swing', function() {
|
||||
postResize();
|
||||
});
|
||||
} else {
|
||||
postResize();
|
||||
}
|
||||
};
|
||||
|
||||
// Display the image and its details and begin preload neighboring images.
|
||||
Lightbox.prototype.showImage = function() {
|
||||
this.$lightbox.find('.lb-loader').stop(true).hide();
|
||||
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
|
||||
|
||||
this.updateNav();
|
||||
this.updateDetails();
|
||||
this.preloadNeighboringImages();
|
||||
this.enableKeyboardNav();
|
||||
};
|
||||
|
||||
// Display previous and next navigation if appropriate.
|
||||
Lightbox.prototype.updateNav = function() {
|
||||
// Check to see if the browser supports touch events. If so, we take the conservative approach
|
||||
// and assume that mouse hover events are not supported and always show prev/next navigation
|
||||
// arrows in image sets.
|
||||
var alwaysShowNav = false;
|
||||
try {
|
||||
document.createEvent('TouchEvent');
|
||||
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
|
||||
} catch (e) {}
|
||||
|
||||
this.$lightbox.find('.lb-nav').show();
|
||||
|
||||
if (this.album.length > 1) {
|
||||
if (this.options.wrapAround) {
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
|
||||
}
|
||||
this.$lightbox.find('.lb-prev, .lb-next').show();
|
||||
} else {
|
||||
if (this.currentImageIndex > 0) {
|
||||
this.$lightbox.find('.lb-prev').show();
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-prev').css('opacity', '1');
|
||||
}
|
||||
}
|
||||
if (this.currentImageIndex < this.album.length - 1) {
|
||||
this.$lightbox.find('.lb-next').show();
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-next').css('opacity', '1');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Display caption, image number, and closing button.
|
||||
Lightbox.prototype.updateDetails = function() {
|
||||
var self = this;
|
||||
|
||||
// Enable anchor clicks in the injected caption html.
|
||||
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
||||
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
|
||||
this.album[this.currentImageIndex].title !== '') {
|
||||
var $caption = this.$lightbox.find('.lb-caption');
|
||||
if (this.options.sanitizeTitle) {
|
||||
$caption.text(this.album[this.currentImageIndex].title);
|
||||
} else {
|
||||
$caption.html(this.album[this.currentImageIndex].title);
|
||||
}
|
||||
$caption.fadeIn('fast')
|
||||
.find('a').on('click', function(event) {
|
||||
if ($(this).attr('target') !== undefined) {
|
||||
window.open($(this).attr('href'), $(this).attr('target'));
|
||||
} else {
|
||||
location.href = $(this).attr('href');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
||||
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
|
||||
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
|
||||
} else {
|
||||
this.$lightbox.find('.lb-number').hide();
|
||||
}
|
||||
|
||||
this.$outerContainer.removeClass('animating');
|
||||
|
||||
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
|
||||
return self.sizeOverlay();
|
||||
});
|
||||
};
|
||||
|
||||
// Preload previous and next images in set.
|
||||
Lightbox.prototype.preloadNeighboringImages = function() {
|
||||
if (this.album.length > this.currentImageIndex + 1) {
|
||||
var preloadNext = new Image();
|
||||
preloadNext.src = this.album[this.currentImageIndex + 1].link;
|
||||
}
|
||||
if (this.currentImageIndex > 0) {
|
||||
var preloadPrev = new Image();
|
||||
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
||||
}
|
||||
};
|
||||
|
||||
Lightbox.prototype.enableKeyboardNav = function() {
|
||||
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||
};
|
||||
|
||||
Lightbox.prototype.disableKeyboardNav = function() {
|
||||
$(document).off('.keyboard');
|
||||
};
|
||||
|
||||
Lightbox.prototype.keyboardAction = function(event) {
|
||||
var KEYCODE_ESC = 27;
|
||||
var KEYCODE_LEFTARROW = 37;
|
||||
var KEYCODE_RIGHTARROW = 39;
|
||||
|
||||
var keycode = event.keyCode;
|
||||
var key = String.fromCharCode(keycode).toLowerCase();
|
||||
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
|
||||
this.end();
|
||||
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
|
||||
if (this.currentImageIndex !== 0) {
|
||||
this.changeImage(this.currentImageIndex - 1);
|
||||
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||
this.changeImage(this.album.length - 1);
|
||||
}
|
||||
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
|
||||
if (this.currentImageIndex !== this.album.length - 1) {
|
||||
this.changeImage(this.currentImageIndex + 1);
|
||||
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||
this.changeImage(0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Closing time. :-(
|
||||
Lightbox.prototype.end = function() {
|
||||
this.disableKeyboardNav();
|
||||
$(window).off('resize', this.sizeOverlay);
|
||||
this.$lightbox.fadeOut(this.options.fadeDuration);
|
||||
this.$overlay.fadeOut(this.options.fadeDuration);
|
||||
$('select, object, embed').css({
|
||||
visibility: 'visible'
|
||||
});
|
||||
if (this.options.disableScrolling) {
|
||||
$('body').removeClass('lb-disable-scrolling');
|
||||
}
|
||||
};
|
||||
|
||||
return new Lightbox();
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lightbox Example</title>
|
||||
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<h3>Two Individual Images</h3>
|
||||
<div>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/></a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>A Four Image Set</h3>
|
||||
<div>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
|
||||
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "lightbox2",
|
||||
"version": "2.8.2",
|
||||
"author": "Lokesh Dhakar <lokesh.dhakar@gmail.com>",
|
||||
"description": "The original Lightbox script. Uses jQuery.",
|
||||
"keywords": [
|
||||
"lightbox",
|
||||
"lightbox2",
|
||||
"overlay",
|
||||
"gallery",
|
||||
"slideshow",
|
||||
"images"
|
||||
],
|
||||
"homepage": "http://lokeshdhakar.com/projects/lightbox2/",
|
||||
"main": "./dist/js/lightbox.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lokesh/lightbox2.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/lokesh/lightbox2/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://raw.githubusercontent.com/lokesh/lightbox2/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"devDependencies": {
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-concat": "^0.5.1",
|
||||
"grunt-contrib-connect": "^0.7.1",
|
||||
"grunt-contrib-copy": "^0.8.0",
|
||||
"grunt-contrib-cssmin": "^0.12.3",
|
||||
"grunt-contrib-jshint": "^0.11.2",
|
||||
"grunt-contrib-uglify": "~0.4.0",
|
||||
"grunt-contrib-watch": "^0.5.3",
|
||||
"grunt-jscs": "^1.8.0"
|
||||
}
|
||||
}
|
||||
+213
@@ -0,0 +1,213 @@
|
||||
/* Preload images */
|
||||
body:after {
|
||||
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
+508
@@ -0,0 +1,508 @@
|
||||
/*!
|
||||
* Lightbox v2.9.0
|
||||
* by Lokesh Dhakar
|
||||
*
|
||||
* More info:
|
||||
* http://lokeshdhakar.com/projects/lightbox2/
|
||||
*
|
||||
* Copyright 2007, 2015 Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
// Uses Node, AMD or browser globals to create a module.
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node. Does not work with strict CommonJS, but
|
||||
// only CommonJS-like environments that support module.exports,
|
||||
// like Node.
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.lightbox = factory(root.jQuery);
|
||||
}
|
||||
}(this, function ($) {
|
||||
|
||||
function Lightbox(options) {
|
||||
this.album = [];
|
||||
this.currentImageIndex = void 0;
|
||||
this.init();
|
||||
|
||||
// options
|
||||
this.options = $.extend({}, this.constructor.defaults);
|
||||
this.option(options);
|
||||
}
|
||||
|
||||
// Descriptions of all options available on the demo site:
|
||||
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
|
||||
Lightbox.defaults = {
|
||||
albumLabel: 'Image %1 of %2',
|
||||
alwaysShowNavOnTouchDevices: false,
|
||||
fadeDuration: 600,
|
||||
fitImagesInViewport: true,
|
||||
imageFadeDuration: 600,
|
||||
// maxWidth: 800,
|
||||
// maxHeight: 600,
|
||||
positionFromTop: 50,
|
||||
resizeDuration: 700,
|
||||
showImageNumberLabel: true,
|
||||
wrapAround: false,
|
||||
disableScrolling: false,
|
||||
/*
|
||||
Sanitize Title
|
||||
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
|
||||
This will free you to add html tags, such as links, in the caption.
|
||||
|
||||
If the caption data is user submitted or from some other untrusted source, then set this to true
|
||||
to prevent xss and other injection attacks.
|
||||
*/
|
||||
sanitizeTitle: false
|
||||
};
|
||||
|
||||
Lightbox.prototype.option = function(options) {
|
||||
$.extend(this.options, options);
|
||||
};
|
||||
|
||||
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
|
||||
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
|
||||
};
|
||||
|
||||
Lightbox.prototype.init = function() {
|
||||
var self = this;
|
||||
// Both enable and build methods require the body tag to be in the DOM.
|
||||
$(document).ready(function() {
|
||||
self.enable();
|
||||
self.build();
|
||||
});
|
||||
};
|
||||
|
||||
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
|
||||
// that contain 'lightbox'. When these are clicked, start lightbox.
|
||||
Lightbox.prototype.enable = function() {
|
||||
var self = this;
|
||||
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
|
||||
self.start($(event.currentTarget));
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// Build html for the lightbox and the overlay.
|
||||
// Attach event handlers to the new DOM elements. click click click
|
||||
Lightbox.prototype.build = function() {
|
||||
var self = this;
|
||||
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||
|
||||
// Cache jQuery objects
|
||||
this.$lightbox = $('#lightbox');
|
||||
this.$overlay = $('#lightboxOverlay');
|
||||
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
|
||||
this.$container = this.$lightbox.find('.lb-container');
|
||||
this.$image = this.$lightbox.find('.lb-image');
|
||||
this.$nav = this.$lightbox.find('.lb-nav');
|
||||
|
||||
// Store css values for future lookup
|
||||
this.containerPadding = {
|
||||
top: parseInt(this.$container.css('padding-top'), 10),
|
||||
right: parseInt(this.$container.css('padding-right'), 10),
|
||||
bottom: parseInt(this.$container.css('padding-bottom'), 10),
|
||||
left: parseInt(this.$container.css('padding-left'), 10)
|
||||
};
|
||||
|
||||
this.imageBorderWidth = {
|
||||
top: parseInt(this.$image.css('border-top-width'), 10),
|
||||
right: parseInt(this.$image.css('border-right-width'), 10),
|
||||
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
|
||||
left: parseInt(this.$image.css('border-left-width'), 10)
|
||||
};
|
||||
|
||||
// Attach event handlers to the newly minted DOM elements
|
||||
this.$overlay.hide().on('click', function() {
|
||||
self.end();
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.hide().on('click', function(event) {
|
||||
if ($(event.target).attr('id') === 'lightbox') {
|
||||
self.end();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$outerContainer.on('click', function(event) {
|
||||
if ($(event.target).attr('id') === 'lightbox') {
|
||||
self.end();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.find('.lb-prev').on('click', function() {
|
||||
if (self.currentImageIndex === 0) {
|
||||
self.changeImage(self.album.length - 1);
|
||||
} else {
|
||||
self.changeImage(self.currentImageIndex - 1);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.$lightbox.find('.lb-next').on('click', function() {
|
||||
if (self.currentImageIndex === self.album.length - 1) {
|
||||
self.changeImage(0);
|
||||
} else {
|
||||
self.changeImage(self.currentImageIndex + 1);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/*
|
||||
Show context menu for image on right-click
|
||||
|
||||
There is a div containing the navigation that spans the entire image and lives above of it. If
|
||||
you right-click, you are right clicking this div and not the image. This prevents users from
|
||||
saving the image or using other context menu actions with the image.
|
||||
|
||||
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
|
||||
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
|
||||
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
|
||||
we set the pointer events back to auto for the nav div so it can capture hover and left-click
|
||||
events as usual.
|
||||
*/
|
||||
this.$nav.on('mousedown', function(event) {
|
||||
if (event.which === 3) {
|
||||
self.$nav.css('pointer-events', 'none');
|
||||
|
||||
self.$lightbox.one('contextmenu', function() {
|
||||
setTimeout(function() {
|
||||
this.$nav.css('pointer-events', 'auto');
|
||||
}.bind(self), 0);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
|
||||
self.end();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
||||
Lightbox.prototype.start = function($link) {
|
||||
var self = this;
|
||||
var $window = $(window);
|
||||
|
||||
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
||||
|
||||
$('select, object, embed').css({
|
||||
visibility: 'hidden'
|
||||
});
|
||||
|
||||
this.sizeOverlay();
|
||||
|
||||
this.album = [];
|
||||
var imageNumber = 0;
|
||||
|
||||
function addToAlbum($link) {
|
||||
self.album.push({
|
||||
link: $link.attr('href'),
|
||||
title: $link.attr('data-title') || $link.attr('title')
|
||||
});
|
||||
}
|
||||
|
||||
// Support both data-lightbox attribute and rel attribute implementations
|
||||
var dataLightboxValue = $link.attr('data-lightbox');
|
||||
var $links;
|
||||
|
||||
if (dataLightboxValue) {
|
||||
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
|
||||
for (var i = 0; i < $links.length; i = ++i) {
|
||||
addToAlbum($($links[i]));
|
||||
if ($links[i] === $link[0]) {
|
||||
imageNumber = i;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ($link.attr('rel') === 'lightbox') {
|
||||
// If image is not part of a set
|
||||
addToAlbum($link);
|
||||
} else {
|
||||
// If image is part of a set
|
||||
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
|
||||
for (var j = 0; j < $links.length; j = ++j) {
|
||||
addToAlbum($($links[j]));
|
||||
if ($links[j] === $link[0]) {
|
||||
imageNumber = j;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Position Lightbox
|
||||
var top = $window.scrollTop() + this.options.positionFromTop;
|
||||
var left = $window.scrollLeft();
|
||||
this.$lightbox.css({
|
||||
top: top + 'px',
|
||||
left: left + 'px'
|
||||
}).fadeIn(this.options.fadeDuration);
|
||||
|
||||
// Disable scrolling of the page while open
|
||||
if (this.options.disableScrolling) {
|
||||
$('body').addClass('lb-disable-scrolling');
|
||||
}
|
||||
|
||||
this.changeImage(imageNumber);
|
||||
};
|
||||
|
||||
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
||||
Lightbox.prototype.changeImage = function(imageNumber) {
|
||||
var self = this;
|
||||
|
||||
this.disableKeyboardNav();
|
||||
var $image = this.$lightbox.find('.lb-image');
|
||||
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
|
||||
$('.lb-loader').fadeIn('slow');
|
||||
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
||||
|
||||
this.$outerContainer.addClass('animating');
|
||||
|
||||
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||
var preloader = new Image();
|
||||
preloader.onload = function() {
|
||||
var $preloader;
|
||||
var imageHeight;
|
||||
var imageWidth;
|
||||
var maxImageHeight;
|
||||
var maxImageWidth;
|
||||
var windowHeight;
|
||||
var windowWidth;
|
||||
|
||||
$image.attr('src', self.album[imageNumber].link);
|
||||
|
||||
$preloader = $(preloader);
|
||||
|
||||
$image.width(preloader.width);
|
||||
$image.height(preloader.height);
|
||||
|
||||
if (self.options.fitImagesInViewport) {
|
||||
// Fit image inside the viewport.
|
||||
// Take into account the border around the image and an additional 10px gutter on each side.
|
||||
|
||||
windowWidth = $(window).width();
|
||||
windowHeight = $(window).height();
|
||||
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
|
||||
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
|
||||
|
||||
// Check if image size is larger then maxWidth|maxHeight in settings
|
||||
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
||||
maxImageWidth = self.options.maxWidth;
|
||||
}
|
||||
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
|
||||
maxImageHeight = self.options.maxHeight;
|
||||
}
|
||||
|
||||
// Is there a fitting issue?
|
||||
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||
imageWidth = maxImageWidth;
|
||||
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
} else {
|
||||
imageHeight = maxImageHeight;
|
||||
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
self.sizeContainer($image.width(), $image.height());
|
||||
};
|
||||
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
this.currentImageIndex = imageNumber;
|
||||
};
|
||||
|
||||
// Stretch overlay to fit the viewport
|
||||
Lightbox.prototype.sizeOverlay = function() {
|
||||
this.$overlay
|
||||
.width($(document).width())
|
||||
.height($(document).height());
|
||||
};
|
||||
|
||||
// Animate the size of the lightbox to fit the image we are showing
|
||||
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
||||
var self = this;
|
||||
|
||||
var oldWidth = this.$outerContainer.outerWidth();
|
||||
var oldHeight = this.$outerContainer.outerHeight();
|
||||
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
|
||||
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
|
||||
|
||||
function postResize() {
|
||||
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
||||
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
||||
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
||||
self.showImage();
|
||||
}
|
||||
|
||||
if (oldWidth !== newWidth || oldHeight !== newHeight) {
|
||||
this.$outerContainer.animate({
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
}, this.options.resizeDuration, 'swing', function() {
|
||||
postResize();
|
||||
});
|
||||
} else {
|
||||
postResize();
|
||||
}
|
||||
};
|
||||
|
||||
// Display the image and its details and begin preload neighboring images.
|
||||
Lightbox.prototype.showImage = function() {
|
||||
this.$lightbox.find('.lb-loader').stop(true).hide();
|
||||
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
|
||||
|
||||
this.updateNav();
|
||||
this.updateDetails();
|
||||
this.preloadNeighboringImages();
|
||||
this.enableKeyboardNav();
|
||||
};
|
||||
|
||||
// Display previous and next navigation if appropriate.
|
||||
Lightbox.prototype.updateNav = function() {
|
||||
// Check to see if the browser supports touch events. If so, we take the conservative approach
|
||||
// and assume that mouse hover events are not supported and always show prev/next navigation
|
||||
// arrows in image sets.
|
||||
var alwaysShowNav = false;
|
||||
try {
|
||||
document.createEvent('TouchEvent');
|
||||
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
|
||||
} catch (e) {}
|
||||
|
||||
this.$lightbox.find('.lb-nav').show();
|
||||
|
||||
if (this.album.length > 1) {
|
||||
if (this.options.wrapAround) {
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
|
||||
}
|
||||
this.$lightbox.find('.lb-prev, .lb-next').show();
|
||||
} else {
|
||||
if (this.currentImageIndex > 0) {
|
||||
this.$lightbox.find('.lb-prev').show();
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-prev').css('opacity', '1');
|
||||
}
|
||||
}
|
||||
if (this.currentImageIndex < this.album.length - 1) {
|
||||
this.$lightbox.find('.lb-next').show();
|
||||
if (alwaysShowNav) {
|
||||
this.$lightbox.find('.lb-next').css('opacity', '1');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Display caption, image number, and closing button.
|
||||
Lightbox.prototype.updateDetails = function() {
|
||||
var self = this;
|
||||
|
||||
// Enable anchor clicks in the injected caption html.
|
||||
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
||||
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
|
||||
this.album[this.currentImageIndex].title !== '') {
|
||||
var $caption = this.$lightbox.find('.lb-caption');
|
||||
if (this.options.sanitizeTitle) {
|
||||
$caption.text(this.album[this.currentImageIndex].title);
|
||||
} else {
|
||||
$caption.html(this.album[this.currentImageIndex].title);
|
||||
}
|
||||
$caption.fadeIn('fast')
|
||||
.find('a').on('click', function(event) {
|
||||
if ($(this).attr('target') !== undefined) {
|
||||
window.open($(this).attr('href'), $(this).attr('target'));
|
||||
} else {
|
||||
location.href = $(this).attr('href');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
||||
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
|
||||
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
|
||||
} else {
|
||||
this.$lightbox.find('.lb-number').hide();
|
||||
}
|
||||
|
||||
this.$outerContainer.removeClass('animating');
|
||||
|
||||
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
|
||||
return self.sizeOverlay();
|
||||
});
|
||||
};
|
||||
|
||||
// Preload previous and next images in set.
|
||||
Lightbox.prototype.preloadNeighboringImages = function() {
|
||||
if (this.album.length > this.currentImageIndex + 1) {
|
||||
var preloadNext = new Image();
|
||||
preloadNext.src = this.album[this.currentImageIndex + 1].link;
|
||||
}
|
||||
if (this.currentImageIndex > 0) {
|
||||
var preloadPrev = new Image();
|
||||
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
||||
}
|
||||
};
|
||||
|
||||
Lightbox.prototype.enableKeyboardNav = function() {
|
||||
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
||||
};
|
||||
|
||||
Lightbox.prototype.disableKeyboardNav = function() {
|
||||
$(document).off('.keyboard');
|
||||
};
|
||||
|
||||
Lightbox.prototype.keyboardAction = function(event) {
|
||||
var KEYCODE_ESC = 27;
|
||||
var KEYCODE_LEFTARROW = 37;
|
||||
var KEYCODE_RIGHTARROW = 39;
|
||||
|
||||
var keycode = event.keyCode;
|
||||
var key = String.fromCharCode(keycode).toLowerCase();
|
||||
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
|
||||
this.end();
|
||||
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
|
||||
if (this.currentImageIndex !== 0) {
|
||||
this.changeImage(this.currentImageIndex - 1);
|
||||
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||
this.changeImage(this.album.length - 1);
|
||||
}
|
||||
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
|
||||
if (this.currentImageIndex !== this.album.length - 1) {
|
||||
this.changeImage(this.currentImageIndex + 1);
|
||||
} else if (this.options.wrapAround && this.album.length > 1) {
|
||||
this.changeImage(0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Closing time. :-(
|
||||
Lightbox.prototype.end = function() {
|
||||
this.disableKeyboardNav();
|
||||
$(window).off('resize', this.sizeOverlay);
|
||||
this.$lightbox.fadeOut(this.options.fadeDuration);
|
||||
this.$overlay.fadeOut(this.options.fadeDuration);
|
||||
$('select, object, embed').css({
|
||||
visibility: 'visible'
|
||||
});
|
||||
if (this.options.disableScrolling) {
|
||||
$('body').removeClass('lb-disable-scrolling');
|
||||
}
|
||||
};
|
||||
|
||||
return new Lightbox();
|
||||
}));
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
<style type="text/css">
|
||||
.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
|
||||
</style>
|
||||
@@ -43,9 +43,11 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0; }
|
||||
|
||||
#main h1 {
|
||||
font-size: 2em;
|
||||
white-space: nowrap; }
|
||||
|
||||
#main h2 {
|
||||
font-size: 1.3em;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem; }
|
||||
|
||||
|
||||
+8
-3
@@ -22,14 +22,19 @@ gulp.task('scss', function() {
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(wrap('<style type="text/css">\n<%= contents %>\n</style>'))
|
||||
.pipe(gulp.dest('css'))
|
||||
.pipe(gulp.dest('css'));
|
||||
});
|
||||
|
||||
gulp.task('wrap', function(){
|
||||
return gulp.src( 'bower_components/lightbox2/dist/css/lightbox.min.css')
|
||||
.pipe(wrap('<style type="text/css">\n<%= contents %>\n</style>'))
|
||||
.pipe(gulp.dest('css'));
|
||||
})
|
||||
|
||||
// Watch Files For Changes
|
||||
gulp.task('dev-watch', function() {
|
||||
gulp.watch( 'scss/*.scss', ['scss']);
|
||||
gulp.watch( 'scss/*.scss', ['scss', 'wrap']);
|
||||
});
|
||||
|
||||
// Default Task
|
||||
gulp.task('default', ['scss']);
|
||||
gulp.task('default', ['scss', 'wrap']);
|
||||
|
||||
+3
-2
@@ -1,3 +1,4 @@
|
||||
<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.line/jquery.line.js" type="text/javascript"></script>
|
||||
<script src="js/main.js" type="text/javascript"></script>
|
||||
<!-- <script src="js/jquery.line/jquery.line.js" type="text/javascript"></script> -->
|
||||
<script src="bower_components/lightbox2/dist/js/lightbox.min.js" type="text/javascript"></script>
|
||||
<script src="js/main.js" type="text/javascript"></script>
|
||||
|
||||
@@ -69,11 +69,13 @@ h1, h2, h3, h4, h5, h6{
|
||||
// text-transform: uppercase;
|
||||
// padding: 5px 1rem;
|
||||
// top: 100px;
|
||||
font-size: 2em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h2{
|
||||
// top:0;
|
||||
font-size: 1.3em;
|
||||
white-space: nowrap;
|
||||
// padding: 5px 1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
+18
-4
@@ -8,6 +8,10 @@ if [ ! -d ../output/images ]; then
|
||||
mkdir ../output/images
|
||||
fi
|
||||
|
||||
if [ ! -d ../output/thumbs ]; then
|
||||
mkdir ../output/thumbs
|
||||
fi
|
||||
|
||||
if [ ! -d ../output/sources ]; then
|
||||
mkdir ../output/sources
|
||||
fi
|
||||
@@ -70,7 +74,7 @@ for i in ../content/*; do
|
||||
echo "<section class='images'>"$'\n' >> content.textile
|
||||
for img in $i/images/*; do
|
||||
# echo "images : $img"
|
||||
if [ -f "$img" ]; then
|
||||
if [ -f "$img" ] && [[ ! "$img" =~ ".db" ]] && [[ ! "$img" =~ ".avi" ]]; then
|
||||
# record file name
|
||||
fn=$(basename "$img")
|
||||
counter=$(printf %02d $l)
|
||||
@@ -80,14 +84,20 @@ for i in ../content/*; do
|
||||
fimg="$folder-$counter.$ext"
|
||||
# copy image file with new name
|
||||
cp -f "$img" ../output/images/$fimg
|
||||
# convert thumbs
|
||||
convert ../output/images/$fimg -resize 400x400\> ../output/thumbs/$fimg
|
||||
# replace image name in main content.textile file
|
||||
sed -i "s/images\/$fn/images\/$fimg/g" content.textile
|
||||
# pandoc can't render textile links
|
||||
sed -i "s/!images\/$fn!/<a data-lightbox='$folder' href='images\/$fimg'>!thumbs\/$fimg!<\/a>/g" content.textile
|
||||
# sed -i "s/!images\/$fn!/thumbs\/$fimg/g" content.textile
|
||||
|
||||
|
||||
# find "content.textile" -print0 | xargs -0 sed -i '' -e "s/images\/$fn/images\/$fimg/g"
|
||||
l=$(($l+1))
|
||||
# if image is not on content ...
|
||||
if [[ ! "$cont" =~ "images/$fn" ]]; then
|
||||
# ... add it at end of content
|
||||
echo "* !images/$fimg!" >> content.textile
|
||||
echo "* <a data-lightbox='$folder' href='images/$fimg'>!thumbs/$fimg!</a>" >> content.textile
|
||||
fi
|
||||
fi
|
||||
done
|
||||
@@ -103,7 +113,7 @@ for i in ../content/*; do
|
||||
for src in $i/sources/*; do
|
||||
# echo "patch : $src"
|
||||
if [ -f "$src" ]; then
|
||||
# if image is not on content ...
|
||||
# if ~ is not on file name ...
|
||||
if [[ ! "$src" =~ "~" ]]; then
|
||||
# record file name
|
||||
fn=$(basename "$src")
|
||||
@@ -145,11 +155,14 @@ cat /tmp/header|cat - content.textile > /tmp/out && mv /tmp/out content.textile
|
||||
pandoc -s \
|
||||
-f textile \
|
||||
-t html5 -o ../output/index.html \
|
||||
-H css/lightbox.min.css \
|
||||
-H css/main.css \
|
||||
-A script.tpl.html \
|
||||
content.textile
|
||||
|
||||
|
||||
cp -r fonts ../output/
|
||||
cp -r bower_components ../output/
|
||||
|
||||
|
||||
# echo "export markdown as html"
|
||||
@@ -157,6 +170,7 @@ cp -r fonts ../output/
|
||||
# -f markdown+hard_line_breaks+auto_identifiers+ascii_identifiers+tex_math_dollars+pipe_tables+all_symbols_escapable \
|
||||
# -t html5 -o index.html \
|
||||
# -c fonts/amiri/amiri.css \
|
||||
# -H bower_components/lightbox2/dist/css/lightbox.min.css \
|
||||
# -H css/styles.css \
|
||||
# -B body-base-top.tpl.html \
|
||||
# -A body-base-bot.tpl.html \
|
||||
|
||||
Reference in New Issue
Block a user