You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
572 lines
27 KiB
572 lines
27 KiB
<?php
|
|
|
|
// (c) Copyright by authors of the Tiki Wiki CMS Groupware Project
|
|
//
|
|
// All Rights Reserved. See copyright.txt for details and a complete list of authors.
|
|
// Licensed under the GNU LESSER GENERAL PUBLIC LICENSE. See license.txt for details.
|
|
// $Id$
|
|
function wikiplugin_swiper_info()
|
|
{
|
|
return [
|
|
'name' => tr('Swiper'),
|
|
'documentation' => 'PluginSwiper',
|
|
'description' => tr('Embed swiper in content, support file galleries, files id and custom content'),
|
|
'prefs' => ['wikiplugin_swiper'],
|
|
'body' => tr('Enter custom slides data separated by "|". Wiki Syntax / HTML supported in slide text, to include wiki page in slide text use pluginInclude.<code>title:Slide 1 title;text:HTML/Wiki Syntax Supported Slide 1 text;image:Slide Image URL;bgcolor:#colorcode;color: #color code for text | title:Slide 2 title;text:Slide 2 text;image:Slide Image URL;bgcolor:#colorcode</code> '),
|
|
'iconname' => 'tv',
|
|
'introduced' => 19,
|
|
'tags' => 'basic',
|
|
'params' => [
|
|
'fgalId' => [
|
|
'required' => false,
|
|
'name' => tr('File Gallery ID'),
|
|
'description' => tr('Enter file gallery id for slider'),
|
|
'since' => '19',
|
|
'separator' => ':',
|
|
'profile_reference' => 'file_gallery',
|
|
],
|
|
'fileIds' => [
|
|
'required' => false,
|
|
'name' => tr('File IDs'),
|
|
'description' => tr('List of IDs of images from the File Galleries separated by commas.'),
|
|
'filter' => 'striptags',
|
|
'default' => '',
|
|
],
|
|
'effect' => [
|
|
'required' => false,
|
|
'name' => tr('Transition Effect'),
|
|
'description' => tr('Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"'),
|
|
'filter' => 'word',
|
|
'default' => 'slide',
|
|
'since' => '19.0',
|
|
'options' => [
|
|
['text' => 'Slide', 'value' => 'slide'],
|
|
['text' => 'Fade', 'value' => 'fade'],
|
|
['text' => 'Cube', 'value' => 'cube'],
|
|
['text' => 'Coverflow', 'value' => 'coverflow'],
|
|
['text' => 'Flip', 'value' => 'flip'],
|
|
],
|
|
],
|
|
'sliderPosition' => [
|
|
'required' => false,
|
|
'name' => tr('Slider Placement on Page'),
|
|
'description' => tr('Placement of slider, above topbar, below topbar, above menus and content or inside content'),
|
|
'filter' => 'word',
|
|
'default' => '',
|
|
'since' => '19.0',
|
|
'options' => [
|
|
['text' => tr(''), 'value' => ''],
|
|
['text' => tr('Inside Content'), 'value' => ''],
|
|
['text' => tr('Above top bar / Top of page'), 'value' => 'abovetopbar'],
|
|
['text' => tr('Above Content/Under top bar'), 'value' => 'undertopbar']
|
|
],
|
|
],
|
|
'pagination' => [
|
|
'required' => false,
|
|
'name' => tr('Pagination'),
|
|
'description' => tr('Slider pagination, default bullets'),
|
|
'filter' => 'word',
|
|
'default' => 'bullets',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => '', 'value' => ''],
|
|
['text' => 'Off', 'value' => 'n'],
|
|
['text' => tr('Bullets'), 'value' => 'bullets'],
|
|
['text' => tr('Fraction'), 'value' => 'fraction'],
|
|
['text' => tr('Progress bar'), 'value' => 'progressbar'],
|
|
],
|
|
],
|
|
'navigation' => [
|
|
'required' => false,
|
|
'name' => tr('Navigation'),
|
|
'description' => tr('Display navigation arrows'),
|
|
'filter' => 'alpha',
|
|
'default' => 'y',
|
|
'since' => '19.0',
|
|
'options' => [
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
['text' => 'No ', 'value' => 'n'],
|
|
],
|
|
],
|
|
'background' => [
|
|
'required' => false,
|
|
'name' => tr('Slider Background Color'),
|
|
'description' => tr('Slider background color, enter color code for example #000'),
|
|
'since' => '19.0'
|
|
],
|
|
'parallaxBgImg' => [
|
|
'required' => false,
|
|
'name' => tr('Slider Parallax Background Image'),
|
|
'description' => tr('Enter image url for parallax background behind swiper'),
|
|
'filter' => 'text',
|
|
'default' => '',
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'width' => [
|
|
'required' => false,
|
|
'name' => tr('Width'),
|
|
'description' => tr('Enter width of slider in px, default 100%'),
|
|
'filter' => 'word',
|
|
'default' => '100%',
|
|
'since' => '19.0'
|
|
],
|
|
'height' => [
|
|
'required' => false,
|
|
'name' => tr('Height'),
|
|
'description' => tr('Enter height of slider in px, default min height 100px, max height will adjust with content'),
|
|
'filter' => 'word',
|
|
'default' => '100px',
|
|
'since' => '19.0'
|
|
],
|
|
'titleColor' => [
|
|
'required' => false,
|
|
'name' => tr('Slide title color'),
|
|
'description' => tr('Enter text color code of slide title, for example #ccc'),
|
|
'filter' => 'text',
|
|
'default' => '',
|
|
'since' => '19.0'
|
|
],
|
|
'titleSize' => [
|
|
'required' => false,
|
|
'name' => tr('Title font size'),
|
|
'description' => tr('For example 42px, default 32 px'),
|
|
'filter' => 'word',
|
|
'default' => '32px',
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'descriptionColor' => [
|
|
'required' => false,
|
|
'name' => tr('Slide description color'),
|
|
'description' => tr('Enter text color code of slide description, for example #ccc'),
|
|
'filter' => 'text',
|
|
'default' => '',
|
|
'since' => '19.0'
|
|
],
|
|
'descriptionSize' => [
|
|
'required' => false,
|
|
'name' => tr('Description font size'),
|
|
'description' => tr('For example 24px, default 16 px'),
|
|
'filter' => 'word',
|
|
'default' => '16px',
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slideContentBg' => [
|
|
'required' => false,
|
|
'name' => tr('Slide content background'),
|
|
'description' => tr('Enter a valid CSS color code, or an rgba value if opacity is desired; for example: #000 or rgba(00, 00, 00, 0.5).'),
|
|
'filter' => 'text',
|
|
'default' => '',
|
|
'since' => '19.0'
|
|
],
|
|
'slideContentPostion' => [
|
|
'required' => false,
|
|
'name' => tr('Slide content position'),
|
|
'description' => tr('Enter position for example top:20%;left:20% or bottom:20%;right:10%'),
|
|
'filter' => 'text',
|
|
'default' => 'top:20%;left:20%',
|
|
'since' => '19.0'
|
|
],
|
|
'autoPlay' => [
|
|
'required' => false,
|
|
'name' => tr('Auto Play'),
|
|
'description' => tr('Autoplay slider, on by default'),
|
|
'filter' => 'alpha',
|
|
'default' => 'y',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
['text' => 'No ', 'value' => 'n'],
|
|
],
|
|
],
|
|
'autoPlayDelay' => [
|
|
'required' => false,
|
|
'name' => tr('Auto Play Delay'),
|
|
'description' => tr('Time interval to pause before moving to next slide in seconds.'),
|
|
'filter' => 'digits',
|
|
'default' => '5',
|
|
'since' => '19.0'
|
|
],
|
|
'displayThumbnails' => [
|
|
'required' => false,
|
|
'name' => tr('Display Thumbnails'),
|
|
'description' => tr('Show thumbnails under main slider'),
|
|
'filter' => 'alpha',
|
|
'default' => 'n',
|
|
'since' => '19.0',
|
|
'options' => [
|
|
['text' => 'No', 'value' => 'n'],
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
],
|
|
],
|
|
'speed' => [
|
|
'required' => false,
|
|
'name' => tr('Speed'),
|
|
'description' => tr('Duration of transition between slides (in seconds)'),
|
|
'filter' => 'digits',
|
|
'default' => 300,
|
|
'advance' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'autoHeight' => [
|
|
'required' => false,
|
|
'name' => tr('Auto Height'),
|
|
'description' => tr('Set to true and slider wrapper will adopt its height to the height of the currently active slide'),
|
|
'filter' => 'alpha',
|
|
'default' => 'n',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'No', 'value' => 'n'],
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
],
|
|
],
|
|
//Slides grid
|
|
'spaceBetween' => [
|
|
'required' => false,
|
|
'name' => tr('Space Between'),
|
|
'description' => tr('Distance between slides in px.'),
|
|
'filter' => 'digits',
|
|
'default' => 0,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesPerView' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Per View'),
|
|
'description' => tr('Slides visible at the same time on slider\'s container. Coverflow transition works best with 3 slides per view'),
|
|
'filter' => 'digits',
|
|
'default' => 1,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesPerViewMobile' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Per View Mobile Screen'),
|
|
'description' => tr('Slides visible at the same time on small screens'),
|
|
'filter' => 'digits',
|
|
'default' => 0,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesPerViewTab' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Per View Tablet'),
|
|
'description' => tr('Slides visible at the same time on low resolution tablets'),
|
|
'filter' => 'digits',
|
|
'default' => 0,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesPerColumn' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Per Column'),
|
|
'description' => tr('Number of slides per column, for multirow layout'),
|
|
'filter' => 'digits',
|
|
'default' => 1,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesPerColumnFill' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Per Column Fill'),
|
|
'description' => tr('Could be \'column\' or \'row\'. Defines how slides should fill rows, by column or by row'),
|
|
'filter' => 'word',
|
|
'default' => 'column',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'Column', 'value' => 'column'],
|
|
['text' => 'Row', 'value' => 'row'],
|
|
],
|
|
],
|
|
'centeredSlides' => [
|
|
'required' => false,
|
|
'name' => tr('Centered Slides'),
|
|
'description' => tr('If true, then active slide will be centered, not always on the left side.'),
|
|
'filter' => 'alpha',
|
|
'default' => 'y',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'No', 'value' => 'n'],
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
],
|
|
],
|
|
'slidesOffsetBefore' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Offset Before'),
|
|
'description' => tr('Add (in px) additional slide offset in the beginning of the container (before all slides)'),
|
|
'filter' => 'digits',
|
|
'default' => 0,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slidesOffsetAfter' => [
|
|
'required' => false,
|
|
'name' => tr('Slides Offset After'),
|
|
'description' => tr('Add (in px) additional slide offset in the end of the container (after all slides)'),
|
|
'filter' => 'digits',
|
|
'default' => 0,
|
|
'advanced' => true,
|
|
'since' => '19.0'
|
|
],
|
|
'slideToClickedSlide' => [
|
|
'required' => false,
|
|
'name' => tr('Slide To Clicked Slide'),
|
|
'description' => tr('Set to true and click on any slide will produce transition to this slide.'),
|
|
'filter' => 'word',
|
|
'default' => 'n',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'No', 'value' => 'n'],
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
],
|
|
],
|
|
//freemode
|
|
'freeMode' => [
|
|
'required' => false,
|
|
'name' => tr('Free Mode'),
|
|
'description' => tr('If true then slides will not have fixed positions.'),
|
|
'filter' => 'word',
|
|
'default' => 'n',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'No', 'value' => 'n'],
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
],
|
|
],
|
|
//Images
|
|
'preloadImages' => [
|
|
'required' => false,
|
|
'name' => tr('Preload Images'),
|
|
'description' => tr('When enabled Swiper will force to load all images.'),
|
|
'filter' => 'word',
|
|
'default' => 'y',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
['text' => 'No', 'value' => 'n'],
|
|
],
|
|
],
|
|
'updateOnImagesReady' => [
|
|
'required' => false,
|
|
'name' => tr('Update On Images Ready'),
|
|
'description' => tr('When enabled Swiper will be reinitialized after all inner images (<img> tags) are loaded. Required preloadimages: true.'),
|
|
'filter' => 'word',
|
|
'default' => 'y',
|
|
'since' => '19.0',
|
|
'advanced' => true,
|
|
'options' => [
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
['text' => 'No', 'value' => 'n'],
|
|
],
|
|
],
|
|
//Loop
|
|
'loop' => [
|
|
'required' => false,
|
|
'name' => tr('Loop Slider'),
|
|
'description' => tr('Set to true to enable continuous loop mode (If you use it along with slidesperView: \'auto\' then you need to specify loopedslides parameter with amount of slides to loop (duplicate)).'),
|
|
'filter' => 'word',
|
|
'default' => 'n',
|
|
'since' => '19.0',
|
|
'options' => [
|
|
['text' => 'Yes', 'value' => 'y'],
|
|
['text' => 'No', 'value' => 'n'],
|
|
],
|
|
],
|
|
]
|
|
];
|
|
}
|
|
|
|
function wikiplugin_swiper($data, $params)
|
|
{
|
|
//checking for swiper existance
|
|
if (! file_exists("vendor_bundled/vendor/nolimits4web/swiper/dist/js/swiper.min.js")) {
|
|
Feedback::error(tr(' Please update composer to install required files'));
|
|
return;
|
|
}
|
|
if ((! empty($params['fileIds']) && ! $params['fileIds']) && ! $params['fgalId'] && ! $data) {
|
|
Feedback::error(tr('Paramaters missing: Please either select file gallery, give file ids or custom slide code in body.'));
|
|
return;
|
|
}
|
|
static $uid = 0;
|
|
$uid++;
|
|
$defaults = [];
|
|
$plugininfo = wikiplugin_swiper_info();
|
|
foreach ($plugininfo['params'] as $key => $param) {
|
|
$defaults["$key"] = (! empty($param['default']) ? $param['default'] : '');
|
|
//separating digits filter parameters
|
|
if (! empty($param['filter']) && $param['filter'] == "digits") {
|
|
$swiperDigitsParams[] = $key;
|
|
}
|
|
}
|
|
$params = array_merge($defaults, $params);
|
|
if ($params['autoPlay'] != 'n') {
|
|
$autoplayDelay = $params['autoPlayDelay'] * 1000;
|
|
$autoPlay = 'autoplay: {
|
|
delay: ' . $autoplayDelay . ',
|
|
},';
|
|
} else {
|
|
$autoPlay = '';
|
|
}
|
|
if ($params['pagination'] != 'n') {
|
|
$pagination = 'pagination: {
|
|
el: \'.swiper-pagination\',
|
|
clickable: true,
|
|
type:"' . $params['pagination'] . '"
|
|
},';
|
|
$paginationDiv = "<div class=\"swiper-pagination\"></div>";
|
|
} else {
|
|
$pagination = "";
|
|
$paginationDiv = "";
|
|
}
|
|
if ($params['effect'] == "fade") {
|
|
$fadeEffectCSS = "#swiper-container" . $uid . " .swiper-slide:not(.swiper-slide-active){opacity: 0 !important;}";
|
|
} else {
|
|
$fadeEffectCSS = '';
|
|
}
|
|
if ($params['navigation'] != 'n') {
|
|
$navigation = 'navigation: {
|
|
nextEl: \'#swiper' . $uid . '-button-next\',
|
|
prevEl: \'#swiper' . $uid . '-button-prev\',
|
|
},';
|
|
$navigationDiv = '<div id="swiper' . $uid . '-button-prev" class="swiper-button-prev"></div><div class="swiper-button-next" id="swiper' . $uid . '-button-next"></div>';
|
|
} else {
|
|
$navigation = "";
|
|
$navigationDiv = '';
|
|
}
|
|
$headerlib = TikiLib::lib('header');
|
|
$headerlib->add_jsfile('vendor_bundled/vendor/nolimits4web/swiper/dist/js/swiper.min.js');
|
|
$headerlib->add_cssfile('vendor_bundled/vendor/nolimits4web/swiper/dist/css/swiper.css');
|
|
|
|
$slides = explode("|", ($data ? $data : ""));
|
|
$slidesHtml = '';
|
|
//checking if gallery is choosen
|
|
$filegallib = TikiLib::lib('filegal');
|
|
if ($params['fgalId']) {
|
|
$files = $filegallib->get_files(0, -1, '', '', $params['fgalId']);
|
|
}
|
|
if ($params['fileIds']) {
|
|
$params['fileIds'] = explode(',', $params['fileIds']);
|
|
foreach ($params['fileIds'] as $fileId) {
|
|
$file = $filegallib->get_file($fileId);
|
|
|
|
if (! is_null($file)) {
|
|
$files['data'][] = $file;
|
|
}
|
|
}
|
|
}
|
|
if (! empty($files['data'])) {
|
|
foreach ($files['data'] as $file) {
|
|
$slidesHtml .= '<div class="swiper-slide"><img src="tiki-download_file.php?fileId=' . $file['fileId'] . '&display';
|
|
if (! empty($params['displaySize'])) {
|
|
if ($params['displaySize'] > 10) {
|
|
$slidesHtml .= '&max=' . $params['displaySize'];
|
|
} elseif ($params['displaySize'] <= 1) {
|
|
$slidesHtml .= '&scale=' . $params['displaySize'];
|
|
}
|
|
}
|
|
$slidesHtml .= '" alt="' . htmlentities($file['description']) . '" /></div>';
|
|
}
|
|
}
|
|
foreach ($slides as $slide) {
|
|
if (trim($slide)) {
|
|
//processing slides
|
|
$slideArr = explode(";", $slide);
|
|
if (count($slideArr) > 0) {
|
|
foreach ($slideArr as $slideValue) {
|
|
$slideData = explode(":", $slideValue, 2);
|
|
$slideArr[trim($slideData[0])] = trim($slideData[1]);
|
|
}
|
|
} else {
|
|
$slideArr['text'] = $slideArr[0]; //single attribute slide
|
|
}
|
|
(empty($slideArr['text']) || $slideArr['text'] == '') ? $slideArr['text'] = '' : $slideArr['text'] = '<div>' . TikiLib::lib('parser')->parse_data($slideArr['text'], ['is_html' => true, 'parse_wiki' => true]) . '</div>';
|
|
if (empty($slideArr['color'])) {
|
|
$slideArr['color'] = '';
|
|
}
|
|
if (empty($slideArr['bgcolor'])) {
|
|
$slideArr['bgcolor'] = '';
|
|
}
|
|
if (empty($slideArr['title'])) {
|
|
$slideArr['title'] = '';
|
|
}
|
|
$slidesHtml .= '<div data-swiper-parallax="-300" class="swiper-slide" style="color:' . $slideArr['color'] . ';background-color:' . $slideArr['bgcolor'] . ';background-image:url(' . $slideArr['image'] . ')"><div class="slide-content' . $uid . '"><h1>' . $slideArr['title'] . '</h1>' . $slideArr['text'] . '</div></div>';
|
|
}
|
|
}
|
|
$swiperSettings = '';
|
|
$swiperParams = array('effect','autoHeight','speed','spaceBetween','slidesPerView','slidesPerColumn','slidesPerColumnFill','centeredSlides','slidesOffsetBefore','slidesOffsetAfter','loop','preloadImages','slideToClickedSlide','freeMode','updateOnImagesReady');
|
|
foreach ($swiperParams as $swiperParam) {
|
|
$swiperSettings .= $swiperParam . ":";
|
|
if (! in_array($swiperParam, $swiperDigitsParams)) {
|
|
$swiperSettings .= "'" . $params[$swiperParam] . "',";
|
|
} else {
|
|
$params[$swiperParam] == '' ? $swiperSettings .= "0," : $swiperSettings .= $params[$swiperParam] . ",";
|
|
}
|
|
}
|
|
$breakpoints = '';
|
|
if ($params['slidesPerViewMobile'] > 0 || $params['slidesPerViewTab'] > 0) {
|
|
$slidesPerView = $params['slidesPerView'] == '' ? 1 : $params['slidesPerView'];
|
|
$slidesPerViewTab = $params['slidesPerViewTab'] == '' ? $slidesPerView : $params['slidesPerViewTab']; //if not defined use default slides per view
|
|
$slidesPerViewMobile = $params['slidesPerViewMobile'] == '' ? $slidesPerViewTab : $params['slidesPerViewMobile']; //if not defined use tablets slides per view
|
|
$breakpoints = 'breakpointsInverse: true, breakpoints: { 320: { slidesPerView: ' . $slidesPerViewMobile . '},768: {slidesPerView: ' . $slidesPerViewTab . '},1024: {slidesPerView: ' . $slidesPerView . '}},';
|
|
}
|
|
$swiperSettings = str_replace(array("'y'","'n'"), array("'true'","'false'"), $swiperSettings);
|
|
$headerlib->add_css('#swiper-container' . $uid . ' {width: ' . $params['width'] . ';background:' . $params['background'] . ';margin-bottom:20px;} #swiper-container' . $uid . ' .swiper-slide {font-size:' . $params['descriptionSize'] . ';color:' . $params['descriptionColor'] . ';min-height:' . $params['height'] . ';text-align: center;width:100%;overflow:hidden;} .gallery-top {height: 80%;width: 100%;}.gallery-thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;}.gallery-thumbs img {max-height:120px;height:120px;width:auto; margin-bottom:2%;cursor:pointer}.gallery-thumbs .swiper-slide {width: 25%; height: 100%;opacity: 0.4;}.gallery-thumbs .swiper-slide-active {opacity: 1;} #swiper-container' . $uid . ' .swiper-slide h1{font-size:' . $params['titleSize'] . ';color:' . $params['titleColor'] . '} .slide-content' . $uid . '{min-width:60%;position:absolute;' . $params['slideContentPostion'] . ';background:' . $params['slideContentBg'] . ';padding:1%;text-align:left} .parallax-bg { position: absolute;left: 0;top: 0;width: 130%;height: 100%;-webkit-background-size: cover;background-size: cover;background-position: center;} .swiper-slide img{max-width:100%}' . $fadeEffectCSS);
|
|
$thumbnails = '';
|
|
$thumbclass = '';
|
|
$swiperOpts = '';
|
|
$thumbAfter = '';
|
|
$thumbsSettings = '';
|
|
if ($params['displayThumbnails'] == "y") {
|
|
$thumbnails = ' <div id="gallery-thumbs' . $uid . '" class="swiper-container gallery-thumbs"><div class="swiper-wrapper">' . $slidesHtml . '</div></div>' ;
|
|
$thumbclass = 'gallery-top';
|
|
$swiperOpts = 'var galleryThumbs' . $uid . ' = new Swiper("#gallery-thumbs' . $uid . '", {spaceBetween: 10,
|
|
slidesPerView: 3,
|
|
loopedSlides:1,
|
|
loop:true,
|
|
watchSlidesVisibility: true,
|
|
watchSlidesProgress: true,
|
|
slideToClickedSlide: true
|
|
});';
|
|
$thumbsSettings = ''; //' thumbs: {swiper: galleryThumbs'.$uid.'},';
|
|
$thumbAfter = 'swiper' . $uid . '.controller.control = galleryThumbs' . $uid . ';galleryThumbs' . $uid . '.controller.control =swiper' . $uid . ';';
|
|
}
|
|
$swiperOpts .= 'var swiper' . $uid . ' = new Swiper("#swiper-container' . $uid . '",{
|
|
' . $swiperSettings . '
|
|
init:false,
|
|
' . $thumbsSettings . '
|
|
' . $pagination . '
|
|
keyboard: {
|
|
enabled: true,
|
|
onlyInViewport: false,
|
|
},
|
|
' . $breakpoints . '
|
|
' . $autoPlay . '
|
|
' . $navigation . '
|
|
|
|
});' . $thumbAfter;
|
|
if ($params['sliderPosition'] == 'abovetopbar') {
|
|
$headerlib->add_css("#swiper-container" . $uid . "{visibility:hidden;}");
|
|
$swiperOpts .= 'var container=$(".container").first();$("#swiper-container' . $uid . '").insertBefore( container );$("#gallery-thumbs' . $uid . '").insertAfter( "#swiper-container' . $uid . '" );';
|
|
} elseif ($params['sliderPosition'] == 'undertopbar') {
|
|
$headerlib->add_css("#swiper-container" . $uid . "{visibility:hidden;}");
|
|
$headerlib->add_js('$( document ).ready(function() { $("#swiper-container' . $uid . '").insertAfter( "#page-header" ); $("#gallery-thumbs' . $uid . '").insertAfter( "#swiper-container' . $uid . '" );})');
|
|
}
|
|
//delaying initialization till window is fully loaded
|
|
$swiperOpts .= 'setTimeout( function(){
|
|
$(window).trigger("resize")
|
|
}, 100); $(window).resize(function(){swiper' . $uid . '.init(); $("#swiper-container' . $uid . '").css("visibility","visible"); });';
|
|
$headerlib->add_js(
|
|
'$( document ).ready(function() {' . $swiperOpts . ';$("#swiper-container' . $uid . '").css("max-width",$("#swiper-container' . $uid . '").parent().width());})'
|
|
);
|
|
$swiperCode = '<div id="swiper-container' . $uid . '" class="swiper-container ' . $thumbclass . '"> <div class="parallax-bg" style="background-image:url(' . $params['parallaxBgImg'] . ')" data-swiper-parallax="-23%"></div> <div class="swiper-wrapper">' . $slidesHtml . '</div><!-- Add Pagination -->' . $paginationDiv . $navigationDiv . '</div>' . $thumbnails;
|
|
return $swiperCode;
|
|
}
|