aktueller Stand vom Server
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,7 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Denote all files that are truly binary and should not be modified.
|
||||
*.png binary
|
||||
*.jpg binary
|
||||
*.gif binary
|
||||
@@ -0,0 +1,125 @@
|
||||
fancyBox - Changelog
|
||||
=========
|
||||
|
||||
### Version 2.1.5 - June 14, 2013
|
||||
* Fixed #493 - Broken slideshow
|
||||
* Fixed #556 - Parent option
|
||||
* Retina graphics (#564) and retina display support (#420)
|
||||
* Improved "lock" feature
|
||||
|
||||
### Version 2.1.4 - January 10, 2013
|
||||
* Update to be compatible with jQuery v1.9
|
||||
* Small changes that should fix usability issues for certain users
|
||||
|
||||
### 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.
|
||||
@@ -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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -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>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>fancyBox - iframe demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>fancyBox - iframe demo</h1>
|
||||
|
||||
<p>
|
||||
<a href="javascript:parent.jQuery.fancybox.close();">Close iframe parent</a>
|
||||
|
||||
|
|
||||
|
||||
<a href="javascript:parent.jQuery.fancybox.open({href : '1_b.jpg', title : 'My title'});">Change content</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque justo ac eros consectetur bibendum. In hac habitasse platea dictumst. Nulla aliquam turpis et tellus elementum luctus. Duis sit amet rhoncus velit. Duis nisl ligula, mattis interdum blandit laoreet, mattis id ante. Cras pulvinar lacus vitae nisi egestas non euismod neque bibendum. Vestibulum faucibus libero id ante molestie ultricies. Vestibulum quis nibh felis. Vestibulum libero nisl, vehicula vel ullamcorper sit amet, tristique sit amet augue. Etiam urna neque, porttitor sed sodales lacinia, posuere a nisl. Vestibulum blandit neque in sapien volutpat ac condimentum sapien auctor. Ut imperdiet venenatis ultricies. Phasellus accumsan, sem eu placerat commodo, felis purus commodo ipsum, sit amet vulputate orci est viverra est.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Aenean velit est, condimentum ut iaculis ut, accumsan at mi. Maecenas velit mi, venenatis ut condimentum at, ultrices vel tortor. Curabitur pharetra ornare dapibus. Ut volutpat cursus semper. In hac habitasse platea dictumst. Donec eu iaculis ipsum. Morbi eu dolor velit, a semper nunc.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,312 @@
|
||||
<!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="../lib/jquery-1.10.1.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?v=2.1.5"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
|
||||
|
||||
<!-- Add Button helper (this is optional) -->
|
||||
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
|
||||
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
|
||||
|
||||
<!-- Add Thumbnail helper (this is optional) -->
|
||||
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
|
||||
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
|
||||
|
||||
<!-- Add Media helper (this is optional) -->
|
||||
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
/*
|
||||
* Simple image gallery. Uses default settings
|
||||
*/
|
||||
|
||||
$('.fancybox').fancybox();
|
||||
|
||||
/*
|
||||
* Different effects
|
||||
*/
|
||||
|
||||
// Change title type, overlay closing speed
|
||||
$(".fancybox-effects-a").fancybox({
|
||||
helpers: {
|
||||
title : {
|
||||
type : 'outside'
|
||||
},
|
||||
overlay : {
|
||||
speedOut : 0
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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,
|
||||
|
||||
openEffect : 'none',
|
||||
|
||||
helpers : {
|
||||
title : {
|
||||
type : 'inside'
|
||||
},
|
||||
overlay : {
|
||||
css : {
|
||||
'background' : 'rgba(238,238,238,0.85)'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
|
||||
*/
|
||||
$('.fancybox-media')
|
||||
.attr('rel', 'media-gallery')
|
||||
.fancybox({
|
||||
openEffect : 'none',
|
||||
closeEffect : 'none',
|
||||
prevEffect : 'none',
|
||||
nextEffect : 'none',
|
||||
|
||||
arrows : false,
|
||||
helpers : {
|
||||
media : {},
|
||||
buttons : {}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Open manually
|
||||
*/
|
||||
|
||||
$("#fancybox-manual-a").click(function() {
|
||||
$.fancybox.open('1_b.jpg');
|
||||
});
|
||||
|
||||
$("#fancybox-manual-b").click(function() {
|
||||
$.fancybox.open({
|
||||
href : 'iframe.html',
|
||||
type : 'iframe',
|
||||
padding : 5
|
||||
});
|
||||
});
|
||||
|
||||
$("#fancybox-manual-c").click(function() {
|
||||
$.fancybox.open([
|
||||
{
|
||||
href : '1_b.jpg',
|
||||
title : 'My title'
|
||||
}, {
|
||||
href : '2_b.jpg',
|
||||
title : '2nd title'
|
||||
}, {
|
||||
href : '3_b.jpg'
|
||||
}
|
||||
], {
|
||||
helpers : {
|
||||
thumbs : {
|
||||
width: 75,
|
||||
height: 50
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.fancybox-custom .fancybox-skin {
|
||||
box-shadow: 0 0 50px #222;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</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="iframe.html">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 id="inline1" style="width:400px;display: none;">
|
||||
<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>
|
||||
|
||||
<p>
|
||||
Ajax example will not run from your local computer and requires a server to run.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Media helper</h3>
|
||||
<p>
|
||||
Will not run from your local computer, requires a server to run.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
|
||||
<li><a class="fancybox-media" href="http://vimeo.com/47480346">Vimeo</a></li>
|
||||
<li><a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">Metacafe</a></li>
|
||||
<li><a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">Dailymotion</a></li>
|
||||
<li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a></li>
|
||||
<li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
|
||||
<li><a class="fancybox-media" href="http://instagr.am/p/IejkuUGxQn">Instagram</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Open manually</h3>
|
||||
<ul>
|
||||
<li><a id="fancybox-manual-a" href="javascript:;">Open single item</a></li>
|
||||
<li><a id="fancybox-manual-b" href="javascript:;">Open single item, custom options</a></li>
|
||||
<li><a id="fancybox-manual-c" href="javascript:;">Open gallery</a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Photo Credit: Instagrammer @whitjohns
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
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,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);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1003 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,97 @@
|
||||
#fancybox-buttons {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 8050;
|
||||
}
|
||||
|
||||
#fancybox-buttons.top {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons.bottom {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons ul {
|
||||
display: block;
|
||||
width: 166px;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: 1px solid #111;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
background: rgb(50,50,50);
|
||||
background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
|
||||
background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
|
||||
}
|
||||
|
||||
#fancybox-buttons ul li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-indent: -9999px;
|
||||
background-color: transparent;
|
||||
background-image: url('fancybox_buttons.png');
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#fancybox-buttons a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPrev {
|
||||
background-position: 5px 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: 35px;
|
||||
background-position: -56px 0px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnDisabled {
|
||||
opacity : 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
/*!
|
||||
* Buttons helper for fancyBox
|
||||
* version: 1.0.5 (Mon, 15 Oct 2012)
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* helpers : {
|
||||
* buttons: {
|
||||
* position : 'top'
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.buttons = {
|
||||
defaults : {
|
||||
skipSingle : false, // disables if gallery contains single image
|
||||
position : 'top', // 'top' or 'bottom'
|
||||
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:;"></a></li></ul></div>'
|
||||
},
|
||||
|
||||
list : null,
|
||||
buttons: null,
|
||||
|
||||
beforeLoad: function (opts, obj) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
|
||||
if (opts.skipSingle && obj.group.length < 2) {
|
||||
obj.helpers.buttons = false;
|
||||
obj.closeBtn = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase top margin to give space for buttons
|
||||
obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
|
||||
},
|
||||
|
||||
onPlayStart: function () {
|
||||
if (this.buttons) {
|
||||
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
onPlayEnd: function () {
|
||||
if (this.buttons) {
|
||||
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
afterShow: function (opts, obj) {
|
||||
var buttons = this.buttons;
|
||||
|
||||
if (!buttons) {
|
||||
this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
|
||||
|
||||
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 ),
|
||||
close : this.list.find('.btnClose').click( F.close )
|
||||
}
|
||||
}
|
||||
|
||||
//Prev
|
||||
if (obj.index > 0 || obj.loop) {
|
||||
buttons.prev.removeClass('btnDisabled');
|
||||
} else {
|
||||
buttons.prev.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
//Next / Play
|
||||
if (obj.loop || obj.index < obj.group.length - 1) {
|
||||
buttons.next.removeClass('btnDisabled');
|
||||
buttons.play.removeClass('btnDisabled');
|
||||
|
||||
} else {
|
||||
buttons.next.addClass('btnDisabled');
|
||||
buttons.play.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
this.buttons = buttons;
|
||||
|
||||
this.onUpdate(opts, obj);
|
||||
},
|
||||
|
||||
onUpdate: function (opts, obj) {
|
||||
var toggle;
|
||||
|
||||
if (!this.buttons) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
|
||||
|
||||
//Size toggle button
|
||||
if (obj.canShrink) {
|
||||
toggle.addClass('btnToggleOn');
|
||||
|
||||
} else if (!obj.canExpand) {
|
||||
toggle.addClass('btnDisabled');
|
||||
}
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.list) {
|
||||
this.list.remove();
|
||||
}
|
||||
|
||||
this.list = null;
|
||||
this.buttons = null;
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
@@ -0,0 +1,199 @@
|
||||
/*!
|
||||
* Media helper for fancyBox
|
||||
* version: 1.0.6 (Fri, 14 Jun 2013)
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* helpers : {
|
||||
* media: true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Set custom URL parameters:
|
||||
* $(".fancybox").fancybox({
|
||||
* helpers : {
|
||||
* media: {
|
||||
* youtube : {
|
||||
* params : {
|
||||
* autoplay : 0
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Or:
|
||||
* $(".fancybox").fancybox({,
|
||||
* helpers : {
|
||||
* media: true
|
||||
* },
|
||||
* youtube : {
|
||||
* autoplay: 0
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Supports:
|
||||
*
|
||||
* Youtube
|
||||
* http://www.youtube.com/watch?v=opj24KnzrWo
|
||||
* http://www.youtube.com/embed/opj24KnzrWo
|
||||
* http://youtu.be/opj24KnzrWo
|
||||
* http://www.youtube-nocookie.com/embed/opj24KnzrWo
|
||||
* Vimeo
|
||||
* http://vimeo.com/40648169
|
||||
* http://vimeo.com/channels/staffpicks/38843628
|
||||
* http://vimeo.com/groups/surrealism/videos/36516384
|
||||
* http://player.vimeo.com/video/45074303
|
||||
* Metacafe
|
||||
* http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
|
||||
* http://www.metacafe.com/watch/7635964/
|
||||
* Dailymotion
|
||||
* http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
|
||||
* Twitvid
|
||||
* http://twitvid.com/QY7MD
|
||||
* Twitpic
|
||||
* http://twitpic.com/7p93st
|
||||
* Instagram
|
||||
* http://instagr.am/p/IejkuUGxQn/
|
||||
* http://instagram.com/p/IejkuUGxQn/
|
||||
* Google maps
|
||||
* http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
|
||||
* http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
|
||||
* http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56
|
||||
*/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox,
|
||||
format = function( url, rez, params ) {
|
||||
params = params || '';
|
||||
|
||||
if ( $.type( params ) === "object" ) {
|
||||
params = $.param(params, true);
|
||||
}
|
||||
|
||||
$.each(rez, function(key, value) {
|
||||
url = url.replace( '$' + key, value || '' );
|
||||
});
|
||||
|
||||
if (params.length) {
|
||||
url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params;
|
||||
}
|
||||
|
||||
return url;
|
||||
};
|
||||
|
||||
//Add helper object
|
||||
F.helpers.media = {
|
||||
defaults : {
|
||||
youtube : {
|
||||
matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i,
|
||||
params : {
|
||||
autoplay : 1,
|
||||
autohide : 1,
|
||||
fs : 1,
|
||||
rel : 0,
|
||||
hd : 1,
|
||||
wmode : 'opaque',
|
||||
enablejsapi : 1
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//www.youtube.com/embed/$3'
|
||||
},
|
||||
vimeo : {
|
||||
matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
|
||||
params : {
|
||||
autoplay : 1,
|
||||
hd : 1,
|
||||
show_title : 1,
|
||||
show_byline : 1,
|
||||
show_portrait : 0,
|
||||
fullscreen : 1
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//player.vimeo.com/video/$1'
|
||||
},
|
||||
metacafe : {
|
||||
matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/,
|
||||
params : {
|
||||
autoPlay : 'yes'
|
||||
},
|
||||
type : 'swf',
|
||||
url : function( rez, params, obj ) {
|
||||
obj.swf.flashVars = 'playerVars=' + $.param( params, true );
|
||||
|
||||
return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf';
|
||||
}
|
||||
},
|
||||
dailymotion : {
|
||||
matcher : /dailymotion.com\/video\/(.*)\/?(.*)/,
|
||||
params : {
|
||||
additionalInfos : 0,
|
||||
autoStart : 1
|
||||
},
|
||||
type : 'swf',
|
||||
url : '//www.dailymotion.com/swf/video/$1'
|
||||
},
|
||||
twitvid : {
|
||||
matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i,
|
||||
params : {
|
||||
autoplay : 0
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//www.twitvid.com/embed.php?guid=$1'
|
||||
},
|
||||
twitpic : {
|
||||
matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i,
|
||||
type : 'image',
|
||||
url : '//twitpic.com/show/full/$1/'
|
||||
},
|
||||
instagram : {
|
||||
matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
|
||||
type : 'image',
|
||||
url : '//$1/p/$2/media/?size=l'
|
||||
},
|
||||
google_maps : {
|
||||
matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
|
||||
type : 'iframe',
|
||||
url : function( rez ) {
|
||||
return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad : function(opts, obj) {
|
||||
var url = obj.href || '',
|
||||
type = false,
|
||||
what,
|
||||
item,
|
||||
rez,
|
||||
params;
|
||||
|
||||
for (what in opts) {
|
||||
if (opts.hasOwnProperty(what)) {
|
||||
item = opts[ what ];
|
||||
rez = url.match( item.matcher );
|
||||
|
||||
if (rez) {
|
||||
type = item.type;
|
||||
params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null));
|
||||
|
||||
url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params );
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (type) {
|
||||
obj.href = url;
|
||||
obj.type = type;
|
||||
|
||||
obj.autoHeight = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
@@ -0,0 +1,55 @@
|
||||
#fancybox-thumbs {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 8050;
|
||||
}
|
||||
|
||||
#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;
|
||||
max-width: none;
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
/*!
|
||||
* Thumbnail helper for fancyBox
|
||||
* version: 1.0.7 (Mon, 01 Oct 2012)
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* helpers : {
|
||||
* thumbs: {
|
||||
* width : 50,
|
||||
* height : 50
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.thumbs = {
|
||||
defaults : {
|
||||
width : 50, // thumbnail width
|
||||
height : 50, // thumbnail height
|
||||
position : 'bottom', // 'top' or 'bottom'
|
||||
source : function ( item ) { // function to obtain the URL of the thumbnail image
|
||||
var href;
|
||||
|
||||
if (item.element) {
|
||||
href = $(item.element).find('img').attr('src');
|
||||
}
|
||||
|
||||
if (!href && item.type === 'image' && item.href) {
|
||||
href = item.href;
|
||||
}
|
||||
|
||||
return href;
|
||||
}
|
||||
},
|
||||
|
||||
wrap : null,
|
||||
list : null,
|
||||
width : 0,
|
||||
|
||||
init: function (opts, obj) {
|
||||
var that = this,
|
||||
list,
|
||||
thumbWidth = opts.width,
|
||||
thumbHeight = opts.height,
|
||||
thumbSource = opts.source;
|
||||
|
||||
//Build list structure
|
||||
list = '';
|
||||
|
||||
for (var n = 0; n < obj.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).appendTo('body');
|
||||
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
|
||||
|
||||
//Load each thumbnail
|
||||
$.each(obj.group, function (i) {
|
||||
var href = thumbSource( obj.group[ i ] );
|
||||
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
$("<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', href);
|
||||
});
|
||||
|
||||
//Set initial width
|
||||
this.width = this.list.children().eq(0).outerWidth(true);
|
||||
|
||||
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
|
||||
},
|
||||
|
||||
beforeLoad: function (opts, obj) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (obj.group.length < 2) {
|
||||
obj.helpers.thumbs = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase bottom margin to give space for thumbs
|
||||
obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
|
||||
},
|
||||
|
||||
afterShow: function (opts, obj) {
|
||||
//Check if exists and create or update list
|
||||
if (this.list) {
|
||||
this.onUpdate(opts, obj);
|
||||
|
||||
} else {
|
||||
this.init(opts, obj);
|
||||
}
|
||||
|
||||
//Set active element
|
||||
this.list.children().removeClass('active').eq(obj.index).addClass('active');
|
||||
},
|
||||
|
||||
//Center list
|
||||
onUpdate: function (opts, obj) {
|
||||
if (this.list) {
|
||||
this.list.stop(true).animate({
|
||||
'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.wrap) {
|
||||
this.wrap.remove();
|
||||
}
|
||||
|
||||
this.wrap = null;
|
||||
this.list = null;
|
||||
this.width = 0;
|
||||
}
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
@@ -0,0 +1,274 @@
|
||||
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
|
||||
.fancybox-wrap,
|
||||
.fancybox-skin,
|
||||
.fancybox-outer,
|
||||
.fancybox-inner,
|
||||
.fancybox-image,
|
||||
.fancybox-wrap iframe,
|
||||
.fancybox-wrap object,
|
||||
.fancybox-nav,
|
||||
.fancybox-nav span,
|
||||
.fancybox-tmp
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.fancybox-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 8020;
|
||||
}
|
||||
|
||||
.fancybox-skin {
|
||||
position: relative;
|
||||
background: #f9f9f9;
|
||||
color: #444;
|
||||
text-shadow: none;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fancybox-opened {
|
||||
z-index: 8030;
|
||||
}
|
||||
|
||||
.fancybox-opened .fancybox-skin {
|
||||
-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-outer, .fancybox-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fancybox-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-type-iframe .fancybox-inner {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.fancybox-error {
|
||||
color: #444;
|
||||
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fancybox-image, .fancybox-iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fancybox-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
|
||||
background-image: url('fancybox_sprite.png');
|
||||
}
|
||||
|
||||
#fancybox-loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -22px;
|
||||
margin-left: -22px;
|
||||
background-position: 0 -108px;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
z-index: 8060;
|
||||
}
|
||||
|
||||
#fancybox-loading div {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url('fancybox_loading.gif') center center no-repeat;
|
||||
}
|
||||
|
||||
.fancybox-close {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: -18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
z-index: 8040;
|
||||
}
|
||||
|
||||
.fancybox-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background: transparent url('blank.gif'); /* helps IE */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
z-index: 8040;
|
||||
}
|
||||
|
||||
.fancybox-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fancybox-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fancybox-nav span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 36px;
|
||||
height: 34px;
|
||||
margin-top: -18px;
|
||||
cursor: pointer;
|
||||
z-index: 8040;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fancybox-prev span {
|
||||
left: 10px;
|
||||
background-position: 0 -36px;
|
||||
}
|
||||
|
||||
.fancybox-next span {
|
||||
right: 10px;
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
|
||||
.fancybox-nav:hover span {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-tmp {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
left: -99999px;
|
||||
visibility: hidden;
|
||||
max-width: 99999px;
|
||||
max-height: 99999px;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Overlay helper */
|
||||
|
||||
.fancybox-lock {
|
||||
overflow: hidden !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.fancybox-lock body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.fancybox-lock-test {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.fancybox-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 8010;
|
||||
background: url('fancybox_overlay.png');
|
||||
}
|
||||
|
||||
.fancybox-overlay-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fancybox-lock .fancybox-overlay {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Title helper */
|
||||
|
||||
.fancybox-title {
|
||||
visibility: hidden;
|
||||
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
z-index: 8050;
|
||||
}
|
||||
|
||||
.fancybox-opened .fancybox-title {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-title-float-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 50%;
|
||||
margin-bottom: -35px;
|
||||
z-index: 8050;
|
||||
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 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.fancybox-title-over-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
/*Retina graphics!*/
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
only screen and (min--moz-device-pixel-ratio: 1.5),
|
||||
only screen and (min-device-pixel-ratio: 1.5){
|
||||
|
||||
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
|
||||
background-image: url('fancybox_sprite@2x.png');
|
||||
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
|
||||
}
|
||||
|
||||
#fancybox-loading div {
|
||||
background-image: url('fancybox_loading@2x.gif');
|
||||
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,46 @@
|
||||
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
|
||||
(function(r,G,f,v){var J=f("html"),n=f(r),p=f(G),b=f.fancybox=function(){b.open.apply(this,arguments)},I=navigator.userAgent.match(/msie/i),B=null,s=G.createTouch!==v,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},q=function(a){return a&&"string"===f.type(a)},E=function(a){return q(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&E(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},w=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.5",defaults:{padding:15,margin:20,
|
||||
width:800,height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,pixelRatio:1,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},
|
||||
keys:{next:{13:"left",34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
|
||||
(I?' allowtransparency="true"':"")+"></iframe>",error:'<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',closeBtn:'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',next:'<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',prev:'<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><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:250,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:250,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:!0,title:!0},onCancel:f.noop,beforeLoad:f.noop,afterLoad:f.noop,beforeShow:f.noop,afterShow:f.noop,beforeChange:f.noop,beforeClose:f.noop,afterClose:f.noop},group:{},opts:{},previous:null,coming:null,current:null,isActive:!1,
|
||||
isOpen:!1,isOpened:!1,wrap:null,skin:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(a,d){if(a&&(f.isPlainObject(d)||(d={}),!1!==b.close(!0)))return f.isArray(a)||(a=t(a)?f(a).get():[a]),f.each(a,function(e,c){var k={},g,h,j,m,l;"object"===f.type(c)&&(c.nodeType&&(c=f(c)),t(c)?(k={href:c.data("fancybox-href")||c.attr("href"),title:c.data("fancybox-title")||c.attr("title"),isDom:!0,element:c},f.metadata&&f.extend(!0,k,
|
||||
c.metadata())):k=c);g=d.href||k.href||(q(c)?c:null);h=d.title!==v?d.title:k.title||"";m=(j=d.content||k.content)?"html":d.type||k.type;!m&&k.isDom&&(m=c.data("fancybox-type"),m||(m=(m=c.prop("class").match(/fancybox\.(\w+)/))?m[1]:null));q(g)&&(m||(b.isImage(g)?m="image":b.isSWF(g)?m="swf":"#"===g.charAt(0)?m="inline":q(c)&&(m="html",j=c)),"ajax"===m&&(l=g.split(/\s+/,2),g=l.shift(),l=l.shift()));j||("inline"===m?g?j=f(q(g)?g.replace(/.*(?=#[^\s]+$)/,""):g):k.isDom&&(j=c):"html"===m?j=g:!m&&(!g&&
|
||||
k.isDom)&&(m="inline",j=c));f.extend(k,{href:g,type:m,content:j,title:h,selector:l});a[e]=k}),b.opts=f.extend(!0,{},b.defaults,d),d.keys!==v&&(b.opts.keys=d.keys?f.extend({},b.defaults.keys,d.keys):!1),b.group=a,b._start(b.opts.index)},cancel:function(){var a=b.coming;a&&!1!==b.trigger("onCancel")&&(b.hideLoading(),b.ajaxLoad&&b.ajaxLoad.abort(),b.ajaxLoad=null,b.imgPreload&&(b.imgPreload.onload=b.imgPreload.onerror=null),a.wrap&&a.wrap.stop(!0,!0).trigger("onReset").remove(),b.coming=null,b.current||
|
||||
b._afterZoomOut(a))},close:function(a){b.cancel();!1!==b.trigger("beforeClose")&&(b.unbindEvents(),b.isActive&&(!b.isOpen||!0===a?(f(".fancybox-wrap").stop(!0).trigger("onReset").remove(),b._afterZoomOut()):(b.isOpen=b.isOpened=!1,b.isClosing=!0,f(".fancybox-item, .fancybox-nav").remove(),b.wrap.stop(!0,!0).removeClass("fancybox-opened"),b.transitions[b.current.closeMethod]())))},play:function(a){var d=function(){clearTimeout(b.player.timer)},e=function(){d();b.current&&b.player.isActive&&(b.player.timer=
|
||||
setTimeout(b.next,b.current.playSpeed))},c=function(){d();p.unbind(".player");b.player.isActive=!1;b.trigger("onPlayEnd")};if(!0===a||!b.player.isActive&&!1!==a){if(b.current&&(b.current.loop||b.current.index<b.group.length-1))b.player.isActive=!0,p.bind({"onCancel.player beforeClose.player":c,"onUpdate.player":e,"beforeLoad.player":d}),e(),b.trigger("onPlayStart")}else c()},next:function(a){var d=b.current;d&&(q(a)||(a=d.direction.next),b.jumpto(d.index+1,a,"next"))},prev:function(a){var d=b.current;
|
||||
d&&(q(a)||(a=d.direction.prev),b.jumpto(d.index-1,a,"prev"))},jumpto:function(a,d,e){var c=b.current;c&&(a=l(a),b.direction=d||c.direction[a>=c.index?"next":"prev"],b.router=e||"jumpto",c.loop&&(0>a&&(a=c.group.length+a%c.group.length),a%=c.group.length),c.group[a]!==v&&(b.cancel(),b._start(a)))},reposition:function(a,d){var e=b.current,c=e?e.wrap:null,k;c&&(k=b._getPosition(d),a&&"scroll"===a.type?(delete k.position,c.stop(!0,!0).animate(k,200)):(c.css(k),e.pos=f.extend({},e.dim,k)))},update:function(a){var d=
|
||||
a&&a.type,e=!d||"orientationchange"===d;e&&(clearTimeout(B),B=null);b.isOpen&&!B&&(B=setTimeout(function(){var c=b.current;c&&!b.isClosing&&(b.wrap.removeClass("fancybox-tmp"),(e||"load"===d||"resize"===d&&c.autoResize)&&b._setDimension(),"scroll"===d&&c.canShrink||b.reposition(a),b.trigger("onUpdate"),B=null)},e&&!s?0:300))},toggle:function(a){b.isOpen&&(b.current.fitToView="boolean"===f.type(a)?a:!b.current.fitToView,s&&(b.wrap.removeAttr("style").addClass("fancybox-tmp"),b.trigger("onUpdate")),
|
||||
b.update())},hideLoading:function(){p.unbind(".loading");f("#fancybox-loading").remove()},showLoading:function(){var a,d;b.hideLoading();a=f('<div id="fancybox-loading"><div></div></div>').click(b.cancel).appendTo("body");p.bind("keydown.loading",function(a){if(27===(a.which||a.keyCode))a.preventDefault(),b.cancel()});b.defaults.fixed||(d=b.getViewport(),a.css({position:"absolute",top:0.5*d.h+d.y,left:0.5*d.w+d.x}))},getViewport:function(){var a=b.current&&b.current.locked||!1,d={x:n.scrollLeft(),
|
||||
y:n.scrollTop()};a?(d.w=a[0].clientWidth,d.h=a[0].clientHeight):(d.w=s&&r.innerWidth?r.innerWidth:n.width(),d.h=s&&r.innerHeight?r.innerHeight:n.height());return d},unbindEvents:function(){b.wrap&&t(b.wrap)&&b.wrap.unbind(".fb");p.unbind(".fb");n.unbind(".fb")},bindEvents:function(){var a=b.current,d;a&&(n.bind("orientationchange.fb"+(s?"":" resize.fb")+(a.autoCenter&&!a.locked?" scroll.fb":""),b.update),(d=a.keys)&&p.bind("keydown.fb",function(e){var c=e.which||e.keyCode,k=e.target||e.srcElement;
|
||||
if(27===c&&b.coming)return!1;!e.ctrlKey&&(!e.altKey&&!e.shiftKey&&!e.metaKey&&(!k||!k.type&&!f(k).is("[contenteditable]")))&&f.each(d,function(d,k){if(1<a.group.length&&k[c]!==v)return b[d](k[c]),e.preventDefault(),!1;if(-1<f.inArray(c,k))return b[d](),e.preventDefault(),!1})}),f.fn.mousewheel&&a.mouseWheel&&b.wrap.bind("mousewheel.fb",function(d,c,k,g){for(var h=f(d.target||null),j=!1;h.length&&!j&&!h.is(".fancybox-skin")&&!h.is(".fancybox-wrap");)j=h[0]&&!(h[0].style.overflow&&"hidden"===h[0].style.overflow)&&
|
||||
(h[0].clientWidth&&h[0].scrollWidth>h[0].clientWidth||h[0].clientHeight&&h[0].scrollHeight>h[0].clientHeight),h=f(h).parent();if(0!==c&&!j&&1<b.group.length&&!a.canShrink){if(0<g||0<k)b.prev(0<g?"down":"left");else if(0>g||0>k)b.next(0>g?"up":"right");d.preventDefault()}}))},trigger:function(a,d){var e,c=d||b.coming||b.current;if(c){f.isFunction(c[a])&&(e=c[a].apply(c,Array.prototype.slice.call(arguments,1)));if(!1===e)return!1;c.helpers&&f.each(c.helpers,function(d,e){if(e&&b.helpers[d]&&f.isFunction(b.helpers[d][a]))b.helpers[d][a](f.extend(!0,
|
||||
{},b.helpers[d].defaults,e),c)});p.trigger(a)}},isImage:function(a){return q(a)&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSWF:function(a){return q(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(a){var d={},e,c;a=l(a);e=b.group[a]||null;if(!e)return!1;d=f.extend(!0,{},b.opts,e);e=d.margin;c=d.padding;"number"===f.type(e)&&(d.margin=[e,e,e,e]);"number"===f.type(c)&&(d.padding=[c,c,c,c]);d.modal&&f.extend(!0,d,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,
|
||||
mouseWheel:!1,keys:null,helpers:{overlay:{closeClick:!1}}});d.autoSize&&(d.autoWidth=d.autoHeight=!0);"auto"===d.width&&(d.autoWidth=!0);"auto"===d.height&&(d.autoHeight=!0);d.group=b.group;d.index=a;b.coming=d;if(!1===b.trigger("beforeLoad"))b.coming=null;else{c=d.type;e=d.href;if(!c)return b.coming=null,b.current&&b.router&&"jumpto"!==b.router?(b.current.index=a,b[b.router](b.direction)):!1;b.isActive=!0;if("image"===c||"swf"===c)d.autoHeight=d.autoWidth=!1,d.scrolling="visible";"image"===c&&(d.aspectRatio=
|
||||
!0);"iframe"===c&&s&&(d.scrolling="scroll");d.wrap=f(d.tpl.wrap).addClass("fancybox-"+(s?"mobile":"desktop")+" fancybox-type-"+c+" fancybox-tmp "+d.wrapCSS).appendTo(d.parent||"body");f.extend(d,{skin:f(".fancybox-skin",d.wrap),outer:f(".fancybox-outer",d.wrap),inner:f(".fancybox-inner",d.wrap)});f.each(["Top","Right","Bottom","Left"],function(a,b){d.skin.css("padding"+b,w(d.padding[a]))});b.trigger("onReady");if("inline"===c||"html"===c){if(!d.content||!d.content.length)return b._error("content")}else if(!e)return b._error("href");
|
||||
"image"===c?b._loadImage():"ajax"===c?b._loadAjax():"iframe"===c?b._loadIframe():b._afterLoad()}},_error:function(a){f.extend(b.coming,{type:"html",autoWidth:!0,autoHeight:!0,minWidth:0,minHeight:0,scrolling:"no",hasError:a,content:b.coming.tpl.error});b._afterLoad()},_loadImage:function(){var a=b.imgPreload=new Image;a.onload=function(){this.onload=this.onerror=null;b.coming.width=this.width/b.opts.pixelRatio;b.coming.height=this.height/b.opts.pixelRatio;b._afterLoad()};a.onerror=function(){this.onload=
|
||||
this.onerror=null;b._error("image")};a.src=b.coming.href;!0!==a.complete&&b.showLoading()},_loadAjax:function(){var a=b.coming;b.showLoading();b.ajaxLoad=f.ajax(f.extend({},a.ajax,{url:a.href,error:function(a,e){b.coming&&"abort"!==e?b._error("ajax",a):b.hideLoading()},success:function(d,e){"success"===e&&(a.content=d,b._afterLoad())}}))},_loadIframe:function(){var a=b.coming,d=f(a.tpl.iframe.replace(/\{rnd\}/g,(new Date).getTime())).attr("scrolling",s?"auto":a.iframe.scrolling).attr("src",a.href);
|
||||
f(a.wrap).bind("onReset",function(){try{f(this).find("iframe").hide().attr("src","//about:blank").end().empty()}catch(a){}});a.iframe.preload&&(b.showLoading(),d.one("load",function(){f(this).data("ready",1);s||f(this).bind("load.fb",b.update);f(this).parents(".fancybox-wrap").width("100%").removeClass("fancybox-tmp").show();b._afterLoad()}));a.content=d.appendTo(a.inner);a.iframe.preload||b._afterLoad()},_preloadImages:function(){var a=b.group,d=b.current,e=a.length,c=d.preload?Math.min(d.preload,
|
||||
e-1):0,f,g;for(g=1;g<=c;g+=1)f=a[(d.index+g)%e],"image"===f.type&&f.href&&((new Image).src=f.href)},_afterLoad:function(){var a=b.coming,d=b.current,e,c,k,g,h;b.hideLoading();if(a&&!1!==b.isActive)if(!1===b.trigger("afterLoad",a,d))a.wrap.stop(!0).trigger("onReset").remove(),b.coming=null;else{d&&(b.trigger("beforeChange",d),d.wrap.stop(!0).removeClass("fancybox-opened").find(".fancybox-item, .fancybox-nav").remove());b.unbindEvents();e=a.content;c=a.type;k=a.scrolling;f.extend(b,{wrap:a.wrap,skin:a.skin,
|
||||
outer:a.outer,inner:a.inner,current:a,previous:d});g=a.href;switch(c){case "inline":case "ajax":case "html":a.selector?e=f("<div>").html(e).find(a.selector):t(e)&&(e.data("fancybox-placeholder")||e.data("fancybox-placeholder",f('<div class="fancybox-placeholder"></div>').insertAfter(e).hide()),e=e.show().detach(),a.wrap.bind("onReset",function(){f(this).find(e).length&&e.hide().replaceAll(e.data("fancybox-placeholder")).data("fancybox-placeholder",!1)}));break;case "image":e=a.tpl.image.replace("{href}",
|
||||
g);break;case "swf":e='<object id="fancybox-swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="movie" value="'+g+'"></param>',h="",f.each(a.swf,function(a,b){e+='<param name="'+a+'" value="'+b+'"></param>';h+=" "+a+'="'+b+'"'}),e+='<embed src="'+g+'" type="application/x-shockwave-flash" width="100%" height="100%"'+h+"></embed></object>"}(!t(e)||!e.parent().is(a.inner))&&a.inner.append(e);b.trigger("beforeShow");a.inner.css("overflow","yes"===k?"scroll":
|
||||
"no"===k?"hidden":k);b._setDimension();b.reposition();b.isOpen=!1;b.coming=null;b.bindEvents();if(b.isOpened){if(d.prevMethod)b.transitions[d.prevMethod]()}else f(".fancybox-wrap").not(a.wrap).stop(!0).trigger("onReset").remove();b.transitions[b.isOpened?a.nextMethod:a.openMethod]();b._preloadImages()}},_setDimension:function(){var a=b.getViewport(),d=0,e=!1,c=!1,e=b.wrap,k=b.skin,g=b.inner,h=b.current,c=h.width,j=h.height,m=h.minWidth,u=h.minHeight,n=h.maxWidth,p=h.maxHeight,s=h.scrolling,q=h.scrollOutside?
|
||||
h.scrollbarWidth:0,x=h.margin,y=l(x[1]+x[3]),r=l(x[0]+x[2]),v,z,t,C,A,F,B,D,H;e.add(k).add(g).width("auto").height("auto").removeClass("fancybox-tmp");x=l(k.outerWidth(!0)-k.width());v=l(k.outerHeight(!0)-k.height());z=y+x;t=r+v;C=E(c)?(a.w-z)*l(c)/100:c;A=E(j)?(a.h-t)*l(j)/100:j;if("iframe"===h.type){if(H=h.content,h.autoHeight&&1===H.data("ready"))try{H[0].contentWindow.document.location&&(g.width(C).height(9999),F=H.contents().find("body"),q&&F.css("overflow-x","hidden"),A=F.outerHeight(!0))}catch(G){}}else if(h.autoWidth||
|
||||
h.autoHeight)g.addClass("fancybox-tmp"),h.autoWidth||g.width(C),h.autoHeight||g.height(A),h.autoWidth&&(C=g.width()),h.autoHeight&&(A=g.height()),g.removeClass("fancybox-tmp");c=l(C);j=l(A);D=C/A;m=l(E(m)?l(m,"w")-z:m);n=l(E(n)?l(n,"w")-z:n);u=l(E(u)?l(u,"h")-t:u);p=l(E(p)?l(p,"h")-t:p);F=n;B=p;h.fitToView&&(n=Math.min(a.w-z,n),p=Math.min(a.h-t,p));z=a.w-y;r=a.h-r;h.aspectRatio?(c>n&&(c=n,j=l(c/D)),j>p&&(j=p,c=l(j*D)),c<m&&(c=m,j=l(c/D)),j<u&&(j=u,c=l(j*D))):(c=Math.max(m,Math.min(c,n)),h.autoHeight&&
|
||||
"iframe"!==h.type&&(g.width(c),j=g.height()),j=Math.max(u,Math.min(j,p)));if(h.fitToView)if(g.width(c).height(j),e.width(c+x),a=e.width(),y=e.height(),h.aspectRatio)for(;(a>z||y>r)&&(c>m&&j>u)&&!(19<d++);)j=Math.max(u,Math.min(p,j-10)),c=l(j*D),c<m&&(c=m,j=l(c/D)),c>n&&(c=n,j=l(c/D)),g.width(c).height(j),e.width(c+x),a=e.width(),y=e.height();else c=Math.max(m,Math.min(c,c-(a-z))),j=Math.max(u,Math.min(j,j-(y-r)));q&&("auto"===s&&j<A&&c+x+q<z)&&(c+=q);g.width(c).height(j);e.width(c+x);a=e.width();
|
||||
y=e.height();e=(a>z||y>r)&&c>m&&j>u;c=h.aspectRatio?c<F&&j<B&&c<C&&j<A:(c<F||j<B)&&(c<C||j<A);f.extend(h,{dim:{width:w(a),height:w(y)},origWidth:C,origHeight:A,canShrink:e,canExpand:c,wPadding:x,hPadding:v,wrapSpace:y-k.outerHeight(!0),skinSpace:k.height()-j});!H&&(h.autoHeight&&j>u&&j<p&&!c)&&g.height("auto")},_getPosition:function(a){var d=b.current,e=b.getViewport(),c=d.margin,f=b.wrap.width()+c[1]+c[3],g=b.wrap.height()+c[0]+c[2],c={position:"absolute",top:c[0],left:c[3]};d.autoCenter&&d.fixed&&
|
||||
!a&&g<=e.h&&f<=e.w?c.position="fixed":d.locked||(c.top+=e.y,c.left+=e.x);c.top=w(Math.max(c.top,c.top+(e.h-g)*d.topRatio));c.left=w(Math.max(c.left,c.left+(e.w-f)*d.leftRatio));return c},_afterZoomIn:function(){var a=b.current;a&&(b.isOpen=b.isOpened=!0,b.wrap.css("overflow","visible").addClass("fancybox-opened"),b.update(),(a.closeClick||a.nextClick&&1<b.group.length)&&b.inner.css("cursor","pointer").bind("click.fb",function(d){!f(d.target).is("a")&&!f(d.target).parent().is("a")&&(d.preventDefault(),
|
||||
b[a.closeClick?"close":"next"]())}),a.closeBtn&&f(a.tpl.closeBtn).appendTo(b.skin).bind("click.fb",function(a){a.preventDefault();b.close()}),a.arrows&&1<b.group.length&&((a.loop||0<a.index)&&f(a.tpl.prev).appendTo(b.outer).bind("click.fb",b.prev),(a.loop||a.index<b.group.length-1)&&f(a.tpl.next).appendTo(b.outer).bind("click.fb",b.next)),b.trigger("afterShow"),!a.loop&&a.index===a.group.length-1?b.play(!1):b.opts.autoPlay&&!b.player.isActive&&(b.opts.autoPlay=!1,b.play()))},_afterZoomOut:function(a){a=
|
||||
a||b.current;f(".fancybox-wrap").trigger("onReset").remove();f.extend(b,{group:{},opts:{},router:!1,current:null,isActive:!1,isOpened:!1,isOpen:!1,isClosing:!1,wrap:null,skin:null,outer:null,inner:null});b.trigger("afterClose",a)}});b.transitions={getOrigPosition:function(){var a=b.current,d=a.element,e=a.orig,c={},f=50,g=50,h=a.hPadding,j=a.wPadding,m=b.getViewport();!e&&(a.isDom&&d.is(":visible"))&&(e=d.find("img:first"),e.length||(e=d));t(e)?(c=e.offset(),e.is("img")&&(f=e.outerWidth(),g=e.outerHeight())):
|
||||
(c.top=m.y+(m.h-g)*a.topRatio,c.left=m.x+(m.w-f)*a.leftRatio);if("fixed"===b.wrap.css("position")||a.locked)c.top-=m.y,c.left-=m.x;return c={top:w(c.top-h*a.topRatio),left:w(c.left-j*a.leftRatio),width:w(f+j),height:w(g+h)}},step:function(a,d){var e,c,f=d.prop;c=b.current;var g=c.wrapSpace,h=c.skinSpace;if("width"===f||"height"===f)e=d.end===d.start?1:(a-d.start)/(d.end-d.start),b.isClosing&&(e=1-e),c="width"===f?c.wPadding:c.hPadding,c=a-c,b.skin[f](l("width"===f?c:c-g*e)),b.inner[f](l("width"===
|
||||
f?c:c-g*e-h*e))},zoomIn:function(){var a=b.current,d=a.pos,e=a.openEffect,c="elastic"===e,k=f.extend({opacity:1},d);delete k.position;c?(d=this.getOrigPosition(),a.openOpacity&&(d.opacity=0.1)):"fade"===e&&(d.opacity=0.1);b.wrap.css(d).animate(k,{duration:"none"===e?0:a.openSpeed,easing:a.openEasing,step:c?this.step:null,complete:b._afterZoomIn})},zoomOut:function(){var a=b.current,d=a.closeEffect,e="elastic"===d,c={opacity:0.1};e&&(c=this.getOrigPosition(),a.closeOpacity&&(c.opacity=0.1));b.wrap.animate(c,
|
||||
{duration:"none"===d?0:a.closeSpeed,easing:a.closeEasing,step:e?this.step:null,complete:b._afterZoomOut})},changeIn:function(){var a=b.current,d=a.nextEffect,e=a.pos,c={opacity:1},f=b.direction,g;e.opacity=0.1;"elastic"===d&&(g="down"===f||"up"===f?"top":"left","down"===f||"right"===f?(e[g]=w(l(e[g])-200),c[g]="+=200px"):(e[g]=w(l(e[g])+200),c[g]="-=200px"));"none"===d?b._afterZoomIn():b.wrap.css(e).animate(c,{duration:a.nextSpeed,easing:a.nextEasing,complete:b._afterZoomIn})},changeOut:function(){var a=
|
||||
b.previous,d=a.prevEffect,e={opacity:0.1},c=b.direction;"elastic"===d&&(e["down"===c||"up"===c?"top":"left"]=("up"===c||"left"===c?"-":"+")+"=200px");a.wrap.animate(e,{duration:"none"===d?0:a.prevSpeed,easing:a.prevEasing,complete:function(){f(this).trigger("onReset").remove()}})}};b.helpers.overlay={defaults:{closeClick:!0,speedOut:200,showEarly:!0,css:{},locked:!s,fixed:!0},overlay:null,fixed:!1,el:f("html"),create:function(a){a=f.extend({},this.defaults,a);this.overlay&&this.close();this.overlay=
|
||||
f('<div class="fancybox-overlay"></div>').appendTo(b.coming?b.coming.parent:a.parent);this.fixed=!1;a.fixed&&b.defaults.fixed&&(this.overlay.addClass("fancybox-overlay-fixed"),this.fixed=!0)},open:function(a){var d=this;a=f.extend({},this.defaults,a);this.overlay?this.overlay.unbind(".overlay").width("auto").height("auto"):this.create(a);this.fixed||(n.bind("resize.overlay",f.proxy(this.update,this)),this.update());a.closeClick&&this.overlay.bind("click.overlay",function(a){if(f(a.target).hasClass("fancybox-overlay"))return b.isActive?
|
||||
b.close():d.close(),!1});this.overlay.css(a.css).show()},close:function(){var a,b;n.unbind("resize.overlay");this.el.hasClass("fancybox-lock")&&(f(".fancybox-margin").removeClass("fancybox-margin"),a=n.scrollTop(),b=n.scrollLeft(),this.el.removeClass("fancybox-lock"),n.scrollTop(a).scrollLeft(b));f(".fancybox-overlay").remove().hide();f.extend(this,{overlay:null,fixed:!1})},update:function(){var a="100%",b;this.overlay.width(a).height("100%");I?(b=Math.max(G.documentElement.offsetWidth,G.body.offsetWidth),
|
||||
p.width()>b&&(a=p.width())):p.width()>n.width()&&(a=p.width());this.overlay.width(a).height(p.height())},onReady:function(a,b){var e=this.overlay;f(".fancybox-overlay").stop(!0,!0);e||this.create(a);a.locked&&(this.fixed&&b.fixed)&&(e||(this.margin=p.height()>n.height()?f("html").css("margin-right").replace("px",""):!1),b.locked=this.overlay.append(b.wrap),b.fixed=!1);!0===a.showEarly&&this.beforeShow.apply(this,arguments)},beforeShow:function(a,b){var e,c;b.locked&&(!1!==this.margin&&(f("*").filter(function(){return"fixed"===
|
||||
f(this).css("position")&&!f(this).hasClass("fancybox-overlay")&&!f(this).hasClass("fancybox-wrap")}).addClass("fancybox-margin"),this.el.addClass("fancybox-margin")),e=n.scrollTop(),c=n.scrollLeft(),this.el.addClass("fancybox-lock"),n.scrollTop(e).scrollLeft(c));this.open(a)},onUpdate:function(){this.fixed||this.update()},afterClose:function(a){this.overlay&&!b.coming&&this.overlay.fadeOut(a.speedOut,f.proxy(this.close,this))}};b.helpers.title={defaults:{type:"float",position:"bottom"},beforeShow:function(a){var d=
|
||||
b.current,e=d.title,c=a.type;f.isFunction(e)&&(e=e.call(d.element,d));if(q(e)&&""!==f.trim(e)){d=f('<div class="fancybox-title fancybox-title-'+c+'-wrap">'+e+"</div>");switch(c){case "inside":c=b.skin;break;case "outside":c=b.wrap;break;case "over":c=b.inner;break;default:c=b.skin,d.appendTo("body"),I&&d.width(d.width()),d.wrapInner('<span class="child"></span>'),b.current.margin[2]+=Math.abs(l(d.css("margin-bottom")))}d["top"===a.position?"prependTo":"appendTo"](c)}}};f.fn.fancybox=function(a){var d,
|
||||
e=f(this),c=this.selector||"",k=function(g){var h=f(this).blur(),j=d,k,l;!g.ctrlKey&&(!g.altKey&&!g.shiftKey&&!g.metaKey)&&!h.is(".fancybox-wrap")&&(k=a.groupAttr||"data-fancybox-group",l=h.attr(k),l||(k="rel",l=h.get(0)[k]),l&&(""!==l&&"nofollow"!==l)&&(h=c.length?f(c):e,h=h.filter("["+k+'="'+l+'"]'),j=h.index(this)),a.index=j,!1!==b.open(h,a)&&g.preventDefault())};a=a||{};d=a.index||0;!c||!1===a.live?e.unbind("click.fb-start").bind("click.fb-start",k):p.undelegate(c,"click.fb-start").delegate(c+
|
||||
":not('.fancybox-item, .fancybox-nav')","click.fb-start",k);this.filter("[data-fancybox-start=1]").trigger("click");return this};p.ready(function(){var a,d;f.scrollbarWidth===v&&(f.scrollbarWidth=function(){var a=f('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo("body"),b=a.children(),b=b.innerWidth()-b.height(99).innerWidth();a.remove();return b});if(f.support.fixedPosition===v){a=f.support;d=f('<div style="position:fixed;top:20px;"></div>').appendTo("body");var e=20===
|
||||
d[0].offsetTop||15===d[0].offsetTop;d.remove();a.fixedPosition=e}f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(r).width();J.addClass("fancybox-lock-test");d=f(r).width();J.removeClass("fancybox-lock-test");f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -0,0 +1,601 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>AudioSphere - a Music Player for Children</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<meta property="og:url" content="http://tilman.de/projekte/audiosphere/" />
|
||||
<meta property="og:title" content="AudioSphere - a Music Player for Children" />
|
||||
<meta property="og:description" content="In spring 2016 I finalized the "Musikrakete", an MP3 player that our boys could operate without assistance. This is the improved second version, which is even easier to use. Music is played by simply placing a QR code card on top of the sphere. It plays MP3 files from the local network or Google drive and audiostreams from the Internet. If you have children who love music, ever used a terminal and also know what end of a soldering iron not to touch, this might be a project for you." />
|
||||
<meta property="og:image" content="http://tilman.de/projekte/audiosphere/images/audiosphere-02.jpg" />
|
||||
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css' />
|
||||
<!-- <link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css' /> -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
|
||||
<style type="text/css" media="all">
|
||||
<!--
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
color: black;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
color: #303030;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #303030;
|
||||
font-size: 120%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
text-align: right;
|
||||
color: #888;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.fancybox-title {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
-->
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$(".fancybox").fancybox({
|
||||
openEffect : 'none',
|
||||
closeEffect : 'none',
|
||||
helpers : {
|
||||
title : {
|
||||
type : 'inside'
|
||||
}
|
||||
},
|
||||
beforeShow : function() {
|
||||
var alt = this.element.find('img').attr('alt');
|
||||
this.inner.find('img').attr('alt', alt);
|
||||
this.title = alt;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content" class="container">
|
||||
<p class="timestamp">2017-02-11</p>
|
||||
|
||||
<p class="well">
|
||||
<em>There is an updated version of this project: <a href="http://tilman.de/projekte/qudio/">Qudio</a>. This third version now relies on <a href="https://volumio.org/">volumio</a> which can play music from streaming services like Spotify Premium or LastFM, has a nice web interface and makes configuration easy. The case is much smaller than before, which makes it sturdier and easier to print. The electronic parts are all easily obtainable standard compontents and even cheaper than before.</em>
|
||||
</p>
|
||||
|
||||
<h1>AudioSphere</h1>
|
||||
<p id="subtitle">An easy-to-use music player for children based on the Raspberry Pi Zero and the JBL On Stage IIIp</p>
|
||||
|
||||
<p class="well" style="text-align: center;">In spring 2016 I finalized the <a href="http://tilman.de/projekte/musikrakete/">"Musikrakete"</a>, an MP3 player that our boys could operate without assistance. This is the improved second version, which is even easier to use. Music is played by simply placing a QR code card on top of the sphere. It plays MP3 files from the local network or Google drive and audiostreams from the Internet. If you have children who love music, ever used a terminal and also know what end of a soldering iron not to touch, this might be a project for you.</p>
|
||||
|
||||
<p class="gallery" style="float:right;">
|
||||
<a href="images/audiosphere-02.jpg" class="fancybox"><img src="images/audiosphere-02.jpg"
|
||||
width="480" alt="The AudioSphere player. The QR cards are placed on the window on top, where they are detected by a photo sensor that triggers the recognition process. After the code has been read by the webcam, the respective playlist is loaded via network and played directly." /></a>
|
||||
</p>
|
||||
|
||||
<h2 id="idea">The Idea</h2>
|
||||
<p>
|
||||
This project started about a year ago, when Anica asked me if buying a <a href="https://de-de.hoerbert.com/">hörbert</a> MP3 player would be a good idea. At the time our boys wasted two to three CDs every week, trying to get some music out of the small player in their room. And the player in the living room also seemed to reach its end of life pretty soon due to their enthusiasm. Still I wasn't too sure about this hörbert thing. In order to get new files on the SD card of the player, the case had to be opened, the navigation with 11 buttons also seemed a little confusing and a single speaker operated with four batteries also did not seem promising to me.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I had seen a <a href="http://www.die-schembergs.de/index.php?page=qr-music">project description of an MP3 player for small children</a> shortly before: A Raspberry Pi mini computer, connected to a webcam and speakers, reads QR codes and plays the respective track or playlist. So this was what I suggested and to my surprise it was considered a better solution right away. And I had a project.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As good as the project description seemed to be, I wanted to make some improvements on the original design: The player should detect the QR automatically, it should have buttons for play/pause and skipping and all components should be put together in a single case. Most importantly, the MP3 files should be delivered directly from our home server. No SD card replacement needed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Since we had an old <a href="https://www.amazon.com/JBL-OnStage-30-Pin-iPhone-Speaker/dp/B0017XMN7C">JBL OnStage IIIp</a> speaker lying around that wasn't used anymore due to its outdated iPhone dock connector, I decided to use this as a base. After playing around with <a href="https://www.onshape.com/">Onshape</a>, soldering and programming for three months, I had the <a href="http://tilman.de/projekte/musikrakete/">Musikrakete</a> ready by end of March 2016. It's been a huge success with the boys and has been in heavy use ever since.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
But there were still some open ends on the technical side and I knew that we might need a second player, once the boys each have a room of their own. So when Anica was searching for a good gift to her best friend's sons we decided that an updated version would be a good idea.
|
||||
</p>
|
||||
|
||||
<div style="margin: 2em; text-align: center;">
|
||||
<video controls><source src="AudioSphere.mp4" type="video/mp4" /></video>
|
||||
</div>
|
||||
|
||||
<p class="gallery" style="float:left; margin-right: 4ex; margin-top: 8ex;">
|
||||
<a href="images/audiosphere-qr-cards.jpg" class="fancybox"><img src="images/audiosphere-qr-cards.jpg"
|
||||
width="360" alt="The QR cards for the AudioSphere player. They are placed on top of the case with the cover picture facing up. On the backside is a QR code that tells the player where to find the MP3 files." /></a>
|
||||
</p>
|
||||
|
||||
<h2 id="piplayer2">PiPlayer 2.0: AudioSphere</h2>
|
||||
|
||||
<p>
|
||||
The major improvement in handling was switching from a QR card slot to a window on top where the QR cards are placed on. I had seen that especially the two-year-old had problems getting the cards into the narrow slot. Unfortunately, this also meant that a rocket shape was not an option anymore. At first I tried to put only a hemisphere on top of the JBL speaker which would make it look like a UFO. But the webcam needed at least 8 cm distance to the card in order have the entire QR code covered. Technically, it would be possible to further reduce the size of the ball but fitting all the components in there is hard enough as it is.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Since we had problems with the Wi-Fi connection in the boy's room an ethernet port is now also available and thanks to switching to the Raspberry Pi Zero, the Apple dock port can power all the components. No additonal power source needed anymore. By incorporating a <a href="https://shop.pimoroni.com/products/phat-dac">Pimoroni PHAT DAC</a> I removed all the audio-related headaches. (You can order one <a href="https://shop.pimoroni.com/products/pi-zero-project-kits">together with the RasPi Zero as a kit</a>.)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
On the software side there's two major improvements: The SD card is now mounted read-only by default. This makes unplugging the AudioSphere by accident or for reboot unproblematic. And the Python script that operates the player now uses interrupts instead of polling for checking the input sources - no more busy waiting! You can find the entire documentation including the central <a href="https://github.com/tliero/audiosphere/blob/master/piplayer2/piplayer2.py">Python script</a> in the <a href="https://github.com/tliero/audiosphere/">GitHub repository</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
OK, so much for the overview - let's build this, step by step.
|
||||
</p>
|
||||
|
||||
<h2 id="parts">Parts list</h2>
|
||||
|
||||
<p>
|
||||
This is everything we'll need:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>the sphere case (I got mine printed via <a href="https://www.3dhubs.com/">3dhubs.com</a>)</li>
|
||||
<li>JBL On Stage IIIP (used via ebay for less than 20 €)</li>
|
||||
<li>Raspberry Pi Zero with a micro SD card</li>
|
||||
<li><a href="https://shop.pimoroni.com/products/phat-dac">Pimoroni PHAT DAC</a></li>
|
||||
<li>cheap USB Wi-Fi adapter</li>
|
||||
<li>ultra-cheap <a href="images/micro-usb-hub.jpg" class="fancybox">Micro USB HUB with ethernet port</a></li>
|
||||
<li>even cheaper <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">USB webcam</a></li>
|
||||
<li><a href="images/30-pin-apple-dock-to-micro-usb-and-audio-adapter.jpg" class="fancybox">30-pin Apple dock adapter to micro USB and 3.5 mm audio</a></li>
|
||||
<li>2 mm acrylic glass circle with 75 mm diameter. You can order these on ebay.</li>
|
||||
<li>3 × M3 nylon screws with nuts and washers for mounting the case on the speaker</li>
|
||||
<li>5 × M2.5 nylon screws (with 3 washers and 8 nuts) for the Raspberry Pi and the case</li>
|
||||
<li>
|
||||
Electronic components:
|
||||
<ul>
|
||||
<li>3 × 12 mm momentary push buttons</li>
|
||||
<li><a href="http://www.vishay.com/docs/83751/cny70.pdf">CNY70 reflective optical sensor</a></li>
|
||||
<li>Resistors: 2 × 100 Ω, 4.7 kΩ, 10 kΩ</li>
|
||||
<li>NPN transistor</li>
|
||||
<li>White LED for illumination of the QR cards</li>
|
||||
<li>Infrared LED (904 nm) for remote controlling the speaker</li>
|
||||
<li>Jumper wires</li>
|
||||
<li>copper wire, circuit board, solder</li>
|
||||
<li>probably a breadboard for testing everything out before soldering</li>
|
||||
</ul>
|
||||
<li>
|
||||
Tools:
|
||||
<ul>
|
||||
<li>Soldering iron</li>
|
||||
<li>Glue gun</li>
|
||||
<li>Screwdriver</li>
|
||||
<li>Cutting knife</li>
|
||||
<li>Power drill</li>
|
||||
<li>Superglue (for the window and the case nuts)</li>
|
||||
<li>Multimeter</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="case">3D Printed Case</h2>
|
||||
|
||||
<p>
|
||||
First step was the design of the new case. Like the first <a href="https://cad.onshape.com/documents/56f3cf83e4b02f6312a93771/w/785ccf8684baed006305bb0d/e/c68592f13fbf9a2c69b8dd05">rocket case</a> it's public, you can find it <a href="https://cad.onshape.com/documents/584e7d080f617710a60fc5d3/w/28f44a0afe402320fa3f3faa/e/765c3d5ab7a1032836866ac8">here on Onshape</a>. (You will need to create an account to open the document.) Or you can download the <a href="https://github.com/tliero/audiosphere/tree/master/case">STL files</a> for printing if you are using the very same components. Please note that you will need to rotate the top of the sphere 180° for printing. Also be careful about the Raspberry holder: The Raspberry Pi together with the PHAT DAC should have a <a href="images/phat_dac_measure.jpg" class="fancybox">height of 7.2 mm</a> (or less) which depends on the GPIO header that is used to solder the PHAT DAC to the RasPi. If the height exeeds that, the distance needs to be adjusted before printing.
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/piplayer-04-04.png" class="fancybox" rel="collection01"><img src="images/piplayer-04-04.png"
|
||||
width="320" alt="The base with the three main electronic components: The Raspberry Pi Zero with the PHAT DAC (blue), the USB hub with the ethernet port (green) and the camera with a representation of its viewport (black)." /></a>
|
||||
<a href="images/piplayer-02-500.gif" class="fancybox" rel="collection01"><img src="images/piplayer-02-500.gif" width="320"
|
||||
alt="Animation of the assembly" /></a>
|
||||
<a href="images/piplayer-02-07.png" class="fancybox"
|
||||
rel="collection01"><img src="images/piplayer-02-07.png" width="320"
|
||||
alt="The assembled case" /></a>
|
||||
</p>
|
||||
|
||||
<h2 id="system">System Installation on the Raspberry Pi Zero</h2>
|
||||
|
||||
<h3>Update and Basic Setup</h3>
|
||||
<p>
|
||||
Before installing anything additionally, <a href="https://www.raspberrypi.org/downloads/raspbian/">Raspbian Lite</a> has to be <a href="https://www.raspberrypi.org/documentation/installation/installing-images/README.md">set up on the SD card</a>. When the card is ready, it is necessary to at least once connect a monitor and a keyboard to the RasPi for the initial setup since SSH is disabled by default. As soon as SSH is enabled and Wi-Fi is configured, we can remove all the cables and continue to work remotely over SSH.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<em>From here on it's basically entering line by line to your terminal (and later on it's copy-and-paste via SSH). You might need to confirm or close something every now and then. Where a configuration file has to be edited, the contents that go to the file are also put in comments with a leading tab. The links are the references for the individual steps.</em>
|
||||
</p>
|
||||
|
||||
<pre class="pre-scrollable">
|
||||
# Make sure that the latest versions are installed (this might take some time) (<a href="https://www.raspberrypi.org/documentation/raspbian/updating.md">https://www.raspberrypi.org/documentation/raspbian/updating.md</a>)
|
||||
sudo apt update
|
||||
sudo apt dist-upgrade
|
||||
|
||||
# Basic setup: change the password, set the keyboard layout, Wi-Fi channels and hostname and enable SSH
|
||||
sudo raspi-config
|
||||
|
||||
# Check kernel messages for errors
|
||||
dmesg
|
||||
|
||||
# Check for connected USB devices
|
||||
lsusb
|
||||
|
||||
# If not done yet, plug in the Wi-Fi adapter and reboot
|
||||
sudo reboot
|
||||
</pre>
|
||||
|
||||
<h3 id="wi-fi">Configure Wi-Fi</h3>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<pre class="pre-scrollable">
|
||||
# Scan networks and add Wi-Fi network to configuration (<a href="https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md">https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md</a>)
|
||||
# (Close nano after editing with Ctrl-X)
|
||||
sudo iwlist wlan0 scan
|
||||
sudo nano /etc/wpa_supplicant/wpa_supplicant.conf
|
||||
# network={
|
||||
# ssid="The_ESSID_from_earlier"
|
||||
# psk="Your_wifi_password"
|
||||
# }
|
||||
|
||||
# Restart Wi-Fi
|
||||
sudo ifdown wlan0
|
||||
sudo ifup wlan0
|
||||
|
||||
# Check if Wi-Fi is connected
|
||||
ifconfig wlan0
|
||||
|
||||
# Turn off
|
||||
sudo shutdown -h now
|
||||
</pre>
|
||||
|
||||
<h3>Remotely Finish the Setup</h3>
|
||||
|
||||
<p>
|
||||
From here on you can connect via SSH over Wi-Fi. Unplug monitor, keyboard and the ethernet cable. It might also be helpful to configure a static IP for the Wi-Fi adapter in your router before continuing. Then restart the RasPi, <a href="https://www.raspberrypi.org/documentation/remote-access/ssh/">connect via SSH</a> from a different computer and go on with the setup procedure.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
# Now that remote connection is available, disable HDMI (<a href="http://www.jeffgeerling.com/blogs/jeff-geerling/raspberry-pi-zero-conserve-energy">http://www.jeffgeerling.com/blogs/jeff-geerling/raspberry-pi-zero-conserve-energy</a>)
|
||||
# (This line has to go *before* "exit 0" at the end of the file)
|
||||
sudo nano /etc/rc.local
|
||||
# # disable HDMI
|
||||
# /usr/bin/tvservice -o
|
||||
|
||||
# Add this to config.txt to disable the ACT LED
|
||||
sudo nano /boot/config.txt
|
||||
# dtparam=act_led_trigger=none
|
||||
# dtparam=act_led_activelow=off
|
||||
|
||||
# Configure NTP
|
||||
sudo apt install ntp
|
||||
sudo nano /etc/ntp.conf
|
||||
# add time server to /etc/ntp.conf (line 16)
|
||||
# server de.pool.ntp.org
|
||||
sudo /etc/init.d/ntp restart
|
||||
date
|
||||
|
||||
# Turn off
|
||||
sudo shutdown -h now
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Now that the RasPi is ready, the next step is setting up all the other hardware components: The speaker, the case and the electronics.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id="jblpreparation">Preparing the JBL IIIp Speaker</h2>
|
||||
<p>
|
||||
In order to drill the holes for the screws, the speaker has to be disassembled. The procedure is described <a href="https://de.ifixit.com/Guide/JBL+On+Stage+II+Speakers+Replacement/22462">here at ifixit.com for the predecessor</a> which works basically the same way: Remove the rubber pads, then remove all screws from the case. (Don't forget the center screw in the battery case.) Once the speaker case is opened, the circuit board is unscrewed and removed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I drilled the holes for the M3 screws and the IR LED cable using a <a href="misc/audiosphere_drilling_template.pdf">template</a>. The drill itself is set to rotate left. That way, the holes are more or less melted into the plastic to lower the risk of breaking the case.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
After drilling, washers and screws are added and the infrared LED is glued directly in front of the speaker's IR sensor in order to send it commands. Before that the PINs of the IR LED are soldered to cables that are long enough to connect it to the circuit board through one of the additional holes. Also, all the electronics should be tested together before anything is hot-glued into the case.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
(Disclaimer: Until now, I only did a proof of concept test script for remote contolling the speaker via the IR LED. I am planning on using that component later on via a web app but for the time being you could as well leave it out.)
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/jbl_01.jpg" class="fancybox" rel="collection02"><img src="images/jbl_01.jpg" width="320" alt="The opened speaker case with the drilling template" /></a>
|
||||
<a href="images/jbl_02.jpg" class="fancybox" rel="collection02"><img src="images/jbl_02.jpg" width="320" alt="The re-assembled speaker with the IR LED in front of the IR sensor" /></a>
|
||||
<a href="images/jbl_03.jpg" class="fancybox" rel="collection02"><img src="images/jbl_03.jpg" width="320" alt="The closed speaker case with the screws that hold the 3D printed case. (This photo was taken before adding the IR LED.)" /></a>
|
||||
</p>
|
||||
|
||||
<h2 id="electronics">Electronics</h2>
|
||||
<p>
|
||||
When the speaker has been put back together, we can go for the circuit board. There are four electronic parts: The optical sensor that triggers the QR recognition, the LED that illuminates the QR card, the infrared LED which we already glued in front of the sensor and the 3 buttons that are used to pause/unpause playback and move within the current playlist. While the buttons and the LEDs are put directly in the case, all other elements are brought together on a circuit board from where they are connected to the RasPi via jumper cables. So this is what we're aiming for:
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/audiosphere-electronics.png" class="fancybox"><img src="images/audiosphere-electronics.png" width="480" alt="The electronics in a single diagram with the optical sensor on the left, the LED, the infrared LED and the three buttons on the right. (<a href='https://github.com/tliero/audiosphere/blob/master/misc/electronics-final.fzz'>Source file</a> for <a href='http://fritzing.org'>fritzing</a>)" /></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Assembling the circuit is pretty straight forward. Be careful about the optical sensor, though: There are two versions out there, <a href="http://www.vishay.com/docs/83751/cny70.pdf">one from Vishay</a> and <a hreaf="http://smallsystems.isn-oldenburg.de/smallrobots/ws2001/Tischkante/cny70.pdf">one from TEMIC</a> that has the detector transistor upside down compared to the other one. Also note that I used a LED that can operate directly on the RasPi's 3.3 V without a series resistor. If you use a smaller one (which should also be sufficient for illumination), you will need one.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
After <!-- http://www.instructables.com/id/Multiroom-Client-With-Raspberry-Pi-ZERO-and-PHAT-D/?ALLSTEPS --><a href="https://learn.pimoroni.com/tutorial/sandyj/soldering-phats">soldering the PHAT DAC onto the Raspberri Pi</a> (preferably using a <a href="images/gpio-header.jpg">GPIO header</a> that directly routes through all the GPIOs) the used PINs are connected with the jumper cables. <!-- Where these were not soldered to the contact, I used hot glue to fix the connection which worked pretty well. -->
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Once everything is connected together, it can be put in the case for the software installation and final adjustments. All components are connected but wait using the glue gun until everything is tested thoroughly. Especially the webcam might need some in-place live adjustment. Depending on the glossyness of your code cards, the angle of the illumination LED might be relevant as well. The easiest way to do this is by connecting the webcam to another computer while it is already in the case (see bash history below).
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/buttons_and_circuit_board.jpg" class="fancybox" rel="collection03"><img src="images/buttons_and_circuit_board.jpg" width="320" alt="The circuit board after soldering with all resistors, the transistor and open contacts to be connected via jumper cables. In order to protect the wire cables and soldering points from breaking, I applied hot glue after testing." /></a>
|
||||
<a href="images/phat_dac_soldering.jpg" class="fancybox" rel="collection03"><img src="images/phat_dac_soldering.jpg" width="320" alt="The PHAT DAC after soldering." /></a>
|
||||
<a href="images/phat_dac_soldering_back.jpg" class="fancybox" rel="collection03"><img src="images/phat_dac_soldering_back.jpg" width="320" alt="By my low standards, that is a pretty decent soldering. You can also see the nylon nuts I used as spacers." /></a>
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/circuit_board.jpg" class="fancybox" rel="collection03"><img src="images/circuit_board.jpg" width="320" alt="I did not solder the jumper wires to the RasPi but also fixed them with hot glue. This keeps them together as a unit, isolates them from one another, and the hot glue can be peeled off if something goes wrong." /></a>
|
||||
<a href="images/piplayer-opened.jpg" class="fancybox" rel="collection03"><img src="images/piplayer-opened.jpg" width="320" alt="Interior view of the AudioSphere player with all components assebled. The circuit board is glued to the front side (not visible from this angle)." /></a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
What's missing in the pictures is how to get a screw thread behind the holes in the case: Use super glue to put three M3 nuts on washers (in order to enlarge the surface). When dried, use the super glue again to attach these nuts-on-washers behind the screw holes of the case. (Use the screws to adjust them so you can turn them in and out. I used <a href="http://www.uhu.com/produkte/alleskleber/detail/uhu-alleskleber-superstrong-safe.html?cHash=6d17927cfdf1797595540fe083329e0a">UHU Super Strong and Safe</a> which gives you some time for corrections after applying.) Et voilà, you now got yourself screw holes with threads on the player's case.
|
||||
</p>
|
||||
|
||||
<h2 id="software">Software</h2>
|
||||
|
||||
<h3>Install and Configure Additional Packages and the Python Script</h3>
|
||||
<p>
|
||||
Now configure the additional software that is needed for the player. Before doing that, copy the contents of the <a href="https://github.com/tliero/audiosphere/tree/master/piplayer2">piplayer2 directory</a> (including subdirectories <code>sounds</code> and <code>test</code>) to <code>/home/pi</code> (either directly on the SD card or via SCP). Have also one of the <a href="https://github.com/tliero/audiosphere/raw/master/documentation/QR%20Card%20Template.odt">test cards from the template</a> ready for testing the QR recognition.
|
||||
</p>
|
||||
|
||||
<pre class="pre-scrollable">
|
||||
# Install additional software
|
||||
sudo apt install lirc zbar-tools mc moc fswebcam python3 python-rpi.gpio python3-rpi.gpio
|
||||
|
||||
# As a first test turn the LED on and off
|
||||
python3 ~/test/lighton.py
|
||||
python3 ~/test/lightoff.py
|
||||
|
||||
# We can also test the buttons and the sensor (Press buttons to retrieve their ID, hold a card
|
||||
# on the sensor to see if it switches from 'LOW' to 'HIGH')
|
||||
# (Stop the scripts with Ctrl-C)
|
||||
python3 ~/test/buttons.py
|
||||
python3 ~/test/sensor.py
|
||||
|
||||
# Configure PHAT DAC (<a href="https://learn.pimoroni.com/tutorial/phat/raspberry-pi-phat-dac-install">https://learn.pimoroni.com/tutorial/phat/raspberry-pi-phat-dac-install</a>)
|
||||
curl -sS get.pimoroni.com/phatdac | bash
|
||||
|
||||
# Check for errors
|
||||
dmesg
|
||||
|
||||
# Plug in headphones or JBL connector cable, start mocp and test audio output via the PHAT DAC. (Don't forget to turn on the speaker!)
|
||||
mocp -S
|
||||
mocp -l ~/sounds/scanning.mp3
|
||||
mocp -x
|
||||
|
||||
# Determine the webcam's USB ID and the available resolutions (<a href="http://askubuntu.com/questions/214977/how-can-i-find-out-the-supported-webcam-resolutions">http://askubuntu.com/questions/214977/how-can-i-find-out-the-supported-webcam-resolutions</a>)
|
||||
# (The USB ID "001:006" in the second line has to be replaced with the actual ID of the camera)
|
||||
lsusb
|
||||
lsusb -s 001:006 -v | egrep "Width|Height"
|
||||
|
||||
# Webcam test: turn on the LED, take a photo and turn the LED off
|
||||
# (The focus of the webcam should be adjusted to the window distance beforehand on another computer with a live picture)
|
||||
python3 ~/test/lighton.py
|
||||
sudo fswebcam -r 320x240 -d /dev/video0 -v ~/webcam-test.jpg
|
||||
python3 ~/test/lightoff.py
|
||||
|
||||
# Copy ~/webcam-test.jpg to another computer and have a look at it
|
||||
# If needed, adjust the webcam and repeat the step until the QR code recognition is reliable
|
||||
|
||||
# QR-Test: Hold a QR code card above the webcam then turn on the LED, decode the QR code and turn the LED off
|
||||
# (Stop scanning for codes with Ctrl-C)
|
||||
python3 ~/test/lighton.py
|
||||
zbarcam --quiet --nodisplay --raw -Sdisable -Sqrcode.enable --prescale=320x240 /dev/video0
|
||||
python3 ~/test/lightoff.py
|
||||
|
||||
|
||||
## From here on it's about the configuration of the infrared sender - currently this is not used
|
||||
|
||||
# Enable lirc in /boot/config.txt and add parameters
|
||||
sudo nano /boot/config.txt
|
||||
# # Uncomment this to enable the lirc-rpi module
|
||||
# dtoverlay=lirc-rpi,gpio_in_pin=23,gpio_out_pin=22
|
||||
|
||||
# adapt lirc configuration in /etc/lirc/hardware.conf
|
||||
sudo nano /etc/lirc/hardware.conf
|
||||
# LIRCD_ARGS="--uinput"
|
||||
# LOAD_MODULES=true
|
||||
# DRIVER="default"
|
||||
# DEVICE="/dev/lirc0"
|
||||
# MODULES="lirc_rpi"
|
||||
# LIRCD_CONF=""
|
||||
# LIRCMD_CONF=""
|
||||
|
||||
sudo reboot
|
||||
|
||||
# Copy the contents of the <a href="https://github.com/tliero/audiosphere/blob/master/documentation/lirc_jbl_iiip.conf">JBL remote configuration</a> to /etc/lirc/lircd.conf then restart lircd
|
||||
sudo /etc/init.d/lirc restart
|
||||
|
||||
# Turn on music, list available commands and test remote control
|
||||
mocp -S && mocp -l ~/sounds/scanning.mp3
|
||||
sudo lircd -d /dev/lirc0
|
||||
irsend LIST JBLIIIP ""
|
||||
## Apparently the commands have to be sent two times in order to be recognized. I might need to
|
||||
## improve the lirc configuration. As stated above, this is still work in progress.
|
||||
# mute
|
||||
irsend SEND_ONCE JBLIIIP KEY_MUTE && irsend SEND_ONCE JBLIIIP KEY_MUTE
|
||||
# unmute
|
||||
irsend SEND_ONCE JBLIIIP KEY_MUTE && irsend SEND_ONCE JBLIIIP KEY_MUTE
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
When everything works as expected, all the electronic parts are fixed together using hot glue. I glued the webcam, the circuit board and the USB hub in the case so that nothing will fall out of place anymore, even if the player is moved around roughly.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<em>
|
||||
While I really like hot glue, it's got its limits: I thought I could skip soldering the buttons to their wires by just twirling the cable ends to the contacts and then fix everything down with the hot pistol - bad idea. While being hot, the glue gets in between the wire ends and the contacts and perfectly isolates them. None of the buttons worked anymore. I had to peel the glue off the contacts with a cutter knife before soldering them properly back on again...
|
||||
</em>
|
||||
</p>
|
||||
|
||||
<h3>Configure Autostart and Mount SD Card in Read-Only Mode</h3>
|
||||
<p>
|
||||
Now that everything is in place, we are ready for the final adjustments: Configure autostart for the player script and mount the SD card in read-only mode which makes the player robust against sudden loss of power. For that, we redirect the write access to a RAM disk.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
# Autostart for piplayer2.py with log output redirection (<a href="http://raspberrypi.stackexchange.com/questions/8169/run-startup-application-as-a-specific-user">http://raspberrypi.stackexchange.com/questions/8169/run-startup-application-as-a-specific-user</a>)
|
||||
sudo nano /etc/rc.local
|
||||
# ...
|
||||
# su pi -c 'python3 /home/pi/piplayer2.py >> /home/pi/piplayer2.log 2>&1 &'
|
||||
# exit 0
|
||||
|
||||
sudo reboot
|
||||
|
||||
# Check if running after restart
|
||||
ps -ef | grep python
|
||||
|
||||
# Watch the log output while testing with QR code cards
|
||||
tail -f /home/pi/piplayer2.log
|
||||
|
||||
# Switch to RAM disk and set the filesystem read-only (<a href="https://www.heise.de/ct/ausgabe/2016-21-Den-Raspi-als-Bluetooth-Empfaenger-einsetzen-3330683.html">https://www.heise.de/ct/ausgabe/2016-21-Den-Raspi-als-Bluetooth-Empfaenger-einsetzen-3330683.html</a>)
|
||||
sudo nano /etc/fstab
|
||||
# proc /proc proc defaults 0 0
|
||||
# /dev/mmcblk0p1 /boot vfat defaults,ro 0 2
|
||||
# /dev/mmcblk0p2 / ext4 defaults,noatime,ro 0 1
|
||||
# tmpfs /var/log tmpfs nodev,nosuid 0 0
|
||||
# tmpfs /var/tmp tmpfs nodev,nosuid,mode=1777 0 0
|
||||
# tmpfs /tmp tmpfs nodev,nosuid,mode=1777 0 0
|
||||
# tmpfs /home/pi/.config tmpfs nodev,nosuid,mode=1777,uid=pi 0 0
|
||||
# tmpfs /home/pi/.moc tmpfs nodev,nosuid,mode=1777,uid=pi 0 0
|
||||
# # a swapfile is not a swap partition, no line here
|
||||
# # use dphys-swapfile swap[on|off] for that
|
||||
|
||||
sudo rm -rf /var/lib/dhcp/ /var/spool /var/lock /etc/resolv.conf
|
||||
sudo ln -s /tmp /var/lib/dhcp
|
||||
sudo ln -s /tmp /var/spool
|
||||
sudo ln -s /tmp /var/lock
|
||||
sudo ln -s /tmp/resolv.conf /etc/resolv.conf
|
||||
|
||||
# Make /tmp on RAM disk writable
|
||||
# Shown here with the former additions to rc.local - please note that the log redirect for the player script changed
|
||||
sudo nano /etc/rc.local
|
||||
# ...
|
||||
#
|
||||
# # make /tmp on RAM disk writable
|
||||
# chmod 777 /tmp
|
||||
#
|
||||
# # disable HDMI
|
||||
# /usr/bin/tvservice -o
|
||||
#
|
||||
# # start piplayer
|
||||
# su pi -c 'python3 /home/pi/piplayer2.py >> /tmp/piplayer2.log 2>&1 &'
|
||||
#
|
||||
# exit 0
|
||||
|
||||
sudo reboot
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Test if it is read-only now:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
# This should produce an ERROR
|
||||
touch ~/wontwork
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
We can make the filesystem writeable again until next reboot for maintenance by remounting it like this:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
sudo mount -o rw,remount /
|
||||
sudo mount -o rw,remount /boot
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>Connect to SMB network share</h3>
|
||||
<p>
|
||||
Until now, we can only play local files from the SD card (and audiostreams from the Internet). The final step is to connect the local share that stores all of our MP3 files. How this is done depends upon the type of share you would like to use. The most common type should be a Windows/SMB share in the local network that can be connected like this:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
# Make SD writable
|
||||
sudo mount -o rw,remount /
|
||||
sudo mount -o rw,remount /boot
|
||||
|
||||
# Create mount point
|
||||
mkdir /home/pi/share
|
||||
|
||||
# Connect smb share on /home/pi/share
|
||||
sudo nano /etc/rc.local
|
||||
# sudo mount -t cifs -o user=guest,password= //192.168.1.110/media /home/pi/share
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Of course, one might as well mount a cloud drive via WebDAV or something similar and play everything directly from the Internet. How this is done will depend on the supported protocols.
|
||||
</p>
|
||||
|
||||
<h2 id="qr-cards">QR Cards</h2>
|
||||
<p>
|
||||
With the storage attached, all the MP3 files are accessible for the player. What's missing is some QR code cards to get the party started. For that, there's a <a href="https://github.com/tliero/audiosphere/raw/master/documentation/QR%20Card%20Template.odt">template</a> which can be used to create new cards. After printing a page from the template, it is simply cut into stripes which are folded in the middle and then glued together.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For generating the QR codes pretty much every software can be used. If you are using lots of non-ASCII letters, you should make sure that they are encoded properly. (You can always check the codes that have been read by the player in the logfile with <code>tail -f /tmp/piplayer2.log</code>.) Personally, I use QtQR which is a frontend for <code>qrencode</code>.
|
||||
</p>
|
||||
|
||||
<p class="gallery">
|
||||
<a href="images/audiosphere-template-structure.png" class="fancybox"><img src="images/audiosphere-template-structure.png" width="480" alt="The different areas of the QR code template." /></a>
|
||||
</p>
|
||||
|
||||
<h2>What's Left</h2>
|
||||
|
||||
<p>
|
||||
In the future I would like to have a web server running on the RasPi, which allows to control the player remotely. I'm not yet sure if this is going to be a web interface or an Android app that operates on a REST interface. I pretty often find myself skipping through the entire code card stack in the dark in order to switch to a different bedtime story that has been requested.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Also, I would like to have the last say in volume control. This is where the infrared LED that has been installed in the speaker case will come in handy.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If you have any questions or improvements please send me an e-mail to <a href="mailto:tliero@gmx.net">tliero@gmx.net</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,46 @@
|
||||
# Please make this file available to others
|
||||
# by sending it to <lirc@bartelmus.de>
|
||||
#
|
||||
# this config file was automatically generated
|
||||
# using lirc-0.9.0-pre1(default) on Sun Dec 11 19:02:32 2016
|
||||
#
|
||||
# contributed by
|
||||
#
|
||||
# brand: JBL
|
||||
# model no. of remote control: JBL 10-Button Remote
|
||||
# devices being controlled by this remote: JBL IIIP
|
||||
#
|
||||
|
||||
begin remote
|
||||
|
||||
name JBLIIIP
|
||||
bits 16
|
||||
flags SPACE_ENC|CONST_LENGTH
|
||||
eps 30
|
||||
aeps 100
|
||||
|
||||
header 9059 4509
|
||||
one 565 1694
|
||||
zero 565 564
|
||||
ptrail 567
|
||||
repeat 9062 2252
|
||||
pre_data_bits 16
|
||||
pre_data 0x2F5
|
||||
gap 108487
|
||||
toggle_bit_mask 0x0
|
||||
|
||||
begin codes
|
||||
KEY_VOLUMEDOWN 0x807F
|
||||
KEY_VOLUMEUP 0xC03F
|
||||
KEY_MUTE 0x9867
|
||||
KEY_PLAYPAUSE 0x40BF
|
||||
KEY_PREVIOUS 0x48B7
|
||||
KEY_NEXT 0xA05F
|
||||
KEY_SCROLLUP 0x7887
|
||||
KEY_SCROLLDOWN 0xF00F
|
||||
KEY_MENU 0x58A7
|
||||
KEY_ENTER 0x609F
|
||||
end codes
|
||||
|
||||
end remote
|
||||
|
||||
@@ -11,10 +11,14 @@
|
||||
<div class="content">
|
||||
<h1>Projekte</h1>
|
||||
|
||||
<h2><a name="musikrakete" href="musikrakete/">Die Musikrakete</a></h2>
|
||||
<h2><a name="wifi-doorbell" href="wifi-doorbell/">A web-enabled WiFi doorbell</a></h2>
|
||||
<p>
|
||||
Nachdem der CD-Player im Kinderzimmer langsam aber sicher den Geist aufgab musste ein Ersatz her, der besser
|
||||
für den harten Alltag mit Dreijährigen geeignet ist.
|
||||
When we moved into our house, the bell button led to a cut cable in the basement. I built a WiFi doorbell in order to be able to reuse the existing installation.
|
||||
</p>
|
||||
|
||||
<h2><a name="qudio" href="qudio/">PiPlayer 3.0: Qudio</a></h2>
|
||||
<p>
|
||||
An audio player for small children, based on the Raspberry Pi Zero W and a JBL IIIP speaker. (This is the updated version of the <a href="musikrakete/">"Musikrakete"</a> player I built in early 2016.)
|
||||
</p>
|
||||
|
||||
<h2><a name="javauni" href="http://www.java-uni.de/">Java-Uni</a></h2>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -87,6 +87,11 @@ h2, h3 {
|
||||
|
||||
<div id="content" class="container">
|
||||
<p class="timestamp">2016-04-02</p>
|
||||
|
||||
<p class="well">
|
||||
<em><b>Update: </b>Inzwischen gibt es eine aktualisierte Version: <a href="http://tilman.de/projekte/qudio/">Qudio</a>. Die neue Version hat einen robusteren Erkennungsmechanismus für die QR-Karten und eine verbesserte Steuerung. Dank des Rapberry Pi Zero reicht inzwischen auch das Apple Dock des Lautsprechers, um die ganze Konstruktion mit Strom zu versorgen.</em>
|
||||
</p>
|
||||
|
||||
<h1>Die Musikrakete</h1>
|
||||
<p id="subtitle">Ein kindgerechter mp3-Player auf Basis von Raspberry Pi und JBL OnStage IIIp</p>
|
||||
|
||||
@@ -755,4 +760,4 @@ for f in * ; do qrencode -s 6 -m 0 -l L -o "$f".png "$f"; done
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pottenstein 2002 - Beethoven Gymnasium Berlin</title>
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
|
||||
<meta name="description" content="Pottenstein 2002 - Beethoven Gymnasium Berlin">
|
||||
<meta name="author" content="Tilman Walther, Martin Stadler">
|
||||
<meta name="keywords" content="Pottenstein, Beethoven, Gymnasium, Berlin, Lankwitz">
|
||||
|
||||
<meta name="DC.Title" content="Pottenstein 2002 - Beethoven Gymnasium Berlin">
|
||||
<meta name="DC.Creator" content="Tilman Walther, Martin Stadler">
|
||||
<meta name="DC.Description" content="Pottenstein 2002 - Beethoven Gymnasium Berlin">
|
||||
<meta name="DC.Publisher" content="Tilman Walther, Martin Stadler">
|
||||
<meta name="DC.Type" content="Text">
|
||||
<meta name="DC.Format" content="text/html">
|
||||
<meta name="DC.Language" content="de">
|
||||
<meta name="DC.Rights" content="Alle Rechte liegen bei den Verfassern">
|
||||
|
||||
<link rel="stylesheet" media="screen" href="website.css">
|
||||
<link rel="stylesheet" media="print, embossed, braille, handheld" href="print.css">
|
||||
|
||||
<style type="text/css">
|
||||
<!--
|
||||
... datei-spezifische Formate ...
|
||||
#l_box { padding:2px; }
|
||||
-->
|
||||
</style>
|
||||
|
||||
<meta name="date" content="2002-05-15">
|
||||
<meta name="DC.Date" content="2002-05-15">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Anfang Menüstruktur _______________ -->
|
||||
<div style="text-align:center">
|
||||
[<a href="index.html">START</a>] -
|
||||
[<a href="cd.html">MULTIMEDIA-CD</a>] -
|
||||
[<a href="audiocd.html">KONZERT-CD</a>] -
|
||||
[<a href="download.html">DOWNLOAD</a>] -
|
||||
KONTAKT
|
||||
</div>
|
||||
<!-- Ende Menüstruktur _______________ -->
|
||||
|
||||
|
||||
<?php
|
||||
// Mail versenden
|
||||
if(isset($_POST["send"]) && is_array($_POST["send"])) {
|
||||
$author = substr($_POST["send"]["author"],0,50);
|
||||
|
||||
// $author darf keine Sonderzeichen enthalten (BCC-Gefahr)
|
||||
$author = preg_replace('/[^A-z ,-9]/', '', $author);
|
||||
|
||||
$mailaddress = substr($_POST["send"]["mailaddress"],0,50);
|
||||
|
||||
// Der reg. Ausdruck findet alle zulässigen E-Mail-Adressen. Zur Absicherung wird nur die erste gefundene als Absender verwendet
|
||||
preg_match('/[\w.+-]{2,}\@[\w.-]{2,}\.[a-z]{2,6}/', $mailaddress, $mailaddresses);
|
||||
|
||||
$mailcontent = substr($_POST["send"]["mailcontent"],0,5000);
|
||||
|
||||
if (@mail("feedback@tilman.de", "Feedback zu Pottenstein", $mailcontent, "From: \"$author\" <$mailaddresses[0]>")) {
|
||||
@mail("feedback@tilman.de", "Sendebestätigung: Feedback zu Pottenstein", "Gerade wurde eine Mail von ".$author." <$mailaddresses[0]> versendet.", "From: \"Tilman Walther\" <tilman@tilman.de>");
|
||||
?>
|
||||
|
||||
<div>
|
||||
<p style="text-align: center;">
|
||||
Die Nachricht wurde erfolgreich versendet, vielen Dank.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
}
|
||||
else {
|
||||
// Fehler beim Mailversand
|
||||
?>
|
||||
|
||||
<div>
|
||||
<p style="text-align: center;">
|
||||
Ein Fehler ist aufgetreten, die Nachricht konnte nicht versendet werden.<br/>
|
||||
Bitte versuchen Sie es später noch einmal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
else {
|
||||
?>
|
||||
|
||||
<!-- Anfang Textbereich _______________ -->
|
||||
<center>
|
||||
<br>
|
||||
<table border=0 cellpadding=8>
|
||||
<tr><td>Schreibt uns - Kommentare, Fragen zu Inhalt und Technik, etc.</td></tr>
|
||||
<tr><td>
|
||||
<table style="height:90%; width:100%;" cellpadding=3>
|
||||
<tr>
|
||||
<td colspan="4" valign="top">
|
||||
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
|
||||
Absender<br>
|
||||
<input name="send[author]"/>
|
||||
<br><br>eMail-Adresse<br>
|
||||
<input name="send[mailaddress]"/>
|
||||
<br><br>Nachricht<br>
|
||||
<textarea name="send[mailcontent]" rows="17" cols="50"></textarea>
|
||||
<br><br>
|
||||
<input type="submit" value="Absenden">
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td><td valign="top">
|
||||
<img src="plan.jpg" border=0 alt="Pottenstein 2002">
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<!-- Ende Textbereich _______________ -->
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
body { background-color:#FFFFFF; }
|
||||
|
||||
h1 { font-size:180%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h2 { font-size:130%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h3 { font-size:120%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h4 { font-size:100%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
#normal { font-size:90%; font-family:Tahoma,Helvetica,sans-serif; color:#000000; font-weight:bold; text-align:justify; }
|
||||
#menu { font-size:80%; font-family:Tahoma,Helvetica,sans-serif; color:#0000AA; font-weight:bold; text-decoration:none; }
|
||||
|
||||
#box { padding:0.4cm; text-align:justify; }
|
||||
body { background-color:#FFFFFF; }
|
||||
|
||||
h1 { font-size:180%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h2 { font-size:130%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h3 { font-size:120%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
h4 { font-size:100%; font-family:Tahoma,Helvetica,sans-serif; color:black; }
|
||||
#normal { font-size:90%; font-family:Tahoma,Helvetica,sans-serif; color:#000000; font-weight:bold; text-align:justify; }
|
||||
#menu { font-size:80%; font-family:Tahoma,Helvetica,sans-serif; color:#0000AA; font-weight:bold; text-decoration:none; }
|
||||
|
||||
#box { padding:0.4cm; text-align:justify; }
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Qudio - A QR-enabled Audio Player for Children</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css' />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
|
||||
<style type="text/css" media="all">
|
||||
<!--
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
color: black;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
color: #303030;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#subtitle {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 800;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
color: #303030;
|
||||
font-size: 120%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
text-align: right;
|
||||
color: #888;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.fancybox-title {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fancybox-caption {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
-->
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
|
||||
|
||||
<div id="content" class="container">
|
||||
<h1>Qudio Player</h1>
|
||||
|
||||
<h2>Inbetriebnahme</h2>
|
||||
<p>
|
||||
Sobald das Netzteil eingesteckt wird, fährt der Player hoch. Damit man auch etwas hören kann, muss außerdem der Power-Button auf der Rückseite versenkt sein, so dass die grüne LED auf der Vorderseite leuchtet.
|
||||
Der Lautsprecher geht automatisch in Stand-By, wenn eine Weile lang kein Signal kam (dann erlischt das grüne Licht). Man kann das Gerät im Normalfall also einfach anlassen.
|
||||
</p>
|
||||
|
||||
<a data-fancybox style="float:right;margin: 2em;" href="images/qudio-assistant.png"><img src="images/qudio-assistant.png" width="240" /></a>
|
||||
|
||||
<p>
|
||||
Nach zwei bis drei Minuten ist das Gerät gestartet. Wenn kein bekanntes WLAN-Netzwerk gefunden wird, öffnet der Player einen Hotspot namens <em>volumio</em>, mit dem man sich z.B. mit dem Smartphone verbinden kann.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sobald man sich mit dem Hotspot verbunden hat, öffnet sich die Bedienoberfläche. Am einfachsten ist es, über das Zahnrad auf der rechten Seite die Einstellungen zu öffnen und im Untermenü <em>SYSTEM</em> den Einrichtungsassistenten erneut auszuführen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Der Assistent fragt den Gerätenamen und die WLAN-Einstellungen. Als Ausgabegerät muss <em>Generic I2S DAC</em> ausgewählt bleiben. Netzlaufwerke können natürlich erst verbunden werden, wenn der Player sie über das WLAN erreichen kann.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Wenn der Player ins lokale WLAN eingebunden ist, kann man ihn über <em>hostname.local</em> erreichen, voreingestellt ist <a href="http://qudio.local">http://qudio.local</a>. Jetzt kann man in den Einstellungen unter <em>MEINE MUSIK</em> Netzlaufwerke hinzufügen oder unter <em>PLUGINS</em> Erweiterungen für Dienste wie Spotify oder Youtube installieren.
|
||||
</p>
|
||||
|
||||
<h2>Musik abspielen</h2>
|
||||
|
||||
<p>
|
||||
Zum Abspielen wird einfach eine Karte mit dem QR-Code nach unten auf das Fenster an der Oberseite des Players gelegt. Sobald der Infrarot-Sensor abgedeckt ist, wird die Beleuchtung im Innern angeschaltet und der Erkennungsprozess gestartet. Wenn ein QR-Code erkannt wird, erlischt das Licht und die Musik wird abgespielt. Ansonsten gibt das Gerät nach vier Sekunden ein enttäuschtes Quaken von sich.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Hier führt Jacob das mal vor:
|
||||
</p>
|
||||
|
||||
<div style="text-align:center">
|
||||
<iframe src="https://player.vimeo.com/video/318207633" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Natürlich kann man auch über die Weboberfläche Musik aus der Bibliothek zum Abspielen auswählen.
|
||||
</p>
|
||||
|
||||
<h2>Musik hinzufügen</h2>
|
||||
|
||||
<p>
|
||||
Am einfachsten kann man Musik der Bibliothek hinzufügen, indem man ein Netzlaufwerk in den Einstellungen verbindet. Das Verzeichnis wird automatisch nach Inhalten durchsucht, die man dann zum Abspielen auswählen kann.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Webstreams kann man in der Musikbibliothek unter <em>Internetradio</em> aus dem Verzeichnis heraussuchen oder direkt per URL unter <em>Meine Radiosender</em> hinzufügen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eine weitere Möglichkeit sind Streaming-Dienste wie Spotify oder Youtube, auf die über Plugins zugegriffen werden kann. Zum Abspielen von Spotify wird ein Premium-Account benötigt, die Zugangsdaten konfiguriert man in den Plugin-Einstellungen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Zu guter Letzt können Inhalte auch direkt auf der Speicherkarte abgelegt werden. Wenn man den Player nicht gerade auseinander bauen will, muss man sich dafür über SSH verbinden.
|
||||
Der Zugang via SSH kann auf der Seite <a href="http://qudio.local/dev">http://qudio.local/dev</a> aktiviert werden, Benutzername und Passwort sind <em>volumio</em>.
|
||||
Alles, was im Verzeichnis <code>/data/INTERNAL</code> abgelegt wird, taucht in der Musikbibliothek auf, nachdem man in den Einstellungen unter <em>MEINE MUSIK</em> einen Rescan durchgeführt hat.
|
||||
</p>
|
||||
|
||||
<h2>Neue Karten</h2>
|
||||
|
||||
<p>
|
||||
Der Code auf den Karten kann auf eine URI, eine Datei oder ein Verzeichnis verweisen.
|
||||
</p>
|
||||
|
||||
<h3>URIs</h3>
|
||||
|
||||
<p>
|
||||
Stream-Adressen von Webradios können dem Player direkt per QR-Code übergeben werden, z.B. <code>http://stream.laut.fm/kinderradio</code>. Außerdem werden Spotify-URIs erkannt und abgespielt, sofern das Plugin installiert und konfiguriert ist. Die Spotify-URI kann man für jedes Album/Track/Playlist über das <em>Share</em>-Menü abrufen.
|
||||
</p>
|
||||
|
||||
<h3>Verzeichnisse und einzelne Dateien</h3>
|
||||
|
||||
<p>
|
||||
Der Pfad zum Verzeichnis muss wie in der Musikbibliothek angegeben werden, also z.B. <code>INTERNAL/qudio/sounds/armstrong.mp3</code> oder <code>NAS/share/Kinder/Der Grüffelo</code>. Wenn man nicht sicher ist, kann man die Musik über die Weboberfläche aus der Bibliothek starten und dann unter <a href="http://qudio.local/dev">/dev</a> nachschauen, welche URI in der aktellen Abspielliste steht.
|
||||
</p>
|
||||
|
||||
<a data-fancybox style="float:right;margin: 2em;" href="images/curb.png"><img src="images/curb.png" width="320" /></a>
|
||||
|
||||
<p>
|
||||
Das Umwandeln in einen QR-Code kann man mit jedem beliebigen Generator machen; online z.B. mit <a href="http://goqr.me/de/">http://goqr.me/de/</a>. (Der Player akzeptiert Codes in UTF-8-Codierung, so dass Umlaute und Sonderzeichen im Pfad keine Probleme machen, solange sie korrekt kodiert sind.)
|
||||
</p>
|
||||
|
||||
<h3>Maße</h3>
|
||||
|
||||
<p>
|
||||
Die Auflagefläche für die Karten ist 34 cm breit. In der Regel ist es eine gute Idee, Karten mit 33 cm Breite zu drucken, damit sie etwas Spielraum haben. Außerdem passen dann exakt 9 Karten nebeneinander auf ein DIN-A4-Blatt. Der QR-Code ist 10 mm breit und hat einen Abstand von 16 mm zur Oberkante der Karte.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Für die Karten gibt es eine <a href="misc/QR-Card_Template.odt">Vorlage für Open/Libre Office</a>. Um größere Mengen an Karten mit möglichst wenig Aufwand zu erzeugen, habe ich einen Generator geschrieben, der eine Liste von Verzeichnissen nach Covern durchsucht und die Karten mit den Codes automatisch erzeugt. Ich versuche, den Generator demnächst mal online zu stellen.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user