mirror of
https://github.com/coderaiser/cloudcmd.git
synced 2026-07-18 00:47:01 +00:00
added
This commit is contained in:
coderaiser
parent
ebb873975c
commit
5de6660f0f
2 changed files with 332 additions and 0 deletions
115
lib/client/viewer/fancybox/CHANGELOG.md
Normal file
115
lib/client/viewer/fancybox/CHANGELOG.md
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
fancyBox - Changelog
|
||||
=========
|
||||
|
||||
### Version 2.1.3 - October 23, 2012
|
||||
|
||||
* Fixed #426 - Broken IE7
|
||||
* Fixed #423 - Background flickering on iOS
|
||||
* Fixed #418 - Automatically Grow/Shrink and Center
|
||||
* Updated the script to work with jQuery 1.6
|
||||
* Media helper supports YouTube video series
|
||||
|
||||
### Version 2.1.2 - October 15, 2012
|
||||
|
||||
* Fixed #414 - Don't allow nextClick if there is only one item
|
||||
* Fixed #397 - Button helper 'Menu' not visible in IE7
|
||||
* Overlay can be opened/closed manually:
|
||||
* $.fancybox.helpers.overlay.open();
|
||||
* $.fancybox.helpers.overlay.open({closeClick : false});
|
||||
* $.fancybox.helpers.overlay.close();
|
||||
* Optimized for Internet Explorer 10 (Windows 8)
|
||||
|
||||
### Version 2.1.1 - October 01, 2012
|
||||
|
||||
* Fixed #357 - Converting values like 'auto' in getScalar()
|
||||
* Fixed #358 - Updated overlay background image
|
||||
* New "fancybox-href" and "fancybox-title" HTML5 data-attributes (#317)
|
||||
* Improved helpers:
|
||||
* - now they can have a property 'defaults' that contains default settings
|
||||
* - updated vimeo and youtube parsers for media helper
|
||||
* Content locking now can be turned off
|
||||
|
||||
### Version 2.1.0 - August 20, 2012
|
||||
|
||||
* Fixed #103 - DOM element re-injection after closing
|
||||
* Fixed #188 - navigation keys inside editable content
|
||||
* New animation directions (see https://github.com/fancyapps/fancyBox/issues/233#issuecomment-5512453)
|
||||
* New option "iframe" - it is now possible to separate scrolling for iframe and wrapping element; choose to preload
|
||||
* New option "swf" - brings back functionality from fancyBox v1
|
||||
* Improved media helper - better support for vimeo and youtube; links are now configurable
|
||||
* Rewritten overlay helper:
|
||||
* - new option "showEarly" - toggles if should be open before of after content is loaded
|
||||
* - Facebook-style (https://github.com/fancyapps/fancyBox/issues/24) and therefore uses image for background
|
||||
* Option "padding" accepts array (e.g., padding: [15, 50, 10, 5])
|
||||
* One of dimensions (width or height) can now be set to "auto" (option "autoSize" needs to be "false")
|
||||
* Updated callbacks:
|
||||
* - "beforeClose" is now called only once
|
||||
* - "afterLoad" receives current and previous object as arguments
|
||||
* Method "$.fancybox.update();" recalculates content width/height
|
||||
* Updated to work with jQuery v1.8
|
||||
|
||||
### Version 2.0.6 - April 16, 2012
|
||||
|
||||
* Fixed #188 - keystrokes in contenteditable
|
||||
* Fixed #171 - non-images should not be preloaded
|
||||
* Fixed #158 - 'closeClick: true' breaks gallery navigation
|
||||
* New "media" helper - detects and displays various media types
|
||||
* New option "groupAttr" - name of group selector attribute, default is "data-fancybox-group"
|
||||
* New feature - selector expressions in URLs, see #170
|
||||
* Improved 'overlay' helper to use "position: fixed"
|
||||
* Improved autoSize, fixed wrong height in some cases
|
||||
* Improved centering and iframe scrolling for iOS
|
||||
* Updated markup, new element '.fancybox-skin' is now used for styling
|
||||
|
||||
### Version 2.0.5 - February 21, 2012
|
||||
|
||||
* Fixed #155 - easing for prev/next animations
|
||||
* Fixed #153 - overriding "keys" options
|
||||
* Fixed #147 - IE7 problem with #hash links
|
||||
* Fixed #130 - changing dynamically data-fancybox-group
|
||||
* Fixed #126 - obey minWidth/minHeight
|
||||
* Fixed #118 - placement of loading icon and navigation arrows
|
||||
* Fixed #101 - "index" option not working
|
||||
* Fixed #94 - "orig" option not working
|
||||
* Fixed #80 - does not work on IE6
|
||||
* Fixed #72 - can't set overlay opacity to 0
|
||||
* Fixed #63 - properly set gallery index
|
||||
* New option "autoCenter" - toggles centering on window resize or scroll, disabled for mobile devices by default
|
||||
* New option "autoResize" - toggles responsivity, disabled for mobile devices by default
|
||||
* New option "preload" - number of images to preload
|
||||
* New feature to target mobile/desktop browsers using CSS, see #108
|
||||
* Changed ajax option defaults to "{ dataType: 'html', headers: { 'X-fancyBox': true } }", see #150 and #128
|
||||
* Updated loading icon for IE7, IE8
|
||||
* Calculates height of the iframe if 'autoSize' is set to 'true' and the iframe is on the same domain as the main page
|
||||
|
||||
### Version 2.0.4 - December 12, 2011
|
||||
|
||||
* Fixed #47 - fix overriding properties
|
||||
* New 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 slideshow
|
||||
* Fixed scrollbars 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.
|
||||
217
lib/client/viewer/fancybox/README.md
Normal file
217
lib/client/viewer/fancybox/README.md
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
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) 2012 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>
|
||||
|
||||
May also be passed an optional options object which will extend the default values. Example:
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.fancybox').fancybox({
|
||||
padding : 0,
|
||||
openEffect : 'elastic'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Tip: Automatically group and apply fancyBox to all images:
|
||||
|
||||
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
|
||||
|
||||
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) or `data-fancybox-type` attribute:
|
||||
|
||||
//Ajax:
|
||||
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
|
||||
//or
|
||||
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>
|
||||
|
||||
//Iframe:
|
||||
<a href="example.html" class="fancybox fancybox.iframe">Example</a>
|
||||
|
||||
//Inline (will display an element with `id="example"`)
|
||||
<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).
|
||||
If fancyBox will not be able to get content type, it will try to guess based on 'href' and will quit silently if would not succeed.
|
||||
(this is different from previsous versions where 'ajax' was used as default type or an error message was displayed).
|
||||
|
||||
Advanced
|
||||
--------
|
||||
|
||||
### Helpers
|
||||
|
||||
Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'.
|
||||
You can disable them, set custom options or enable other helpers. Examples:
|
||||
|
||||
//Disable title helper
|
||||
$(".fancybox").fancybox({
|
||||
helpers: {
|
||||
title: null
|
||||
}
|
||||
});
|
||||
|
||||
//Disable overlay helper
|
||||
$(".fancybox").fancybox({
|
||||
helpers: {
|
||||
overlay : null
|
||||
}
|
||||
});
|
||||
|
||||
//Change title position and overlay color
|
||||
$(".fancybox").fancybox({
|
||||
helpers: {
|
||||
title : {
|
||||
type : 'inside'
|
||||
},
|
||||
overlay : {
|
||||
css : {
|
||||
'background' : 'rgba(255,255,255,0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Enable thumbnail helper and set custom options
|
||||
$(".fancybox").fancybox({
|
||||
helpers: {
|
||||
thumbs : {
|
||||
width: 50,
|
||||
height: 50
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
### API
|
||||
|
||||
Also available are event driven callback methods. The `this` keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:
|
||||
|
||||
$(".fancybox").fancybox({
|
||||
beforeLoad : function() {
|
||||
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
|
||||
|
||||
/*
|
||||
"this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
|
||||
this.title = $(this.element).find('img').attr('alt');
|
||||
*/
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
|
||||
There is a simply way to access wrapping elements using JS:
|
||||
|
||||
$.fancybox.wrap
|
||||
$.fancybox.skin
|
||||
$.fancybox.outer
|
||||
$.fancybox.inner
|
||||
|
||||
You can override CSS to customize the look. For example, make navigation arrows always visible,
|
||||
change width and move them outside of area (use this snippet after including fancybox.css):
|
||||
|
||||
.fancybox-nav span {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-nav {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.fancybox-prev {
|
||||
left: -80px;
|
||||
}
|
||||
|
||||
.fancybox-next {
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
In that case, you might want to increase space around box:
|
||||
|
||||
$(".fancybox").fancybox({
|
||||
margin : [20, 60, 20, 60]
|
||||
});
|
||||
|
||||
|
||||
Bug tracker
|
||||
-----------
|
||||
|
||||
Have a bug? Please create an issue on GitHub at https://github.com/fancyapps/fancyBox/issues
|
||||
Loading…
Add table
Add a link
Reference in a new issue