Add fancybox and enable it for the news screenshots
47
news.html
@@ -7,6 +7,48 @@
|
||||
<meta name="keywords" content="open source, django, dms, edms, cms, electronic document" />
|
||||
<link href="css/main.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="icon" type="image/png" href="images/bullet.png" title="Mayan" />
|
||||
|
||||
<!-- Add jQuery library -->
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Add mousewheel plugin (this is optional) -->
|
||||
<!-- <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> -->
|
||||
|
||||
<!-- Add fancyBox -->
|
||||
<link rel="stylesheet" href="packages/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="packages/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>
|
||||
|
||||
<!-- Optionaly add button and/or thumbnail helpers -->
|
||||
<link rel="stylesheet" href="packages/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="packages/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>
|
||||
|
||||
<link rel="stylesheet" href="packages/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="packages/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$(".fancybox").fancybox({
|
||||
prevEffect : 'fade',
|
||||
nextEffect : 'fade',
|
||||
closeBtn : false,
|
||||
helpers : {
|
||||
buttons : {},
|
||||
overlay : {
|
||||
opacity : 0.8,
|
||||
css : {
|
||||
'background-color' : '#000'
|
||||
}
|
||||
},
|
||||
thumbs : {
|
||||
width : 50,
|
||||
height : 50
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
@@ -81,19 +123,18 @@
|
||||
<p>
|
||||
<h3>Document versioning</h3><br />
|
||||
<div class="tc">Multiple document versions is almost ready and will be included in the next version (v0.11), the REST API has also been updated to expose this new functionality.</div><br />
|
||||
<img class="screenshot center" src="images/mayan-multi-ver.png" width="640px"/>
|
||||
<a class="fancybox" rel="news" href="images/mayan-multi-ver.png" title="Document versioning"><img class="screenshot center" src="images/mayan-multi-ver.png" width="640px"/></a>
|
||||
</p>
|
||||
|
||||
<li><h3><span class="red">December 3, 2011</span></h3></li>
|
||||
<p>
|
||||
<h3>Digital signature verification</h3><br />
|
||||
<div class="tc">Digital signature verification has seen many updates but it is still uncertain if it will be complete enough to be included in the next version.</div><br />
|
||||
<img class="screenshot center" src="images/mayan-signature.png" width="640px"/>
|
||||
<a class="fancybox" rel="news" href="images/mayan-signature.png" title="Signature verification"><img class="screenshot center" src="images/mayan-signature.png" width="640px"/></a>
|
||||
</p>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<p class="right">Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.solucija.com/">Solucija</a></p>
|
||||
|
||||
34
packages/fancybox/CHANGELOG.md
Normal file
@@ -0,0 +1,34 @@
|
||||
fancyBox - Changelog
|
||||
=========
|
||||
|
||||
### Version 2.0.4 - December 12, 2011
|
||||
|
||||
* Fixed #47 - fix overriding properties
|
||||
* Add option 'position' to thumbnail and button helpers
|
||||
|
||||
|
||||
### Version 2.0.3 - November 29, 2011
|
||||
|
||||
* Fixed #29 - broken elastic transitions
|
||||
|
||||
|
||||
### Version 2.0.2 - November 28, 2011
|
||||
|
||||
* Fixed slidshow
|
||||
* Fixed scrollbar issue when displayed a very tall image
|
||||
* New option "nextClick" - navigate to next gallery item when user clicks the content
|
||||
* New option "modal" - to disable navigation and closing
|
||||
* Add 'metadata' plugin support
|
||||
* Add ability to create groups using 'data-fancybox-group' attribute
|
||||
* Updated manual usage to match earlier releases
|
||||
|
||||
|
||||
### Version 2.0.1 - November 23, 2011
|
||||
|
||||
* Fixed keyboard events inside form elements
|
||||
* Fixed manual usage
|
||||
|
||||
|
||||
### Version 2.0.0 - November 21, 2011
|
||||
|
||||
First release - completely rewritten, many new features and updated graphics.
|
||||
133
packages/fancybox/README.md
Normal file
@@ -0,0 +1,133 @@
|
||||
fancyBox
|
||||
========
|
||||
|
||||
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
|
||||
|
||||
More information and examples: http://www.fancyapps.com/fancybox/
|
||||
|
||||
License: http://www.fancyapps.com/fancybox/#license
|
||||
|
||||
Copyright (c) 2011 Janis Skarnelis - janis@fancyapps.com
|
||||
|
||||
|
||||
How to use
|
||||
----------
|
||||
|
||||
To get started, download the plugin, unzip it and copy files to your website/application directory.
|
||||
Load files in the <head> section of your HTML document. Make sure you also add the jQuery library.
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
|
||||
</head>
|
||||
|
||||
Create your links with a `title` if you want a title to be shown, and add a class:
|
||||
|
||||
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
|
||||
|
||||
If you have a set of related items that you would like to group,
|
||||
additionally include a group name in the `rel` (or `data-fancybox-group`) attribute:
|
||||
|
||||
<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
|
||||
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>
|
||||
|
||||
Initialise the script like this:
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.fancybox').fancybox();
|
||||
});
|
||||
</script>
|
||||
|
||||
Script uses the `href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc).
|
||||
|
||||
Ajax:
|
||||
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
|
||||
|
||||
Iframe:
|
||||
<a href="example.html" class="fancybox fancybox.iframe">Example</a>
|
||||
|
||||
Inline:
|
||||
<a href="#example" class="fancybox">Example</a>
|
||||
|
||||
SWF:
|
||||
<a href="example.swf" class="fancybox">Example</a>
|
||||
|
||||
Image:
|
||||
<a href="example.jpg" class="fancybox">Example</a>
|
||||
|
||||
Note, ajax requests are subject to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy).
|
||||
|
||||
|
||||
Advanced
|
||||
--------
|
||||
|
||||
### Helpers
|
||||
|
||||
Helpers provide a simple mechanism to extend the capabilities of fancyBox.
|
||||
There ar two built-in helpers - 'overlay' and 'title'. You can disable them or set custom options:
|
||||
|
||||
Disable 'overlay' helper and change title location:
|
||||
$(".fancybox").fancybox({
|
||||
helpers: {
|
||||
overlay : null,
|
||||
title: {
|
||||
type : 'inside'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
### API
|
||||
|
||||
Also available are event driven callback methods. The `this` keyword refers to the curent or upcoming object (depends on callback method). Here is how you can change title:
|
||||
|
||||
$(".fancybox").fancybox({
|
||||
afterLoad : function() {
|
||||
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
|
||||
}
|
||||
});
|
||||
|
||||
It`s possible to open fancyBox programmatically in various ways:
|
||||
|
||||
HTML content:
|
||||
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
|
||||
title : 'Custom Title'
|
||||
});
|
||||
|
||||
DOM element:
|
||||
$.fancybox( $("#inline"), {
|
||||
title : 'Custom Title'
|
||||
});
|
||||
|
||||
Custom object:
|
||||
$.fancybox({
|
||||
href: 'example.jpg',
|
||||
title : 'Custom Title'
|
||||
});
|
||||
|
||||
Array of objects:
|
||||
$.fancybox([
|
||||
{
|
||||
href: 'example1.jpg',
|
||||
title : 'Custom Title 1'
|
||||
},
|
||||
{
|
||||
href: 'example2.jpg',
|
||||
title : 'Custom Title 2'
|
||||
}
|
||||
], {
|
||||
padding: 0
|
||||
});
|
||||
|
||||
There are several methods that allow you to interact with and manipulate fancyBox, example:
|
||||
|
||||
Close fancybox:
|
||||
$.fancybox.close();
|
||||
|
||||
|
||||
Bug tracker
|
||||
-----------
|
||||
|
||||
Have a bug? Please create an issue on GitHub at https://github.com/fancyapps/fancyBox/issues
|
||||
BIN
packages/fancybox/demo/1_b.jpg
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
packages/fancybox/demo/1_s.jpg
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
packages/fancybox/demo/2_b.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
packages/fancybox/demo/2_s.jpg
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
packages/fancybox/demo/3_b.jpg
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
packages/fancybox/demo/3_s.jpg
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
packages/fancybox/demo/4_b.jpg
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
packages/fancybox/demo/4_s.jpg
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
packages/fancybox/demo/5_b.jpg
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
packages/fancybox/demo/5_s.jpg
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
15
packages/fancybox/demo/ajax.txt
Normal file
@@ -0,0 +1,15 @@
|
||||
<div style="max-width:700px;">
|
||||
<h2>Lorem ipsum dolor sit amet3</h2>
|
||||
<p>
|
||||
<a href="javascript:jQuery.fancybox.close();">Close me</a>
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum ante et sapien dignissim in viverra magna feugiat. Donec tempus ipsum nec neque dignissim quis eleifend eros gravida. Praesent nisi massa, sodales quis tincidunt ac, semper quis risus. In suscipit nisl sed leo aliquet consequat. Integer vitae augue in risus porttitor pellentesque eu eget odio. Fusce ut sagittis quam. Morbi aliquam interdum blandit. Integer pharetra tempor velit, aliquam dictum justo tempus sed. Morbi congue fringilla justo a feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis metus et nisl consectetur pharetra. Nam bibendum turpis eu metus luctus eu volutpat sem molestie. Nam sollicitudin porttitor lorem, ac ultricies est venenatis eu. Ut dignissim elit et orci feugiat ac placerat purus euismod. Ut mi lorem, cursus et sagittis elementum, luctus ac massa.
|
||||
</p>
|
||||
<p>
|
||||
Phasellus et ligula vel diam ullamcorper volutpat. Integer rhoncus rhoncus aliquam. Aliquam erat volutpat. Aenean luctus vestibulum placerat. Quisque quam neque, lacinia aliquet eleifend ac, aliquet blandit felis. Curabitur porta ultricies dui, sit amet mattis quam euismod a. Ut eleifend scelerisque neque, sit amet accumsan odio consequat ut. Proin facilisis auctor elit sed accumsan. Cras dapibus nisl in nisi rhoncus laoreet. Nullam pellentesque tortor libero, eget facilisis ipsum. Donec ultricies tellus tellus, in tincidunt purus. Nullam in est aliquam velit scelerisque blandit. In tincidunt, magna a dapibus imperdiet, quam urna elementum leo, vitae rhoncus nisl velit cursus velit. In dignissim sem ac mauris rhoncus ornare.
|
||||
</p>
|
||||
<p>
|
||||
Duis imperdiet velit vel quam malesuada suscipit imperdiet tellus hendrerit. Mauris vestibulum odio mauris, ut placerat leo. Mauris quis neque at tellus feugiat congue id non enim. Nam vehicula posuere nulla eget vehicula. Donec pretium purus nec ligula porta eu laoreet sapien venenatis. Nulla facilisi. Phasellus eget mi enim. Phasellus molestie tincidunt ultrices. Aenean id sem a tellus lobortis tincidunt. Nam laoreet nulla vel velit tincidunt ac rutrum libero malesuada. Nulla consequat dolor quis nisl tempor fermentum. Integer sodales pretium varius. Aenean a leo vitae odio dictum dignissim malesuada nec dolor. Phasellus adipiscing viverra est, ac sagittis libero sagittis quis. Sed interdum dapibus nunc et fringilla. Nunc vel velit et urna laoreet bibendum.
|
||||
</p>
|
||||
</div>
|
||||
227
packages/fancybox/demo/index.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<!-- Add jQuery library -->
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
|
||||
<!-- Add mousewheel plugin (this is optional) -->
|
||||
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
|
||||
|
||||
<!-- Add fancyBox main JS and CSS files -->
|
||||
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
|
||||
|
||||
<!-- Add Button helper (this is optional) -->
|
||||
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=2.0.3" />
|
||||
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=2.0.3"></script>
|
||||
|
||||
<!-- Add Thumbnail helper (this is optional) -->
|
||||
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=2.0.3" />
|
||||
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=2.0.3"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
/*
|
||||
Simple image gallery. Use default settings
|
||||
*/
|
||||
|
||||
$('.fancybox').fancybox();
|
||||
|
||||
/*
|
||||
Different effects
|
||||
*/
|
||||
|
||||
// Change title type, overlay opening speed and opacity
|
||||
$(".fancybox-effects-a").fancybox({
|
||||
helpers: {
|
||||
title : {
|
||||
type : 'outside'
|
||||
},
|
||||
overlay : {
|
||||
speedIn : 500,
|
||||
opacity : 0.95
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Disable opening and closing animations, change title type
|
||||
$(".fancybox-effects-b").fancybox({
|
||||
openEffect : 'none',
|
||||
closeEffect : 'none',
|
||||
|
||||
helpers : {
|
||||
title : {
|
||||
type : 'over'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set custom style, close if clicked, change title type and overlay color
|
||||
$(".fancybox-effects-c").fancybox({
|
||||
wrapCSS : 'fancybox-custom',
|
||||
closeClick : true,
|
||||
|
||||
helpers : {
|
||||
title : {
|
||||
type : 'inside'
|
||||
},
|
||||
overlay : {
|
||||
css : {
|
||||
'background-color' : '#eee'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Remove padding, set opening and closing animations, close if clicked and disable overlay
|
||||
$(".fancybox-effects-d").fancybox({
|
||||
padding: 0,
|
||||
|
||||
openEffect : 'elastic',
|
||||
openSpeed : 150,
|
||||
|
||||
closeEffect : 'elastic',
|
||||
closeSpeed : 150,
|
||||
|
||||
closeClick : true,
|
||||
|
||||
helpers : {
|
||||
overlay : null
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Button helper. Disable animations, hide close button, change title type and content
|
||||
*/
|
||||
|
||||
$('.fancybox-buttons').fancybox({
|
||||
openEffect : 'none',
|
||||
closeEffect : 'none',
|
||||
|
||||
prevEffect : 'none',
|
||||
nextEffect : 'none',
|
||||
|
||||
closeBtn : false,
|
||||
|
||||
helpers : {
|
||||
title : {
|
||||
type : 'inside'
|
||||
},
|
||||
buttons : {}
|
||||
},
|
||||
|
||||
afterLoad : function() {
|
||||
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
|
||||
*/
|
||||
|
||||
$('.fancybox-thumbs').fancybox({
|
||||
prevEffect : 'none',
|
||||
nextEffect : 'none',
|
||||
|
||||
closeBtn : false,
|
||||
arrows : false,
|
||||
nextClick : true,
|
||||
|
||||
helpers : {
|
||||
thumbs : {
|
||||
width : 50,
|
||||
height : 50
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.fancybox-custom .fancybox-outer {
|
||||
box-shadow: 0 0 50px #222;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>fancyBox</h1>
|
||||
|
||||
<p>This is a demonstration. More information and examples: <a href="http://fancyapps.com/fancybox/">www.fancyapps.com/fancybox/</a></p>
|
||||
|
||||
<h3>Simple image gallery</h3>
|
||||
<p>
|
||||
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
|
||||
</p>
|
||||
|
||||
<h3>Different effects</h3>
|
||||
<p>
|
||||
<a class="fancybox-effects-a" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-effects-b" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-effects-c" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-effects-d" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
|
||||
</p>
|
||||
|
||||
<h3>Various types</h3>
|
||||
<p>
|
||||
fancyBox will try to guess content type from href attribute but you can specify it directly by adding classname (fancybox.image, fancybox.iframe, etc).
|
||||
</p>
|
||||
<ul>
|
||||
<li><a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
|
||||
<li><a class="fancybox fancybox.ajax" href="ajax.txt">Ajax</a></li>
|
||||
<li><a class="fancybox fancybox.iframe" href="http://jquery.com">Iframe</a></li>
|
||||
<li><a class="fancybox" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li>
|
||||
</ul>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="inline1" style="width:400px;">
|
||||
<h3>Etiam quis mi eu elit</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Button helper</h3>
|
||||
<p>
|
||||
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
|
||||
</p>
|
||||
|
||||
<h3>Thumbnail helper</h3>
|
||||
<p>
|
||||
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
|
||||
|
||||
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ajax example will not run from your local computer and requires a server to run.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Photo Credit: Instagrammer @whitjohns
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
4
packages/fancybox/lib/jquery-1.7.1.min.js
vendored
Normal file
13
packages/fancybox/lib/jquery.mousewheel-3.0.6.pack.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.6
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
(function(d){function e(a){var b=a||window.event,c=[].slice.call(arguments,1),f=0,e=0,g=0,a=d.event.fix(b);a.type="mousewheel";b.wheelDelta&&(f=b.wheelDelta/120);b.detail&&(f=-b.detail/3);g=f;b.axis!==void 0&&b.axis===b.HORIZONTAL_AXIS&&(g=0,e=-1*f);b.wheelDeltaY!==void 0&&(g=b.wheelDeltaY/120);b.wheelDeltaX!==void 0&&(e=-1*b.wheelDeltaX/120);c.unshift(a,f,e,g);return(d.event.dispatch||d.event.handle).apply(this,c)}var c=["DOMMouseScroll","mousewheel"];if(d.event.fixHooks)for(var h=c.length;h;)d.event.fixHooks[c[--h]]=
|
||||
d.event.mouseHooks;d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],e,false);else this.onmousewheel=e},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],e,false);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);
|
||||
BIN
packages/fancybox/source/blank.gif
Normal file
|
After Width: | Height: | Size: 43 B |
BIN
packages/fancybox/source/fancybox_loading.gif
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
packages/fancybox/source/fancybox_sprite.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
packages/fancybox/source/helpers/fancybox_buttons.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
85
packages/fancybox/source/helpers/jquery.fancybox-buttons.css
Normal file
@@ -0,0 +1,85 @@
|
||||
#fancybox-buttons {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
#fancybox-buttons.top {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons.bottom {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons ul {
|
||||
display: block;
|
||||
width: 170px;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #111;
|
||||
-webkit-box-shadow: 0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
-moz-box-shadow: 0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
background: #111 -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.15)),color-stop(.5,rgba(255,255,255,.1)),to(rgba(255,255,255,.15)));
|
||||
background: #111 -moz-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.15) 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#fancybox-buttons ul li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-indent: -9999px;
|
||||
background-image: url('fancybox_buttons.png');
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPrev {
|
||||
width: 32px;
|
||||
background-position: 6px 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnNext {
|
||||
background-position: -33px 0;
|
||||
border-right: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPlay {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPlayOn {
|
||||
background-position: -30px -30px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnToggle {
|
||||
background-position: 3px -60px;
|
||||
border-left: 1px solid #111;
|
||||
border-right: 1px solid #3e3e3e;
|
||||
width: 35px
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnToggleOn {
|
||||
background-position: -27px -60px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnClose {
|
||||
border-left: 1px solid #111;
|
||||
width: 38px;
|
||||
background-position: -57px 0px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnDisabled {
|
||||
opacity : 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
115
packages/fancybox/source/helpers/jquery.fancybox-buttons.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/*!
|
||||
* Buttons helper for fancyBox
|
||||
* version: 1.0.2
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* buttons: {
|
||||
* position : 'top'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Options:
|
||||
* tpl - HTML template
|
||||
* position - 'top' or 'bottom'
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.buttons = {
|
||||
tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>',
|
||||
list: null,
|
||||
buttons: {},
|
||||
|
||||
update: function () {
|
||||
var toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
|
||||
|
||||
//Size toggle button
|
||||
if (F.current.canShrink) {
|
||||
toggle.addClass('btnToggleOn');
|
||||
|
||||
} else if (!F.current.canExpand) {
|
||||
toggle.addClass('btnDisabled');
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad: function (opts) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (F.group.length < 2) {
|
||||
F.coming.helpers.buttons = false;
|
||||
F.coming.closeBtn = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase top margin to give space for buttons
|
||||
F.coming.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
|
||||
},
|
||||
|
||||
onPlayStart: function () {
|
||||
if (this.list) {
|
||||
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
onPlayEnd: function () {
|
||||
if (this.list) {
|
||||
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
var buttons;
|
||||
|
||||
if (!this.list) {
|
||||
this.list = $(opts.tpl || this.tpl).addClass(opts.position || 'top').appendTo('body');
|
||||
|
||||
this.buttons = {
|
||||
prev : this.list.find('.btnPrev').click( F.prev ),
|
||||
next : this.list.find('.btnNext').click( F.next ),
|
||||
play : this.list.find('.btnPlay').click( F.play ),
|
||||
toggle : this.list.find('.btnToggle').click( F.toggle )
|
||||
}
|
||||
}
|
||||
|
||||
buttons = this.buttons;
|
||||
|
||||
//Prev
|
||||
if (F.current.index > 0 || F.current.loop) {
|
||||
buttons.prev.removeClass('btnDisabled');
|
||||
} else {
|
||||
buttons.prev.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
//Next / Play
|
||||
if (F.current.loop || F.current.index < F.group.length - 1) {
|
||||
buttons.next.removeClass('btnDisabled');
|
||||
buttons.play.removeClass('btnDisabled');
|
||||
|
||||
} else {
|
||||
buttons.next.addClass('btnDisabled');
|
||||
buttons.play.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.list) {
|
||||
this.list.remove();
|
||||
}
|
||||
|
||||
this.list = null;
|
||||
this.buttons = {};
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
54
packages/fancybox/source/helpers/jquery.fancybox-thumbs.css
Normal file
@@ -0,0 +1,54 @@
|
||||
#fancybox-thumbs {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
#fancybox-thumbs.bottom {
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
#fancybox-thumbs.top {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li {
|
||||
float: left;
|
||||
padding: 1px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li.active {
|
||||
opacity: 0.75;
|
||||
padding: 0;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #222;
|
||||
background: #111;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li img {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
151
packages/fancybox/source/helpers/jquery.fancybox-thumbs.js
Normal file
@@ -0,0 +1,151 @@
|
||||
/*!
|
||||
* Thumbnail helper for fancyBox
|
||||
* version: 1.0.2
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* thumbs: {
|
||||
* width : 50,
|
||||
* height : 50
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Options:
|
||||
* width - thumbnail width
|
||||
* height - thumbnail height
|
||||
* source - function to obtain the URL of the thumbnail image
|
||||
* position - 'top' or 'bottom'
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.thumbs = {
|
||||
wrap: null,
|
||||
list: null,
|
||||
width: 0,
|
||||
|
||||
//Default function to obtain the URL of the thumbnail image
|
||||
source: function (el) {
|
||||
var img = $(el).find('img');
|
||||
|
||||
return img.length ? img.attr('src') : el.href;
|
||||
},
|
||||
|
||||
init: function (opts) {
|
||||
var that = this,
|
||||
list,
|
||||
thumbWidth = opts.width || 50,
|
||||
thumbHeight = opts.height || 50,
|
||||
thumbSource = opts.source || this.source;
|
||||
|
||||
//Build list structure
|
||||
list = '';
|
||||
|
||||
for (var n = 0; n < F.group.length; n++) {
|
||||
list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
|
||||
}
|
||||
|
||||
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo('body');
|
||||
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
|
||||
|
||||
//Load each thumbnail
|
||||
$.each(F.group, function (i) {
|
||||
$("<img />").load(function () {
|
||||
var width = this.width,
|
||||
height = this.height,
|
||||
widthRatio, heightRatio, parent;
|
||||
|
||||
if (!that.list || !width || !height) {
|
||||
return;
|
||||
}
|
||||
|
||||
//Calculate thumbnail width/height and center it
|
||||
widthRatio = width / thumbWidth;
|
||||
heightRatio = height / thumbHeight;
|
||||
parent = that.list.children().eq(i).find('a');
|
||||
|
||||
if (widthRatio >= 1 && heightRatio >= 1) {
|
||||
if (widthRatio > heightRatio) {
|
||||
width = Math.floor(width / heightRatio);
|
||||
height = thumbHeight;
|
||||
|
||||
} else {
|
||||
width = thumbWidth;
|
||||
height = Math.floor(height / widthRatio);
|
||||
}
|
||||
}
|
||||
|
||||
$(this).css({
|
||||
width: width,
|
||||
height: height,
|
||||
top: Math.floor(thumbHeight / 2 - height / 2),
|
||||
left: Math.floor(thumbWidth / 2 - width / 2)
|
||||
});
|
||||
|
||||
parent.width(thumbWidth).height(thumbHeight);
|
||||
|
||||
$(this).hide().appendTo(parent).fadeIn(300);
|
||||
|
||||
}).attr('src', thumbSource(this));
|
||||
});
|
||||
|
||||
//Set initial width
|
||||
this.width = this.list.children().eq(0).outerWidth();
|
||||
|
||||
this.list.width(this.width * (F.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5)));
|
||||
},
|
||||
|
||||
//Center list
|
||||
update: function (opts) {
|
||||
if (this.list) {
|
||||
this.list.stop(true).animate({
|
||||
'left': Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5))
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad: function (opts) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (F.group.length < 2) {
|
||||
F.coming.helpers.thumbs = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase bottom margin to give space for thumbs
|
||||
F.coming.margin[ opts.position === 'top' ? 0 : 2 ] = opts.height + 30;
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
//Check if exists and create or update list
|
||||
if (this.list) {
|
||||
this.update(opts);
|
||||
|
||||
} else {
|
||||
this.init(opts);
|
||||
}
|
||||
|
||||
//Set active element
|
||||
this.list.children().removeClass('active').eq(F.current.index).addClass('active');
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.wrap) {
|
||||
this.wrap.remove();
|
||||
}
|
||||
|
||||
this.wrap = null;
|
||||
this.list = null;
|
||||
this.width = 0;
|
||||
}
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
224
packages/fancybox/source/jquery.fancybox.css
vendored
Normal file
@@ -0,0 +1,224 @@
|
||||
/*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */
|
||||
.fancybox-tmp iframe, .fancybox-tmp object {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fancybox-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.fancybox-outer {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #f9f9f9;
|
||||
color: #444;
|
||||
text-shadow: none;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fancybox-opened {
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.fancybox-opened .fancybox-outer {
|
||||
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.fancybox-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-error {
|
||||
color: #444;
|
||||
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.fancybox-image, .fancybox-iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.fancybox-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#fancybox-loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -21px;
|
||||
margin-left: -21px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: url('fancybox_loading.gif');
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
z-index: 1010;
|
||||
}
|
||||
|
||||
.fancybox-close, .fancybox-prev span, .fancybox-next span {
|
||||
background-image: url('fancybox_sprite.png');
|
||||
}
|
||||
|
||||
.fancybox-close {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: -18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
z-index: 1004;
|
||||
}
|
||||
|
||||
.fancybox-prev, .fancybox-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background: transparent url('blank.gif'); /* helps IE */
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.fancybox-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fancybox-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fancybox-prev span, .fancybox-next span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -9999px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-top: -18px;
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.fancybox-prev span {
|
||||
background-position: 0 -36px;
|
||||
}
|
||||
|
||||
.fancybox-next span {
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
|
||||
.fancybox-prev:hover, .fancybox-next:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-prev:hover span {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.fancybox-next:hover span {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.fancybox-tmp {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Overlay helper */
|
||||
|
||||
#fancybox-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 1001;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Title helper */
|
||||
|
||||
.fancybox-title {
|
||||
visibility: hidden;
|
||||
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
z-index: 1005;
|
||||
}
|
||||
|
||||
.fancybox-opened .fancybox-title {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-title-float-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
margin-bottom: -35px;
|
||||
z-index: 1003;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fancybox-title-float-wrap .child {
|
||||
display: inline-block;
|
||||
margin-right: -100%;
|
||||
padding: 2px 20px;
|
||||
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
-webkit-border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
text-shadow: 0 1px 2px #222;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fancybox-title-outside-wrap {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fancybox-title-inside-wrap {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fancybox-title-over-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
1310
packages/fancybox/source/jquery.fancybox.js
vendored
Normal file
32
packages/fancybox/source/jquery.fancybox.pack.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */
|
||||
(function(u,q,e){var l=e(u),r=e(q),a=e.fancybox=function(){a.open.apply(this,arguments)},s=!1,t=null;e.extend(a,{version:"2.0.4",defaults:{padding:15,margin:20,width:800,height:600,minWidth:200,minHeight:200,maxWidth:9999,maxHeight:9999,autoSize:!0,fitToView:!0,aspectRatio:!1,topRatio:0.5,fixed:!e.browser.msie||6<e.browser.version||!q.documentElement.hasOwnProperty("ontouchstart"),scrolling:"auto",wrapCSS:"fancybox-default",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,
|
||||
playSpeed:3E3,modal:!1,loop:!0,ajax:{},keys:{next:[13,32,34,39,40],prev:[8,33,37,38],close:[27]},tpl:{wrap:'<div class="fancybox-wrap"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0" '+(e.browser.msie?'allowtransparency="true""':"")+' scrolling="{scrolling}" src="{href}"></iframe>',swf:'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',
|
||||
error:'<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',closeBtn:'<div title="Close" class="fancybox-item fancybox-close"></div>',next:'<a title="Next" class="fancybox-item fancybox-next"><span></span></a>',prev:'<a title="Previous" class="fancybox-item fancybox-prev"><span></span></a>'},openEffect:"fade",openSpeed:250,openEasing:"swing",openOpacity:!0,openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",
|
||||
nextEffect:"elastic",nextSpeed:300,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:300,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:{speedIn:0,speedOut:300,opacity:0.8,css:{cursor:"pointer"},closeClick:!0},title:{type:"float"}}},group:{},opts:{},coming:null,current:null,isOpen:!1,isOpened:!1,wrap:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(b,c){e.isArray(b)||(b=[b]);if(b.length)a.close(!0),
|
||||
a.opts=e.extend(!0,{},a.defaults,c),a.group=b,a._start(a.opts.index||0)},cancel:function(){if(!(a.coming&&!1===a.trigger("onCancel"))&&(a.coming=null,a.hideLoading(),a.ajaxLoad&&a.ajaxLoad.abort(),a.ajaxLoad=null,a.imgPreload))a.imgPreload.onload=a.imgPreload.onabort=a.imgPreload.onerror=null},close:function(b){a.cancel();if(a.current&&!1!==a.trigger("beforeClose"))a.unbindEvents(),!a.isOpen||b&&!0===b[0]?(e(".fancybox-wrap").stop().trigger("onReset").remove(),a._afterZoomOut()):(a.isOpen=a.isOpened=
|
||||
!1,e(".fancybox-item").remove(),a.wrap.stop(!0).removeClass("fancybox-opened"),a.inner.css("overflow","hidden"),a.transitions[a.current.closeMethod]())},play:function(b){var c=function(){clearTimeout(a.player.timer)},d=function(){c();if(a.current&&a.player.isActive)a.player.timer=setTimeout(a.next,a.current.playSpeed)},g=function(){c();e("body").unbind(".player");a.player.isActive=!1;a.trigger("onPlayEnd")};if(a.player.isActive||b&&!1===b[0])g();else if(a.current&&(a.current.loop||a.current.index<
|
||||
a.group.length-1))a.player.isActive=!0,e("body").bind({"afterShow.player onUpdate.player":d,"onCancel.player beforeClose.player":g,"beforeLoad.player":c}),d(),a.trigger("onPlayStart")},next:function(){a.current&&a.jumpto(a.current.index+1)},prev:function(){a.current&&a.jumpto(a.current.index-1)},jumpto:function(b){a.current&&(b=parseInt(b,10),1<a.group.length&&a.current.loop&&(b>=a.group.length?b=0:0>b&&(b=a.group.length-1)),"undefined"!==typeof a.group[b]&&(a.cancel(),a._start(b)))},reposition:function(b){a.isOpen&&
|
||||
a.wrap.css(a._getPosition(b))},update:function(){a.isOpen&&(s||(t=setInterval(function(){if(s&&(s=!1,clearTimeout(t),a.current)){if(a.current.autoSize)a.inner.height("auto"),a.current.height=a.inner.height();a._setDimension();a.current.canGrow&&a.inner.height("auto");a.reposition();a.trigger("onUpdate")}},100)),s=!0)},toggle:function(){if(a.isOpen)a.current.fitToView=!a.current.fitToView,a.update()},hideLoading:function(){e("#fancybox-loading").remove()},showLoading:function(){a.hideLoading();e('<div id="fancybox-loading"></div>').click(a.cancel).appendTo("body")},
|
||||
getViewport:function(){return{x:l.scrollLeft(),y:l.scrollTop(),w:l.width(),h:l.height()}},unbindEvents:function(){a.wrap&&a.wrap.unbind(".fb");r.unbind(".fb");l.unbind(".fb")},bindEvents:function(){var b=a.current,c=b.keys;b&&(l.bind("resize.fb, orientationchange.fb",a.update),c&&r.bind("keydown.fb",function(b){var g;if(!b.ctrlKey&&!b.altKey&&!b.shiftKey&&!b.metaKey&&0>e.inArray(b.target.tagName.toLowerCase(),["input","textarea","select","button"]))g=b.keyCode,-1<e.inArray(g,c.close)?(a.close(),b.preventDefault()):
|
||||
-1<e.inArray(g,c.next)?(a.next(),b.preventDefault()):-1<e.inArray(g,c.prev)&&(a.prev(),b.preventDefault())}),e.fn.mousewheel&&b.mouseWheel&&1<a.group.length&&a.wrap.bind("mousewheel.fb",function(b,c){var f=e(b.target).get(0);if(0===f.clientHeight||f.scrollHeight===f.clientHeight)b.preventDefault(),a[0<c?"prev":"next"]()}))},trigger:function(b){var c,d=a[-1<e.inArray(b,["onCancel","beforeLoad","afterLoad"])?"coming":"current"];if(d){e.isFunction(d[b])&&(c=d[b].apply(d,Array.prototype.slice.call(arguments,
|
||||
1)));if(!1===c)return!1;d.helpers&&e.each(d.helpers,function(c,f){if(f&&"undefined"!==typeof a.helpers[c]&&e.isFunction(a.helpers[c][b]))a.helpers[c][b](f,d)});e.event.trigger(b+".fb")}},isImage:function(a){return a&&a.match(/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i)},isSWF:function(a){return a&&a.match(/\.(swf)(.*)?$/i)},_start:function(b){var c={},d=a.group[b]||null,g,f,k;if("object"===typeof d&&(d.nodeType||d instanceof e))g=!0,e.metadata&&(c=e(d).metadata());c=e.extend(!0,{},a.opts,{index:b,element:d},
|
||||
e.isPlainObject(d)?d:c);e.each(["href","title","content","type"],function(b,f){c[f]=a.opts[f]||g&&e(d).attr(f)||c[f]||null});if("number"===typeof c.margin)c.margin=[c.margin,c.margin,c.margin,c.margin];c.modal&&e.extend(!0,c,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,mouseWheel:!1,keys:null,helpers:{overlay:{css:{cursor:"auto"},closeClick:!1}}});a.coming=c;if(!1===a.trigger("beforeLoad"))a.coming=null;else{f=c.type;b=c.href;if(!f)g&&(k=e(d).data("fancybox-type"),!k&&d.className&&(f=(k=d.className.match(/fancybox\.(\w+)/))?
|
||||
k[1]:null)),!f&&b&&(a.isImage(b)?f="image":a.isSWF(b)?f="swf":b.match(/^#/)&&(f="inline")),f||(f=g?"inline":"html"),c.type=f;"inline"===f||"html"===f?(c.content=c.content||("inline"===f&&b?e(b):d),c.content.length||(f=null)):(c.href=b||d,c.href||(f=null));c.group=a.group;"image"===f?a._loadImage():"ajax"===f?a._loadAjax():f?a._afterLoad():a._error("type")}},_error:function(b){e.extend(a.coming,{type:"html",autoSize:!0,minHeight:"0",hasError:b,content:a.coming.tpl.error});a._afterLoad()},_loadImage:function(){a.imgPreload=
|
||||
new Image;a.imgPreload.onload=function(){this.onload=this.onerror=null;a.coming.width=this.width;a.coming.height=this.height;a._afterLoad()};a.imgPreload.onerror=function(){this.onload=this.onerror=null;a._error("image")};a.imgPreload.src=a.coming.href;a.imgPreload.complete||a.showLoading()},_loadAjax:function(){a.showLoading();a.ajaxLoad=e.ajax(e.extend({},a.coming.ajax,{url:a.coming.href,error:function(b,c){"abort"!==c?a._error("ajax",b):a.hideLoading()},success:function(b,c){if("success"===c)a.coming.content=
|
||||
b,a._afterLoad()}}))},_preload:function(){var b=a.group,c=a.current.index,d=function(b){if(b&&a.isImage(b))(new Image).src=b};1<b.length&&(d(e(b[c+1]||b[0]).attr("href")),d(e(b[c-1]||b[b.length-1]).attr("href")))},_afterLoad:function(){a.hideLoading();!a.coming||!1===a.trigger("afterLoad",a.current)?a.coming=!1:(a.isOpened?(e(".fancybox-item").remove(),a.wrap.stop(!0).removeClass("fancybox-opened"),a.inner.css("overflow","hidden"),a.transitions[a.current.prevMethod]()):(e(".fancybox-wrap").stop().trigger("onReset").remove(),
|
||||
a.trigger("afterClose")),a.unbindEvents(),a.isOpen=!1,a.current=a.coming,a.coming=!1,a.wrap=e(a.current.tpl.wrap).addClass("fancybox-tmp "+a.current.wrapCSS).appendTo("body"),a.outer=e(".fancybox-outer",a.wrap).css("padding",a.current.padding+"px"),a.inner=e(".fancybox-inner",a.wrap),a._setContent(),a.trigger("beforeShow"),a._setDimension(),a.wrap.hide().removeClass("fancybox-tmp"),a.bindEvents(),a._preload(),a.transitions[a.isOpened?a.current.nextMethod:a.current.openMethod]())},_setContent:function(){var b,
|
||||
c,d=a.current,g=d.type;switch(g){case "inline":case "ajax":case "html":b=d.content;"inline"===g&&b instanceof e&&(b=b.show().detach(),b.parent().hasClass("fancybox-inner")&&b.parents(".fancybox-wrap").trigger("onReset").remove(),e(a.wrap).bind("onReset",function(){b.appendTo("body").hide()}));if(d.autoSize)c=e('<div class="fancybox-tmp"></div>').appendTo(e("body")).append(b),d.width=c.outerWidth(),d.height=c.outerHeight(!0),b=c.contents().detach(),c.remove();break;case "image":b=d.tpl.image.replace("{href}",
|
||||
d.href);d.aspectRatio=!0;break;case "swf":b=d.tpl.swf.replace(/\{width\}/g,d.width).replace(/\{height\}/g,d.height).replace(/\{href\}/g,d.href);break;case "iframe":b=d.tpl.iframe.replace("{href}",d.href).replace("{scrolling}",d.scrolling).replace("{rnd}",(new Date).getTime())}if(-1<e.inArray(g,["image","swf","iframe"]))d.autoSize=!1,d.scrolling=!1;a.inner.append(b)},_setDimension:function(){var b=a.wrap,c=a.outer,d=a.inner,g=a.current,f=a.getViewport(),k=g.margin,i=2*g.padding,h=g.width+i,j=g.height+
|
||||
i,l=g.width/g.height,o=g.maxWidth,m=g.maxHeight,n=g.minWidth,p=g.minHeight;f.w-=k[1]+k[3];f.h-=k[0]+k[2];-1<h.toString().indexOf("%")&&(h=f.w*parseFloat(h)/100);-1<j.toString().indexOf("%")&&(j=f.h*parseFloat(j)/100);g.fitToView&&(o=Math.min(f.w,o),m=Math.min(f.h,m));n=Math.min(h,n);p=Math.min(h,p);o=Math.max(n,o);m=Math.max(p,m);g.aspectRatio?(h>o&&(h=o,j=(h-i)/l+i),j>m&&(j=m,h=(j-i)*l+i),h<n&&(h=n,j=(h-i)/l+i),j<p&&(j=p,h=(j-i)*l+i)):(h=Math.max(n,Math.min(h,o)),j=Math.max(p,Math.min(j,m)));h=Math.round(h);
|
||||
j=Math.round(j);e(b.add(c).add(d)).width("auto").height("auto");d.width(h-i).height(j-i);b.width(h);k=b.height();if(h>o||k>m)for(;(h>o||k>m)&&h>n&&k>p;)j-=10,g.aspectRatio?(h=Math.round((j-i)*l+i),h<n&&(h=n,j=(h-i)/l+i)):h-=10,d.width(h-i).height(j-i),b.width(h),k=b.height();g.dim={width:h,height:k};g.canGrow=g.autoSize&&j>p&&j<m;g.canShrink=!1;g.canExpand=!1;if(h-i<g.width||j-i<g.height)g.canExpand=!0;else if((h>f.w||k>f.h)&&h>n&&j>p)g.canShrink=!0;b=k-i;a.innerSpace=b-d.height();a.outerSpace=b-
|
||||
c.height()},_getPosition:function(b){var c=a.current,d=a.getViewport(),e=c.margin,f=a.wrap.width()+e[1]+e[3],k=a.wrap.height()+e[0]+e[2],i={position:"absolute",top:e[0]+d.y,left:e[3]+d.x};if(c.fixed&&(!b||!1===b[0])&&k<=d.h&&f<=d.w)i={position:"fixed",top:e[0],left:e[3]};i.top=Math.ceil(Math.max(i.top,i.top+(d.h-k)*c.topRatio))+"px";i.left=Math.ceil(Math.max(i.left,i.left+0.5*(d.w-f)))+"px";return i},_afterZoomIn:function(){var b=a.current;a.isOpen=a.isOpened=!0;a.wrap.addClass("fancybox-opened").css("overflow",
|
||||
"visible");a.update();a.inner.css("overflow","auto"===b.scrolling?"auto":"yes"===b.scrolling?"scroll":"hidden");if(b.closeClick||b.nextClick)a.inner.css("cursor","pointer").bind("click.fb",b.nextClick?a.next:a.close);b.closeBtn&&e(b.tpl.closeBtn).appendTo(a.wrap).bind("click.fb",a.close);b.arrows&&1<a.group.length&&((b.loop||0<b.index)&&e(b.tpl.prev).appendTo(a.wrap).bind("click.fb",a.prev),(b.loop||b.index<a.group.length-1)&&e(b.tpl.next).appendTo(a.wrap).bind("click.fb",a.next));a.trigger("afterShow");
|
||||
if(a.opts.autoPlay&&!a.player.isActive)a.opts.autoPlay=!1,a.play()},_afterZoomOut:function(){a.trigger("afterClose");a.wrap.trigger("onReset").remove();e.extend(a,{group:{},opts:{},current:null,isOpened:!1,isOpen:!1,wrap:null,outer:null,inner:null})}});a.transitions={getOrigPosition:function(){var b=a.current.element,c={},d=50,g=50,f;b&&b.nodeName&&e(b).is(":visible")?(f=e(b).find("img:first"),f.length?(c=f.offset(),d=f.outerWidth(),g=f.outerHeight()):c=e(b).offset()):(b=a.getViewport(),c.top=b.y+
|
||||
0.5*(b.h-g),c.left=b.x+0.5*(b.w-d));return c={top:Math.ceil(c.top)+"px",left:Math.ceil(c.left)+"px",width:Math.ceil(d)+"px",height:Math.ceil(g)+"px"}},step:function(b,c){var d,e,f;if("width"===c.prop||"height"===c.prop)e=f=Math.ceil(b-2*a.current.padding),"height"===c.prop&&(d=(b-c.start)/(c.end-c.start),c.start>c.end&&(d=1-d),e-=a.innerSpace*d,f-=a.outerSpace*d),a.inner[c.prop](e),a.outer[c.prop](f)},zoomIn:function(){var b=a.wrap,c=a.current,d,g;d=c.dim;if("elastic"===c.openEffect){g=e.extend({},
|
||||
d,a._getPosition(!0));delete g.position;d=this.getOrigPosition();if(c.openOpacity)d.opacity=0,g.opacity=1;b.css(d).show().animate(g,{duration:c.openSpeed,easing:c.openEasing,step:this.step,complete:a._afterZoomIn})}else b.css(e.extend({},d,a._getPosition())),"fade"===c.openEffect?b.fadeIn(c.openSpeed,a._afterZoomIn):(b.show(),a._afterZoomIn())},zoomOut:function(){var b=a.wrap,c=a.current,d;if("elastic"===c.closeEffect){"fixed"===b.css("position")&&b.css(a._getPosition(!0));d=this.getOrigPosition();
|
||||
if(c.closeOpacity)d.opacity=0;b.animate(d,{duration:c.closeSpeed,easing:c.closeEasing,step:this.step,complete:a._afterZoomOut})}else b.fadeOut("fade"===c.closeEffect?c.closeSpeed:0,a._afterZoomOut)},changeIn:function(){var b=a.wrap,c=a.current,d;"elastic"===c.nextEffect?(d=a._getPosition(!0),d.opacity=0,d.top=parseInt(d.top,10)-200+"px",b.css(d).show().animate({opacity:1,top:"+=200px"},{duration:c.nextSpeed,complete:a._afterZoomIn})):(b.css(a._getPosition()),"fade"===c.nextEffect?b.hide().fadeIn(c.nextSpeed,
|
||||
a._afterZoomIn):(b.show(),a._afterZoomIn()))},changeOut:function(){var b=a.wrap,c=a.current,d=function(){e(this).trigger("onReset").remove()};b.removeClass("fancybox-opened");"elastic"===c.prevEffect?b.animate({opacity:0,top:"+=200px"},{duration:c.prevSpeed,complete:d}):b.fadeOut("fade"===c.prevEffect?c.prevSpeed:0,d)}};a.helpers.overlay={overlay:null,update:function(){var a,c;this.overlay.width(0).height(0);e.browser.msie?(a=Math.max(q.documentElement.scrollWidth,q.body.scrollWidth),c=Math.max(q.documentElement.offsetWidth,
|
||||
q.body.offsetWidth),a=a<c?l.width():a):a=r.width();this.overlay.width(a).height(r.height())},beforeShow:function(b){if(!this.overlay)this.overlay=e('<div id="fancybox-overlay"></div>').css(b.css||{background:"black"}).appendTo("body"),this.update(),b.closeClick&&this.overlay.bind("click.fb",a.close),l.bind("resize.fb",e.proxy(this.update,this)),this.overlay.fadeTo(b.speedIn||"fast",b.opacity||1)},onUpdate:function(){this.update()},afterClose:function(a){this.overlay&&this.overlay.fadeOut(a.speedOut||
|
||||
"fast",function(){e(this).remove()});this.overlay=null}};a.helpers.title={beforeShow:function(b){var c;if(c=a.current.title)c=e('<div class="fancybox-title fancybox-title-'+b.type+'-wrap">'+c+"</div>").appendTo("body"),"float"===b.type&&(c.width(c.width()),c.wrapInner('<span class="child"></span>'),a.current.margin[2]+=Math.abs(parseInt(c.css("margin-bottom"),10))),c.appendTo("over"===b.type?a.inner:"outside"===b.type?a.wrap:a.outer)}};e.fn.fancybox=function(b){function c(b){var c=[],i,h=this.rel;
|
||||
if(!b.ctrlKey&&!b.altKey&&!b.shiftKey&&!b.metaKey)b.preventDefault(),b=e(this).data("fancybox-group"),"undefined"!==typeof b?i=b?"data-fancybox-group":!1:h&&""!==h&&"nofollow"!==h&&(b=h,i="rel"),i&&(c=g.length?e(g).filter("["+i+'="'+b+'"]'):e("["+i+'="'+b+'"]')),c.length?(d.index=c.index(this),a.open(c.get(),d)):a.open(this,d)}var d=b||{},g=this.selector||"";g?r.undelegate(g,"click.fb-start").delegate(g,"click.fb-start",c):e(this).unbind("click.fb-start").bind("click.fb-start",c);return this}})(window,
|
||||
document,jQuery);
|
||||