├── FancyBox.php ├── FancyBoxAsset.php ├── LICENSE ├── README.md ├── _config.yml └── composer.json /FancyBox.php: -------------------------------------------------------------------------------- 1 | 22 | * @since 1.0 23 | */ 24 | class FancyBox extends Widget 25 | { 26 | 27 | /** 28 | * @var type string target of the widget 29 | */ 30 | public $target = '[data-fancybox]'; 31 | 32 | /** 33 | * 34 | * @var type array of config settings for fancybox 35 | */ 36 | public $config = []; 37 | 38 | /** 39 | * @inheritdoc 40 | */ 41 | public function init() 42 | { 43 | if (is_null($this->target)) { 44 | throw new InvalidConfigException('"FancyBox.target has not been defined.'); 45 | } 46 | // publish the required assets 47 | $this->registerClientScript(); 48 | } 49 | 50 | /** 51 | * @inheritdoc 52 | */ 53 | public function run() 54 | { 55 | $view = $this->getView(); 56 | $config = Json::encode($this->config); 57 | $view->registerJs("jQuery('{$this->target}').fancybox({$config});"); 58 | } 59 | 60 | /** 61 | * Registers required script for the plugin to work as DatePicker 62 | */ 63 | public function registerClientScript() 64 | { 65 | $view = $this->getView(); 66 | FancyBoxAsset::register($view); 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /FancyBoxAsset.php: -------------------------------------------------------------------------------- 1 | js[] = 'dist/jquery.fancybox' . (!YII_DEBUG ? '.min' : '') . '.js'; 27 | $this->css[] = 'dist/jquery.fancybox' . (!YII_DEBUG ? '.min' : '') . '.css'; 28 | parent::registerAssetFiles($view); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 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-3 2 | ============= 3 | 4 | jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. http://fancyapps.com/fancybox/3/ 5 | 6 | Installation 7 | ------------ 8 | 9 | - The minimum required PHP version is PHP 5.6 ([Concatenation](http://php.net/manual/en/language.oop5.properties.php)). 10 | - It works best with PHP 7. 11 | 12 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). 13 | 14 | Either run 15 | 16 | ``` 17 | php composer.phar require --prefer-dist newerton/yii2-fancybox-3 "*" 18 | ``` 19 | 20 | or add 21 | 22 | ``` 23 | "newerton/yii2-fancybox-3": "*" 24 | ``` 25 | 26 | to the require section of your `composer.json` file. 27 | 28 | 29 | Usage 30 | ----- 31 | 32 | Once the extension is installed, simply use it in your code by : 33 | 34 | ```php 35 | '[data-fancybox]', 45 | 'config' => [ 46 | // Enable infinite gallery navigation 47 | 'loop' => true, 48 | 49 | // Space around image, ignored if zoomed-in or viewport smaller than 800px 50 | 'margin' => [44,0], 51 | 52 | // Horizontal space between slides 53 | 'gutter' => 30, 54 | 55 | // Enable keyboard navigation 56 | 'keyboard' => true, 57 | 58 | // Should display navigation arrows at the screen edges 59 | 'arrows' => true, 60 | 61 | // Should display infobar (counter and arrows at the top) 62 | 'infobar' => true, 63 | 64 | // Should display toolbar (buttons at the top) 65 | 'toolbar' => true, 66 | 67 | // What buttons should appear in the top right corner. 68 | // Buttons will be created using templates from `btnTpl` option 69 | // and they will be placed into toolbar (class="fancybox-toolbar"` element) 70 | 'buttons' => [ 71 | 'slideShow', 72 | 'fullScreen', 73 | 'thumbs', 74 | 'close' 75 | ], 76 | 77 | // Detect "idle" time in seconds 78 | 'idleTime' => 4, 79 | 80 | // Should display buttons at top right corner of the content 81 | // If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax' 82 | // Use template from `btnTpl.smallBtn` for customization 83 | 'smallBtn' => 'auto', 84 | 85 | // Disable right-click and use simple image protection for images 86 | 'protect' => false, 87 | 88 | // Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc 89 | 'modal' => false, 90 | 91 | 'image' => [ 92 | // Wait for images to load before displaying 93 | // Requires predefined image dimensions 94 | // If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found 95 | 'preload' => "auto", 96 | ], 97 | 98 | 'ajax' => [ 99 | // Object containing settings for ajax request 100 | 'settings' => [ 101 | // This helps to indicate that request comes from the modal 102 | // Feel free to change naming 103 | 'data' => [ 104 | 'fancybox' => true 105 | ] 106 | ] 107 | ], 108 | 109 | 'iframe' => [ 110 | 111 | // Iframe template 112 | 'tpl' => '', 113 | 114 | // Preload iframe before displaying it 115 | // This allows to calculate iframe content width and height 116 | // (note: Due to "Same Origin Policy", you can't get cross domain data). 'preload' => true, 117 | 118 | // Custom CSS styling for iframe wrapping element 119 | 'css' => [], 120 | 121 | // Iframe tag attributes 122 | 'attr' => [ 123 | 'scrolling' => 'auto' 124 | ] 125 | 126 | ], 127 | 128 | // Open/close animation type 129 | // Possible values: 130 | // false - disable 131 | // "zoom" - zoom images from/to thumbnail 132 | // "fade" 133 | // "zoom-in-out" 134 | // 135 | 'animationEffect' => "zoom", 136 | 137 | // Duration in ms for open/close animation 138 | 'animationDuration' => 366, 139 | 140 | // Should image change opacity while zooming 141 | // If opacity is 'auto', then opacity will be changed if image and thumbnail have different aspect ratios 142 | 'zoomOpacity' => 'auto', 143 | 144 | // Transition effect between slides 145 | // 146 | // Possible values: 147 | // false - disable 148 | // "fade' 149 | // "slide' 150 | // "circular' 151 | // "tube' 152 | // "zoom-in-out' 153 | // "rotate' 154 | // 155 | 'transitionEffect' => "fade", 156 | 157 | // Duration in ms for transition animation 158 | 'transitionDuration' => 366, 159 | 160 | // Custom CSS class for slide element 161 | 'slideClass' => '', 162 | 163 | // Custom CSS class for layout 164 | 'baseClass' => '', 165 | 166 | // Base template for layout 167 | 'baseTpl' => '', 186 | 187 | // Loading indicator template 188 | 'spinnerTpl' => '
', 189 | 190 | // Error message template 191 | 'errorTpl' => '

The requested content cannot be loaded.
Please try again later.

', 192 | 193 | 'btnTpl' => [ 194 | 'slideShow' => '', 195 | 'fullScreen' => '', 196 | 'thumbs' => '', 197 | 'close' => '', 198 | 199 | // This small close button will be appended to your html/inline/ajax content by default, 200 | // if "smallBtn" option is not set to false 201 | 'smallBtn' => '' 202 | ], 203 | 204 | // Container is injected into this element 205 | 'parentEl' => 'body', 206 | 207 | // Focus handling 208 | // ============== 209 | 210 | // Try to focus on the first focusable element after opening 211 | 'autoFocus' => true, 212 | 213 | // Put focus back to active element after closing 214 | 'backFocus' => true, 215 | 216 | // Do not let user to focus on element outside modal content 217 | 'trapFocus' => true, 218 | 219 | 220 | // Module specific options 221 | // ======================= 222 | 223 | 'fullScreen' => [ 224 | 'autoStart' => false, 225 | ], 226 | 227 | 'touch' => [ 228 | 'vertical' => true, // Allow to drag content vertically 229 | 'momentum' => true // Continue movement after releasing mouse/touch when panning 230 | ], 231 | 232 | // Hash value when initializing manually, 233 | // set `false` to disable hash change 234 | 'hash' => null, 235 | 236 | // Customize or add new media types 237 | // Example: 238 | // 239 | // media' => { 240 | // youtube' => { 241 | // params' => { 242 | // autoplay' => 0 243 | // } 244 | // } 245 | // } 246 | 247 | 'media' => [], 248 | 249 | 'slideShow' => [ 250 | 'autoStart' => false, 251 | 'speed' => 4000 252 | ], 253 | 254 | 'thumbs' => [ 255 | 'autoStart' => false, // Display thumbnails on opening 256 | 'hideOnClose' => true // Hide thumbnail grid when closing animation starts 257 | ], 258 | 259 | // Callbacks 260 | //========== 261 | 262 | // See Documentation/API/Events for more information 263 | // Example: 264 | // 265 | // afterShow: function( instance, current ) { 266 | // console.info( 'Clicked element:' ); 267 | // console.info( current.opts.$orig ); 268 | // } 269 | 270 | 'onInit' => new \yii\web\JsExpression('function(){ console.log("onInit"); }'), 271 | 272 | 'beforeLoad' => new \yii\web\JsExpression('function(){ console.log("beforeLoad"); }'), 273 | 'afterLoad' => new \yii\web\JsExpression('function(){ console.log("afterLoad"); }'), 274 | 275 | 'beforeShow' => new \yii\web\JsExpression('function(){ console.log("beforeShow"); }'), 276 | 'afterShow' => new \yii\web\JsExpression('function(){ console.log("afterShow"); }'), 277 | 278 | 'beforeClose' => new \yii\web\JsExpression('function(){ console.log("beforeClose"); }'), 279 | 'afterClose' => new \yii\web\JsExpression('function(){ console.log("afterClose"); }'), 280 | 281 | 'onActivate' => new \yii\web\JsExpression('function(){ console.log("onActivate"); }'), 282 | 'onDeactivate' => new \yii\web\JsExpression('function(){ console.log("onDeactivate"); }'), 283 | 284 | // Interaction 285 | // =========== 286 | 287 | // Use options below to customize taken action when user clicks or double clicks on the fancyBox area, 288 | // each option can be string or method that returns value. 289 | // 290 | // Possible values: 291 | // "close" - close instance 292 | // "next" - move to next gallery item 293 | // "nextOrClose" - move to next gallery item or close if gallery has only one item 294 | // "toggleControls" - show/hide controls 295 | // "zoom" - zoom image (if loaded) 296 | // false - do nothing 297 | 298 | // Clicked on the content 299 | 'clickContent' => new \yii\web\JsExpression('function( current, event ) { 300 | return current.type === "image" ? "zoom" : false; 301 | }'), 302 | 303 | // Clicked on the slide 304 | 'clickSlide' => 'close', 305 | 306 | // Clicked on the background (backdrop) element 307 | 'clickOutside' => 'close', 308 | 309 | // Same as previous two, but for double click 310 | 'dblclickContent' => false, 311 | 'dblclickSlide' => false, 312 | 'dblclickOutside' => false, 313 | 314 | 315 | // Custom options when mobile device is detected 316 | // ============================================= 317 | 318 | 'mobile' => [ 319 | 'clickContent' => new \yii\web\JsExpression('function( current, event ) { 320 | return current.type === "image" ? "toggleControls" : false; 321 | }'), 322 | 'clickSlide' => new \yii\web\JsExpression('function( current, event ) { 323 | return current.type === "image" ? "toggleControls" : "close"; 324 | }'), 325 | 'dblclickContent' => new \yii\web\JsExpression('function( current, event ) { 326 | return current.type === "image" ? "zoom" : "close"; 327 | }'), 328 | 'dblclickSlide' => new \yii\web\JsExpression('function( current, event ) { 329 | return current.type === "image" ? "zoom" : "close"; 330 | }'), 331 | ], 332 | 333 | // Internationalization 334 | // ============ 335 | 336 | 'lang' => 'en', 337 | 'i18n' => [ 338 | 'en' => [ 339 | 'CLOSE' => 'Close', 340 | 'NEXT' => 'Next', 341 | 'PREV' => 'Previous', 342 | 'ERROR' => 'The requested content cannot be loaded.
Please try again later.', 343 | 'PLAY_START' => 'Start slideshow', 344 | 'PLAY_STOP' => 'Pause slideshow', 345 | 'FULL_SCREEN' => 'Full screen', 346 | 'THUMBS' => 'Thumbnails' 347 | ], 348 | 'de' => [ 349 | 'CLOSE' => 'Schliessen', 350 | 'NEXT' => 'Weiter', 351 | 'PREV' => 'Zurück', 352 | 'ERROR' => 'Die angeforderten Daten konnten nicht geladen werden.
Bitte versuchen Sie es später nochmal.', 353 | 'PLAY_START' => 'Diaschau starten', 354 | 'PLAY_STOP' => 'Diaschau beenden', 355 | 'FULL_SCREEN' => 'Vollbild', 356 | 'THUMBS' => 'Vorschaubilder' 357 | ] 358 | ] 359 | ] 360 | ]); 361 | 362 | echo yii\helpers\Html::a(yii\helpers\Html::img('/folder/thumb.jpg'), '/folder/imagem.jpg', ['data-fancybox' => true]); 363 | ?> 364 | ``` -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newerton/yii2-fancybox-3", 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 | "fancybox3" 11 | ], 12 | "license": "BSD-3-Clause", 13 | "authors": [ 14 | { 15 | "name": "Newerton Vargas de Araujo", 16 | "email": "newerton.araujo@gmail.com" 17 | } 18 | ], 19 | "require": { 20 | "php": ">=5.5.9", 21 | "yiisoft/yii2": "*", 22 | "bower-asset/fancybox": "~3.3.5" 23 | }, 24 | "autoload": { 25 | "psr-4": { 26 | "newerton\\fancybox3\\": "" 27 | } 28 | } 29 | } 30 | --------------------------------------------------------------------------------