Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Unified Diff: fancybox/README.md

Issue 8615139: adblockpluschrome: Open share page in lightbox (Closed)
Patch Set: Created Oct. 23, 2012, 4:12 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « fancybox/CHANGELOG.md ('k') | fancybox/demo/1_b.jpg » ('j') | firstRun.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: fancybox/README.md
===================================================================
new file mode 100755
--- /dev/null
+++ b/fancybox/README.md
@@ -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
« no previous file with comments | « fancybox/CHANGELOG.md ('k') | fancybox/demo/1_b.jpg » ('j') | firstRun.js » ('J')

Powered by Google App Engine
This is Rietveld