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
毕业设计--物联网系统.zip
需积分: 5 104 浏览量
2024-01-16
12:58:34
上传
评论
收藏 1.11MB ZIP 举报
毕业设计--物联网系统.zip （229个子文件） 
AUTHORS 187B nginx.conf 1KB 127.0.0.2.conf 1KB index.css 161KB jmpress.css 160KB impress-demo.css 21KB impress.css 12KB jquery.fancybox.css 5KB qunit.css 4KB style.css 4KB simple.css 3KB jquery.fancybox-buttons.css 2KB default.css 2KB highlight.min.css 2KB github.css 2KB arta.css 2KB xcode.css 2KB googlecode.css 2KB sunburst.css 2KB school_book.css 2KB magula.css 2KB far.css 2KB zenburn.css 2KB monokai.css 2KB brown_paper.css 2KB idea.css 2KB ajax.css 2KB github.css 2KB dark.css 2KB rainbow.css 2KB pojoaque.css 2KB vs.css 1KB tomorrow-night-blue.css 1KB tomorrow-night.css 1KB tomorrow-night-eighties.css 1KB vacation.css 1KB tomorrow-night-bright.css 1KB ir_black.css 1KB solarized_dark.css 1KB solarized_light.css 1KB tomorrow.css 1KB nested-template.css 1KB style.css 1KB automatic.css 974B automatic.css 974B warp.css 970B style.css 968B zoom.css 949B expand.css 895B zoomable.css 845B drive.css 842B ascetic.css 763B animations.css 740B jquery.fancybox-thumbs.css 735B animation.css 723B fade.css 660B cube.css 490B appear.css 60B struct.dot 422B struct_old.dot 420B
fancybox_loading@2x.gif 14KB fancybox_loading.gif 6KB blank.gif 43B .gitattributes 174B .gitmodules 255B
index.html 14KB index.html 13KB container.html 13KB index.html 11KB index.html 9KB index.html 9KB index.html 8KB index.html 6KB impress.html 5KB index.html 4KB index.html 4KB index.html 3KB index.html 3KB index.html 2KB presentation-screen.html 2KB index.notes.html 2KB index.html 2KB iframe.html 2KB index.html 1KB index.html 1KB index.html 1KB content.html 48B ajax.html 6B BareMinimum.ino 438B
4_b.jpg 82KB 1_b.jpg 80KB 5_b.jpg 74KB 3_b.jpg 54KB 2_b.jpg 50KB struct.jpg 22KB struct.jpg 22KB app_demo.jpg 20KB 1_s.jpg 8KB 4_s.jpg 5KB 5_s.jpg 4KB共 229 条
- 1
- 2
- 3
资源评论
