newerton / yii2-fancybox-3
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.
Installs: 67 656
Dependents: 1
Suggesters: 0
Security: 0
Stars: 14
Watchers: 4
Forks: 8
Open Issues: 0
Type:yii2-extension
Requires
- php: >=5.5.9
- bower-asset/fancybox: ~3.3.5
- yiisoft/yii2: *
This package is auto-updated.
Last update: 2024-10-26 04:46:13 UTC
README
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. http://fancyapps.com/fancybox/3/
Installation
- The minimum required PHP version is PHP 5.6 (Concatenation).
- It works best with PHP 7.
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist newerton/yii2-fancybox-3 "*"
or add
"newerton/yii2-fancybox-3": "*"
to the require section of your composer.json
file.
Usage
Once the extension is installed, simply use it in your code by :
<?php echo newerton\fancybox3\FancyBox::widget();
Options
<?php echo newerton\fancybox3\FancyBox::widget([ 'target' => '[data-fancybox]', 'config' => [ // Enable infinite gallery navigation 'loop' => true, // Space around image, ignored if zoomed-in or viewport smaller than 800px 'margin' => [44,0], // Horizontal space between slides 'gutter' => 30, // Enable keyboard navigation 'keyboard' => true, // Should display navigation arrows at the screen edges 'arrows' => true, // Should display infobar (counter and arrows at the top) 'infobar' => true, // Should display toolbar (buttons at the top) 'toolbar' => true, // What buttons should appear in the top right corner. // Buttons will be created using templates from `btnTpl` option // and they will be placed into toolbar (class="fancybox-toolbar"` element) 'buttons' => [ 'slideShow', 'fullScreen', 'thumbs', 'close' ], // Detect "idle" time in seconds 'idleTime' => 4, // Should display buttons at top right corner of the content // If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax' // Use template from `btnTpl.smallBtn` for customization 'smallBtn' => 'auto', // Disable right-click and use simple image protection for images 'protect' => false, // Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc 'modal' => false, 'image' => [ // Wait for images to load before displaying // Requires predefined image dimensions // If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found 'preload' => "auto", ], 'ajax' => [ // Object containing settings for ajax request 'settings' => [ // This helps to indicate that request comes from the modal // Feel free to change naming 'data' => [ 'fancybox' => true ] ] ], 'iframe' => [ // Iframe template 'tpl' => '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>', // Preload iframe before displaying it // This allows to calculate iframe content width and height // (note: Due to "Same Origin Policy", you can't get cross domain data). 'preload' => true, // Custom CSS styling for iframe wrapping element 'css' => [], // Iframe tag attributes 'attr' => [ 'scrolling' => 'auto' ] ], // Open/close animation type // Possible values: // false - disable // "zoom" - zoom images from/to thumbnail // "fade" // "zoom-in-out" // 'animationEffect' => "zoom", // Duration in ms for open/close animation 'animationDuration' => 366, // Should image change opacity while zooming // If opacity is 'auto', then opacity will be changed if image and thumbnail have different aspect ratios 'zoomOpacity' => 'auto', // Transition effect between slides // // Possible values: // false - disable // "fade' // "slide' // "circular' // "tube' // "zoom-in-out' // "rotate' // 'transitionEffect' => "fade", // Duration in ms for transition animation 'transitionDuration' => 366, // Custom CSS class for slide element 'slideClass' => '', // Custom CSS class for layout 'baseClass' => '', // Base template for layout 'baseTpl' => '<div class="fancybox-container" role="dialog" tabindex="-1">' . '<div class="fancybox-bg"></div>' . '<div class="fancybox-controls">' . '<div class="fancybox-infobar">' . '<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' . '<div class="fancybox-infobar__body">' . '<span class="js-fancybox-index"></span> / <span class="js-fancybox-count"></span>' . '</div>' . '<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' . '</div>' . '<div class="fancybox-buttons">' . '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' . '</div>' . '</div>' . '<div class="fancybox-slider-wrap">' . '<div class="fancybox-slider"></div>' . '</div>' . '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' . '</div>', // Loading indicator template 'spinnerTpl' => '<div class="fancybox-loading"></div>', // Error message template 'errorTpl' => '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>', 'btnTpl' => [ 'slideShow' => '<button data-fancybox-play class="fancybox-button fancybox-button--play" title="{{PLAY_START}}"></button>', 'fullScreen' => '<button data-fancybox-fullscreen class="fancybox-button fancybox-button--fullscreen" title="{{FULL_SCREEN}}"></button>', 'thumbs' => '<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}"></button>', 'close' => '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}"></button>', // This small close button will be appended to your html/inline/ajax content by default, // if "smallBtn" option is not set to false 'smallBtn' => '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>' ], // Container is injected into this element 'parentEl' => 'body', // Focus handling // ============== // Try to focus on the first focusable element after opening 'autoFocus' => true, // Put focus back to active element after closing 'backFocus' => true, // Do not let user to focus on element outside modal content 'trapFocus' => true, // Module specific options // ======================= 'fullScreen' => [ 'autoStart' => false, ], 'touch' => [ 'vertical' => true, // Allow to drag content vertically 'momentum' => true // Continue movement after releasing mouse/touch when panning ], // Hash value when initializing manually, // set `false` to disable hash change 'hash' => null, // Customize or add new media types // Example: // // media' => { // youtube' => { // params' => { // autoplay' => 0 // } // } // } 'media' => [], 'slideShow' => [ 'autoStart' => false, 'speed' => 4000 ], 'thumbs' => [ 'autoStart' => false, // Display thumbnails on opening 'hideOnClose' => true // Hide thumbnail grid when closing animation starts ], // Callbacks //========== // See Documentation/API/Events for more information // Example: // // afterShow: function( instance, current ) { // console.info( 'Clicked element:' ); // console.info( current.opts.$orig ); // } 'onInit' => new \yii\web\JsExpression('function(){ console.log("onInit"); }'), 'beforeLoad' => new \yii\web\JsExpression('function(){ console.log("beforeLoad"); }'), 'afterLoad' => new \yii\web\JsExpression('function(){ console.log("afterLoad"); }'), 'beforeShow' => new \yii\web\JsExpression('function(){ console.log("beforeShow"); }'), 'afterShow' => new \yii\web\JsExpression('function(){ console.log("afterShow"); }'), 'beforeClose' => new \yii\web\JsExpression('function(){ console.log("beforeClose"); }'), 'afterClose' => new \yii\web\JsExpression('function(){ console.log("afterClose"); }'), 'onActivate' => new \yii\web\JsExpression('function(){ console.log("onActivate"); }'), 'onDeactivate' => new \yii\web\JsExpression('function(){ console.log("onDeactivate"); }'), // Interaction // =========== // Use options below to customize taken action when user clicks or double clicks on the fancyBox area, // each option can be string or method that returns value. // // Possible values: // "close" - close instance // "next" - move to next gallery item // "nextOrClose" - move to next gallery item or close if gallery has only one item // "toggleControls" - show/hide controls // "zoom" - zoom image (if loaded) // false - do nothing // Clicked on the content 'clickContent' => new \yii\web\JsExpression('function( current, event ) { return current.type === "image" ? "zoom" : false; }'), // Clicked on the slide 'clickSlide' => 'close', // Clicked on the background (backdrop) element 'clickOutside' => 'close', // Same as previous two, but for double click 'dblclickContent' => false, 'dblclickSlide' => false, 'dblclickOutside' => false, // Custom options when mobile device is detected // ============================================= 'mobile' => [ 'clickContent' => new \yii\web\JsExpression('function( current, event ) { return current.type === "image" ? "toggleControls" : false; }'), 'clickSlide' => new \yii\web\JsExpression('function( current, event ) { return current.type === "image" ? "toggleControls" : "close"; }'), 'dblclickContent' => new \yii\web\JsExpression('function( current, event ) { return current.type === "image" ? "zoom" : "close"; }'), 'dblclickSlide' => new \yii\web\JsExpression('function( current, event ) { return current.type === "image" ? "zoom" : "close"; }'), ], // Internationalization // ============ 'lang' => 'en', 'i18n' => [ 'en' => [ 'CLOSE' => 'Close', 'NEXT' => 'Next', 'PREV' => 'Previous', 'ERROR' => 'The requested content cannot be loaded. <br/> Please try again later.', 'PLAY_START' => 'Start slideshow', 'PLAY_STOP' => 'Pause slideshow', 'FULL_SCREEN' => 'Full screen', 'THUMBS' => 'Thumbnails' ], 'de' => [ 'CLOSE' => 'Schliessen', 'NEXT' => 'Weiter', 'PREV' => 'Zurück', 'ERROR' => 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.', 'PLAY_START' => 'Diaschau starten', 'PLAY_STOP' => 'Diaschau beenden', 'FULL_SCREEN' => 'Vollbild', 'THUMBS' => 'Vorschaubilder' ] ] ] ]); echo yii\helpers\Html::a(yii\helpers\Html::img('/folder/thumb.jpg'), '/folder/imagem.jpg', ['data-fancybox' => true]); ?>