├── LICENSE ├── README.md ├── composer.json └── src ├── FancyBox.php ├── FancyBoxAsset.php ├── FancyBoxHelpersAsset.php ├── MousewheelAsset.php └── assets ├── blank.gif ├── fancybox_loading.gif ├── fancybox_loading@2x.gif ├── fancybox_overlay.png ├── fancybox_sprite.png ├── fancybox_sprite@2x.png ├── helpers ├── fancybox_buttons.png ├── jquery.fancybox-buttons.css ├── jquery.fancybox-buttons.js ├── jquery.fancybox-media.js ├── jquery.fancybox-thumbs.css └── jquery.fancybox-thumbs.js ├── jquery-mousewheel ├── jquery.mousewheel.js └── jquery.mousewheel.min.js ├── jquery.fancybox.css ├── jquery.fancybox.js └── jquery.fancybox.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Newerton 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | yii2-fancybox 2 | ============= 3 | 4 | fancyBox is a tool that offers a nice and elegant way to add zooming 5 | functionality for images, html content and multi-media on your webpages. http://fancyapps.com/fancybox/ 6 | 7 | Installation 8 | ------------ 9 | 10 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). 11 | 12 | Either run 13 | 14 | ``` 15 | php composer.phar require newerton/yii2-fancybox 16 | ``` 17 | 18 | or add 19 | 20 | ``` 21 | "newerton/yii2-fancybox": "^1.0" 22 | ``` 23 | 24 | to the require section of your `composer.json` file. 25 | 26 | 27 | Usage 28 | ----- 29 | 30 | Once the extension is installed, simply use it in your code by : 31 | 32 | ```php 33 | 'a[rel=fancybox]', 36 | 'helpers' => true, 37 | 'mouse' => true, 38 | 'config' => [ 39 | 'maxWidth' => '90%', 40 | 'maxHeight' => '90%', 41 | 'playSpeed' => 7000, 42 | 'padding' => 0, 43 | 'fitToView' => false, 44 | 'width' => '70%', 45 | 'height' => '70%', 46 | 'autoSize' => false, 47 | 'closeClick' => false, 48 | 'openEffect' => 'elastic', 49 | 'closeEffect' => 'elastic', 50 | 'prevEffect' => 'elastic', 51 | 'nextEffect' => 'elastic', 52 | 'closeBtn' => false, 53 | 'openOpacity' => true, 54 | 'helpers' => [ 55 | 'title' => ['type' => 'float'], 56 | 'buttons' => [], 57 | 'thumbs' => ['width' => 68, 'height' => 50], 58 | 'overlay' => [ 59 | 'css' => [ 60 | 'background' => 'rgba(0, 0, 0, 0.8)' 61 | ] 62 | ] 63 | ], 64 | ] 65 | ]); 66 | 67 | echo Html::a(Html::img('/folder/thumb.jpg'), '/folder/imagem.jpg', ['rel' => 'fancybox']); 68 | ?> 69 | ``` 70 | 71 | Hint: Do not forget to declare the Html class at the top of the file. 72 | 73 | ``` 74 | use yii\helpers\Html; 75 | ``` 76 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newerton/yii2-fancybox", 3 | "description": "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.", 4 | "type": "yii2-extension", 5 | "keywords": [ 6 | "yii2", 7 | "extension", 8 | "fancyapps", 9 | "fancybox" 10 | ], 11 | "license": "BSD-3-Clause", 12 | "authors": [ 13 | { 14 | "name": "Newerton Vargas de Araujo", 15 | "email": "newerton.araujo@gmail.com" 16 | } 17 | ], 18 | "require": { 19 | "php": ">=5.4.0", 20 | "yiisoft/yii2": "~2.0.14" 21 | }, 22 | "autoload": { 23 | "psr-4": { 24 | "newerton\\fancybox\\": "src" 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/FancyBox.php: -------------------------------------------------------------------------------- 1 | 19 | * @since 1.0 20 | */ 21 | class FancyBox extends Widget 22 | { 23 | 24 | /** 25 | * @var type string target of the widget 26 | */ 27 | public $target; 28 | 29 | /** 30 | * @var type boolean whether to enable the easing functions. You must set the eansing on $config 31 | */ 32 | public $helpers = false; 33 | 34 | /** 35 | * @var type bollean whether to enable mouse interaction 36 | */ 37 | public $mouse = true; 38 | // @ array of config settings for fancybox 39 | /** 40 | * 41 | * @var type array of config settings for fancybox 42 | */ 43 | public $config = []; 44 | 45 | /** 46 | * @var array to use for $.fancybox.open( [group], [options] ) scenario 47 | */ 48 | public $group = []; 49 | 50 | /** 51 | * @inheritdoc 52 | */ 53 | public function init() 54 | { 55 | if (is_null($this->target)) { 56 | throw new InvalidConfigException('"FancyBox.target has not been defined.'); 57 | } 58 | // publish the required assets 59 | $this->registerAssets(); 60 | } 61 | 62 | /** 63 | * @inheritdoc 64 | */ 65 | public function run() 66 | { 67 | $view = $this->getView(); 68 | 69 | $config = Json::encode($this->config); 70 | 71 | if (!empty($this->group)) { 72 | $config = Json::encode($this->group) . ',' . $config; 73 | } 74 | $view->registerJs("jQuery('{$this->target}').fancybox({$config});"); 75 | } 76 | 77 | /** 78 | * Registers required script for the plugin to work as DatePicker 79 | */ 80 | public function registerAssets() 81 | { 82 | $view = $this->getView(); 83 | 84 | FancyBoxAsset::register($view); 85 | 86 | if ($this->mouse) { 87 | MousewheelAsset::register($view); 88 | } 89 | 90 | if ($this->helpers) { 91 | FancyBoxHelpersAsset::register($view); 92 | } 93 | } 94 | 95 | } 96 | -------------------------------------------------------------------------------- /src/FancyBoxAsset.php: -------------------------------------------------------------------------------- 1 |
' 26 | }, 27 | 28 | list : null, 29 | buttons: null, 30 | 31 | beforeLoad: function (opts, obj) { 32 | //Remove self if gallery do not have at least two items 33 | 34 | if (opts.skipSingle && obj.group.length < 2) { 35 | obj.helpers.buttons = false; 36 | obj.closeBtn = true; 37 | 38 | return; 39 | } 40 | 41 | //Increase top margin to give space for buttons 42 | obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30; 43 | }, 44 | 45 | onPlayStart: function () { 46 | if (this.buttons) { 47 | this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn'); 48 | } 49 | }, 50 | 51 | onPlayEnd: function () { 52 | if (this.buttons) { 53 | this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn'); 54 | } 55 | }, 56 | 57 | afterShow: function (opts, obj) { 58 | var buttons = this.buttons; 59 | 60 | if (!buttons) { 61 | this.list = $(opts.tpl).addClass(opts.position).appendTo('body'); 62 | 63 | buttons = { 64 | prev : this.list.find('.btnPrev').click( F.prev ), 65 | next : this.list.find('.btnNext').click( F.next ), 66 | play : this.list.find('.btnPlay').click( F.play ), 67 | toggle : this.list.find('.btnToggle').click( F.toggle ), 68 | close : this.list.find('.btnClose').click( F.close ) 69 | } 70 | } 71 | 72 | //Prev 73 | if (obj.index > 0 || obj.loop) { 74 | buttons.prev.removeClass('btnDisabled'); 75 | } else { 76 | buttons.prev.addClass('btnDisabled'); 77 | } 78 | 79 | //Next / Play 80 | if (obj.loop || obj.index < obj.group.length - 1) { 81 | buttons.next.removeClass('btnDisabled'); 82 | buttons.play.removeClass('btnDisabled'); 83 | 84 | } else { 85 | buttons.next.addClass('btnDisabled'); 86 | buttons.play.addClass('btnDisabled'); 87 | } 88 | 89 | this.buttons = buttons; 90 | 91 | this.onUpdate(opts, obj); 92 | }, 93 | 94 | onUpdate: function (opts, obj) { 95 | var toggle; 96 | 97 | if (!this.buttons) { 98 | return; 99 | } 100 | 101 | toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn'); 102 | 103 | //Size toggle button 104 | if (obj.canShrink) { 105 | toggle.addClass('btnToggleOn'); 106 | 107 | } else if (!obj.canExpand) { 108 | toggle.addClass('btnDisabled'); 109 | } 110 | }, 111 | 112 | beforeClose: function () { 113 | if (this.list) { 114 | this.list.remove(); 115 | } 116 | 117 | this.list = null; 118 | this.buttons = null; 119 | } 120 | }; 121 | 122 | }(jQuery)); 123 | -------------------------------------------------------------------------------- /src/assets/helpers/jquery.fancybox-media.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Media helper for fancyBox 3 | * version: 1.0.6 (Fri, 14 Jun 2013) 4 | * @requires fancyBox v2.0 or later 5 | * 6 | * Usage: 7 | * $(".fancybox").fancybox({ 8 | * helpers : { 9 | * media: true 10 | * } 11 | * }); 12 | * 13 | * Set custom URL parameters: 14 | * $(".fancybox").fancybox({ 15 | * helpers : { 16 | * media: { 17 | * youtube : { 18 | * params : { 19 | * autoplay : 0 20 | * } 21 | * } 22 | * } 23 | * } 24 | * }); 25 | * 26 | * Or: 27 | * $(".fancybox").fancybox({, 28 | * helpers : { 29 | * media: true 30 | * }, 31 | * youtube : { 32 | * autoplay: 0 33 | * } 34 | * }); 35 | * 36 | * Supports: 37 | * 38 | * Youtube 39 | * http://www.youtube.com/watch?v=opj24KnzrWo 40 | * http://www.youtube.com/embed/opj24KnzrWo 41 | * http://youtu.be/opj24KnzrWo 42 | * http://www.youtube-nocookie.com/embed/opj24KnzrWo 43 | * Vimeo 44 | * http://vimeo.com/40648169 45 | * http://vimeo.com/channels/staffpicks/38843628 46 | * http://vimeo.com/groups/surrealism/videos/36516384 47 | * http://player.vimeo.com/video/45074303 48 | * Metacafe 49 | * http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/ 50 | * http://www.metacafe.com/watch/7635964/ 51 | * Dailymotion 52 | * http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people 53 | * Twitvid 54 | * http://twitvid.com/QY7MD 55 | * Twitpic 56 | * http://twitpic.com/7p93st 57 | * Instagram 58 | * http://instagr.am/p/IejkuUGxQn/ 59 | * http://instagram.com/p/IejkuUGxQn/ 60 | * Google maps 61 | * http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17 62 | * http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16 63 | * 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 64 | */ 65 | ;(function ($) { 66 | "use strict"; 67 | 68 | //Shortcut for fancyBox object 69 | var F = $.fancybox, 70 | format = function( url, rez, params ) { 71 | params = params || ''; 72 | 73 | if ( $.type( params ) === "object" ) { 74 | params = $.param(params, true); 75 | } 76 | 77 | $.each(rez, function(key, value) { 78 | url = url.replace( '$' + key, value || '' ); 79 | }); 80 | 81 | if (params.length) { 82 | url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params; 83 | } 84 | 85 | return url; 86 | }; 87 | 88 | //Add helper object 89 | F.helpers.media = { 90 | defaults : { 91 | youtube : { 92 | matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i, 93 | params : { 94 | autoplay : 1, 95 | autohide : 1, 96 | fs : 1, 97 | rel : 0, 98 | hd : 1, 99 | wmode : 'opaque', 100 | enablejsapi : 1, 101 | ps: 'docs', 102 | controls: 1 103 | }, 104 | type : 'iframe', 105 | url : '//www.youtube.com/embed/$3' 106 | }, 107 | vimeo : { 108 | matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/, 109 | params : { 110 | autoplay : 1, 111 | hd : 1, 112 | show_title : 1, 113 | show_byline : 1, 114 | show_portrait : 0, 115 | fullscreen : 1 116 | }, 117 | type : 'iframe', 118 | url : '//player.vimeo.com/video/$1' 119 | }, 120 | metacafe : { 121 | matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/, 122 | params : { 123 | autoPlay : 'yes' 124 | }, 125 | type : 'swf', 126 | url : function( rez, params, obj ) { 127 | obj.swf.flashVars = 'playerVars=' + $.param( params, true ); 128 | 129 | return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf'; 130 | } 131 | }, 132 | dailymotion : { 133 | matcher : /dailymotion.com\/video\/(.*)\/?(.*)/, 134 | params : { 135 | additionalInfos : 0, 136 | autoStart : 1 137 | }, 138 | type : 'swf', 139 | url : '//www.dailymotion.com/swf/video/$1' 140 | }, 141 | twitvid : { 142 | matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i, 143 | params : { 144 | autoplay : 0 145 | }, 146 | type : 'iframe', 147 | url : '//www.twitvid.com/embed.php?guid=$1' 148 | }, 149 | twitpic : { 150 | matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i, 151 | type : 'image', 152 | url : '//twitpic.com/show/full/$1/' 153 | }, 154 | instagram : { 155 | matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i, 156 | type : 'image', 157 | url : '//$1/p/$2/media/?size=l' 158 | }, 159 | google_maps : { 160 | matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i, 161 | type : 'iframe', 162 | url : function( rez ) { 163 | return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed'); 164 | } 165 | } 166 | }, 167 | 168 | beforeLoad : function(opts, obj) { 169 | var url = obj.href || '', 170 | type = false, 171 | what, 172 | item, 173 | rez, 174 | params; 175 | 176 | for (what in opts) { 177 | if (opts.hasOwnProperty(what)) { 178 | item = opts[ what ]; 179 | rez = url.match( item.matcher ); 180 | 181 | if (rez) { 182 | type = item.type; 183 | params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null)); 184 | 185 | url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params ); 186 | 187 | break; 188 | } 189 | } 190 | } 191 | 192 | if (type) { 193 | obj.href = url; 194 | obj.type = type; 195 | 196 | obj.autoHeight = false; 197 | } 198 | } 199 | }; 200 | 201 | }(jQuery)); 202 | -------------------------------------------------------------------------------- /src/assets/helpers/jquery.fancybox-thumbs.css: -------------------------------------------------------------------------------- 1 | #fancybox-thumbs { 2 | position: fixed; 3 | left: 0; 4 | width: 100%; 5 | overflow: hidden; 6 | z-index: 8050; 7 | } 8 | 9 | #fancybox-thumbs.bottom { 10 | bottom: 2px; 11 | } 12 | 13 | #fancybox-thumbs.top { 14 | top: 2px; 15 | } 16 | 17 | #fancybox-thumbs ul { 18 | position: relative; 19 | list-style: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | #fancybox-thumbs ul li { 25 | float: left; 26 | padding: 1px; 27 | opacity: 0.5; 28 | } 29 | 30 | #fancybox-thumbs ul li.active { 31 | opacity: 0.75; 32 | padding: 0; 33 | border: 1px solid #fff; 34 | } 35 | 36 | #fancybox-thumbs ul li:hover { 37 | opacity: 1; 38 | } 39 | 40 | #fancybox-thumbs ul li a { 41 | display: block; 42 | position: relative; 43 | overflow: hidden; 44 | border: 1px solid #222; 45 | background: #111; 46 | outline: none; 47 | } 48 | 49 | #fancybox-thumbs ul li img { 50 | display: block; 51 | position: relative; 52 | border: 0; 53 | padding: 0; 54 | max-width: none; 55 | } -------------------------------------------------------------------------------- /src/assets/helpers/jquery.fancybox-thumbs.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Thumbnail helper for fancyBox 3 | * version: 1.0.7 (Mon, 01 Oct 2012) 4 | * @requires fancyBox v2.0 or later 5 | * 6 | * Usage: 7 | * $(".fancybox").fancybox({ 8 | * helpers : { 9 | * thumbs: { 10 | * width : 50, 11 | * height : 50 12 | * } 13 | * } 14 | * }); 15 | * 16 | */ 17 | ;(function ($) { 18 | //Shortcut for fancyBox object 19 | var F = $.fancybox; 20 | 21 | //Add helper object 22 | F.helpers.thumbs = { 23 | defaults : { 24 | width : 50, // thumbnail width 25 | height : 50, // thumbnail height 26 | position : 'bottom', // 'top' or 'bottom' 27 | source : function ( item ) { // function to obtain the URL of the thumbnail image 28 | var href; 29 | 30 | if (item.element) { 31 | href = $(item.element).find('img').attr('src'); 32 | } 33 | 34 | if (!href && item.type === 'image' && item.href) { 35 | href = item.href; 36 | } 37 | 38 | return href; 39 | } 40 | }, 41 | 42 | wrap : null, 43 | list : null, 44 | width : 0, 45 | 46 | init: function (opts, obj) { 47 | var that = this, 48 | list, 49 | thumbWidth = opts.width, 50 | thumbHeight = opts.height, 51 | thumbSource = opts.source; 52 | 53 | //Build list structure 54 | list = ''; 55 | 56 | for (var n = 0; n < obj.group.length; n++) { 57 | list += 'The requested content cannot be loaded.
Please try again later.
The requested content cannot be loaded.
Please try again later.