| Server IP : 46.105.57.169 / Your IP : 216.73.216.144 Web Server : Apache System : Linux webd003.cluster120.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 User : maitricfuz ( 93378) PHP Version : 8.4.10 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/maitricfuz/www/new-saint-martin/plugins/pagebuilderck/carousel/layouts/ |
Upload File : |
<?php
/**
* @name Page Builder CK
* @package com_pagebuilderck
* @copyright Copyright (C) 2015. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
*/
defined('_JEXEC') or die;
$input = \Joomla\CMS\Factory::getApplication()->input;
?>
<div id="elementscontainer">
<div class="menulink" tab="tab_items"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_EDITION'); ?></div>
<div class="tab menustyles ckproperty" id="tab_items">
<div class="tab_fullscreen" style="background:#fff;">
<div id="items_edition_list" class="expandable">
</div>
<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo \Joomla\CMS\Language\Text::_('CK_ADD_NEW_ITEM'); ?></div>
<div class="ckclr"></div>
</div>
</div>
<div class="menulink" tab="tab_carouseloptions"><?php echo \Joomla\CMS\Language\Text::_('CK_OPTIONS'); ?></div>
<div class="tab menustyles ckproperty" id="tab_carouseloptions">
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>application_tile_horizontal.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_NUMBER_COLS'); ?>
</span>
<input id="nbcols" class="inputbox ckattrib" name="nbcols" value="" type="hidden">
<span class="ckoption-field ckbutton-group">
<input id="nbcols_1" class="" name="nbcols" value="1" type="radio">
<label class="ckbutton" for="nbcols_1">
<?php echo \Joomla\CMS\Language\Text::_('1'); ?>
</label>
<input id="nbcols_2" class="" name="nbcols" value="2" type="radio">
<label class="ckbutton" for="nbcols_2">
<?php echo \Joomla\CMS\Language\Text::_('2'); ?>
</label>
<input id="nbcols_3" class="" name="nbcols" value="3" type="radio">
<label class="ckbutton" for="nbcols_3">
<?php echo \Joomla\CMS\Language\Text::_('3'); ?>
</label>
<input id="nbcols_4" class="" name="nbcols" value="4" type="radio">
<label class="ckbutton" for="nbcols_4">
<?php echo \Joomla\CMS\Language\Text::_('4'); ?>
</label>
</span>
<div class="clr"></div>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_padding_left.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_GUTTER_VALUE'); ?>
</span>
<span class="ckoption-field">
<input id="gutter" name="gutter" class="inputbox ckattrib" value="" type="text" placeholder="10"/>
</span>
<div class="clr"></div>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>control_play.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_AUTOPLAY'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<select class="inputboxfake ckattrib" type="list" value="" name="autoplay" id="autoplay" onchange="ckSetAttrib(this)">
<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
</select>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>control_pause.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_PAUSE_HOVER'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<select class="inputboxfake ckattrib" type="list" value="" name="pausehover" id="pausehover" onchange="ckSetAttrib(this)">
<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
</select>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>hourglass.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_DURATION'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input class="inputbox ckattrib" type="text" value="" name="time" id="time" onchange="ckSetAttrib(this)" placeholder="5000" />
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_HEIGHT'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input class="inputbox ckattrib" type="text" value="" name="carouselheight" id="carouselheight" placeholder="auto" />
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>switch.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_THUMBS'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<select class="inputbox" type="list" value="" name="thumbs" id="thumbs" onchange="ckSetThumbs()">
<option value="0"><?php echo \Joomla\CMS\Language\Text::_('JNO'); ?></option>
<option value="1"><?php echo \Joomla\CMS\Language\Text::_('JYES'); ?></option>
</select>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_THUMBS_HEIGHT'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input class="inputbox" type="text" value="" name="thumbsheight" id="thumbsheight" placeholder="100" />
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_THUMBS_HIDE_RESOLUTION'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input class="inputbox" type="text" value="" name="thumbsresponsive" id="thumbsresponsive" onchange="ckSetAttrib(this)" placeholder="640" />
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_CAROUSEL_CAPTION_HIDE_RESOLUTION'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input class="inputbox" type="text" value="" name="captionresponsive" id="captionresponsive" onchange="ckSetAttrib(this)" placeholder="640" />
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_LINK_POSITION'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<select class="inputbox" type="list" value="" name="linkposition" id="linkposition">
<option value="fullslide"><?php echo \Joomla\CMS\Language\Text::_('CK_FULLSLIDE'); ?></option>
<option value="title"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></option>
<option value="button"><?php echo \Joomla\CMS\Language\Text::_('CK_BUTTON'); ?></option>
</select>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link_add.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_AUTOLINK_IMAGES'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input id="autolinkimages1" class="inputbox" name="autolinkimages" value="1" type="radio">
<label class="ckbutton" for="autolinkimages1">
<?php echo \Joomla\CMS\Language\Text::_('JYES'); ?>
</label>
<input id="autolinkimages0" class="inputbox" name="autolinkimages" value="0" type="radio" checked>
<label class="ckbutton" for="autolinkimages0">
<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
</label>
</span>
</div>
<?php
if (! \Joomla\CMS\Plugin\PluginHelper::isEnabled('system', 'mediabox_ck')) { ?>
<div class="alert alert-danger"><b><?php echo \Joomla\CMS\Language\Text::_('CK_MEDIABOXCK_NOT_INSTALLED') ?></b><br /><a href="https://www.joomlack.fr/en/joomla-extensions/mediabox-ck" target="_blank"><?php echo \Joomla\CMS\Language\Text::_('CK_DOWNLOAD') ?> : Mediabox CK</a></div>
<?php }
?>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>magnifier.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_USE_LIGHTBOX'); ?>
</span>
<span class="ckoption-field">
<span class="ckoption-field ckbutton-group">
<input id="uselightbox1" class="inputbox" name="uselightbox" value="1" type="radio">
<label class="ckbutton" for="uselightbox1">
<?php echo \Joomla\CMS\Language\Text::_('JYES'); ?>
</label>
<input id="uselightbox0" class="inputbox" name="uselightbox" value="0" type="radio" checked>
<label class="ckbutton" for="uselightbox0">
<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
</label>
</span>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>switch.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_SHOW_LIGHTBOX_TITLE'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input id="showlightboxtitle1" class="inputbox" name="showlightboxtitle" value="1" type="radio">
<label class="ckbutton" for="showlightboxtitle1">
<?php echo \Joomla\CMS\Language\Text::_('JYES'); ?>
</label>
<input id="showlightboxtitle0" class="inputbox" name="showlightboxtitle" value="0" type="radio" checked>
<label class="ckbutton" for="showlightboxtitle0">
<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
</label>
</span>
</div>
<div class="ckoption">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>switch.png" width="16" height="16" />
<?php echo \Joomla\CMS\Language\Text::_('CK_SHOW_LIGHTBOX_DESC'); ?>
</span>
<span class="ckoption-field ckbutton-group">
<input id="showlightboxdesc1" class="inputbox" name="showlightboxdesc" value="1" type="radio">
<label class="ckbutton" for="showlightboxdesc1">
<?php echo \Joomla\CMS\Language\Text::_('JYES'); ?>
</label>
<input id="showlightboxdesc0" class="inputbox" name="showlightboxdesc" value="0" type="radio" checked>
<label class="ckbutton" for="showlightboxdesc0">
<?php echo \Joomla\CMS\Language\Text::_('JNO'); ?>
</label>
</span>
</div>
<div class="ckclr"></div>
</div>
<div class="menulink" tab="tab_blocstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_STYLES'); ?></div>
<div class="tab menustyles ckproperty" id="tab_blocstyles">
<?php echo $this->menustyles->createBlocStyles('bloc', 'carousel', '') ?>
</div>
<div class="menulink" tab="tab_arrowsstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_ARROWS'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_arrowsstyles" data-prefix="arrows" data-rule=".pbck_carousel_controls > div">
<div class="ckoption">
<span class="ckoption-label">
<?php echo \Joomla\CMS\Language\Text::_('CK_BACKGROUND'); ?>
<img class="ckoption-icon" src="/media/com_pagebuilderck/images/menustyles/color.png" width="15" height="15">
</span>
<span class="ckoption-field">
<input class="inputbox colorPicker" type="text" value="" name="arrowsbackgroundcolorstart" id="arrowsbackgroundcolorstart" >
</span>
</div>
</div>
<div class="menulink" tab="tab_slidestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_SLIDE'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_slidestyles" data-prefix="slide" data-rule=".pbck_slide">
<?php echo $this->menustyles->createBlocStyles('slide', 'carousel', '') ?>
</div>
<div class="menulink" tab="tab_captionstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CAPTION'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_captionstyles" data-prefix="caption" data-rule=".pbck_slide_caption">
<?php echo $this->menustyles->createBlocStyles('caption', 'carousel', '', $showlinks = true, $joomlaversion = 'j3', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $useheight = true, $usewidth = true) ?>
</div>
<div class="menulink" tab="tab_titlestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_titlestyles" data-prefix="title" data-rule=".pbck_slide_title">
<?php echo $this->menustyles->createBlocStyles('title', 'carousel', '') ?>
</div>
<div class="menulink" tab="tab_descstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TEXT'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_descstyles" data-prefix="desc" data-rule=".pbck_slide_desc">
<?php echo $this->menustyles->createBlocStyles('desc', 'carousel', '') ?>
</div>
<div class="menulink" tab="tab_readmorestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_READMORE'); ?></div>
<div class="tab menustyles ckproperty menustylescustom" id="tab_readmorestyles" data-prefix="readmore" data-rule=".pbck_slide_link_button">
<?php echo $this->menustyles->createBlocStyles('readmore', 'carousel', '', $showlinks = false, $joomlaversion = 'j3', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $useheight = true, $usewidth = true) ?>
</div>
<div class="menulink" tab="tab_presets"><?php echo \Joomla\CMS\Language\Text::_('CK_PRESETS'); ?></div>
<div class="tab menustyles ckproperty" id="tab_presets">
<input class="inputbox" type="hidden" value="" name="preset_layout" id="preset_layout" />
<?php echo PagebuilderckHelper::loadPresets('carousel'); ?>
</div>
</div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
ckFillEditionPopup(focus.attr('id'));
var linkposition = $ck('#elementscontainer #linkposition').val();
$ck('.editfocus .pbck_carousel .pbck_slide').each(function(i, el) {
if (linkposition === 'button') {
var url_href = $ck('.pbck_slide_link_button', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link_button', el).attr('href') : '';
} else if (linkposition === 'title') {
var url_href = $ck('.pbck_slide_link_title', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link_title', el).attr('href') : '';
} else {
var url_href = $ck('.pbck_slide_link', el).attr('href') && $ck('[name="autolinkimages"]:checked').val() !== '1' ? $ck('.pbck_slide_link', el).attr('href') : '';
}
var itemInfos = {
"title" : $ck('.pbck_slide_title', el).length ? $ck('.pbck_slide_title', el).text() : '',
"alt" : $ck('.pbck_slide_img', el).attr('alt') ? $ck('.pbck_slide_img', el).attr('alt') : '',
"url_href" : url_href,
"url_target" : ($ck('.pbck_slide_item_link', el).attr('target') && $ck('.pbck_slide_item_link', el).attr('target') != $ck('#linktarget').val()) ? $ck('.pbck_slide_item_link', el).attr('target') : 'default'
};
// ckCreateEditImageItem(i, itemlist, itemcontent, itemimg, itemInfos)
var itemedition = ckCreateEditImageItem(i, $ck('#items_edition_list'), ckContentToEditor($ck('.pbck_slide_desc', el).html()), $ck('.pbck_slide_img', el), itemInfos);
ckMakeEditItemAccordion(itemedition);
});
$ck('#items_edition_list .item_content_edition').each(function() {
ckLoadEditorOnTheFly($ck(this).attr('id'));
});
$ck('#elementscontainer .ckattrib').each(function() {
ckGetAttrib(this);
});
// init the carousel
// document.getElementById('<?php echo $id; ?>_preview_pbck_carousel').pbckcarousel = jQuery('#<?php echo $id; ?>_preview_pbck_carousel').PBCK_carousel();
ckMakeEditItemsSortable();
var nbcols = $ck('#nbcols').val() ? $ck('#nbcols').val() : '3';
$ck('#elementscontainer [name="nbcols"][type="radio"]').removeAttr('checked');
$ck('#elementscontainer [id="nbcols_' + nbcols + '"][type="radio"]').prop('checked', 'checked');
$ck('#elementscontainer [name="nbcols"][type="radio"]').change(function() {
$ck('#nbcols').val($ck('[name="nbcols"][type="radio"]:checked').val()).trigger('change');
ckUpdatePreviewArea();
});
}
function ckBeforeSaveEditionPopup() {
ckUpdatePreviewArea();
$ck('#elementscontainer .ckattrib').each(function() {
ckSetAttrib(this);
});
// ckSaveEditionPopup(focus.attr('id'));
// ckCloseEditionPopup();
}
function ckSaveInlineEditionPopup() {
ckBeforeSaveEditionPopup();
}
/*
* Method automatically called in ckCloseEditionPopup() if exists (needed if you are using an editor !!)
*/
function ckBeforeCloseEditionPopup() {
$ck('.item_content_edition').each(function() {
ckRemoveEditorOnTheFly($ck(this).attr('id'));
});
}
function ckUpdatePreviewArea() {
var autolinkimages = $ck('[name="autolinkimages"]:checked').val() == '1';
var uselightbox = $ck('[name="uselightbox"]:checked').val() == '1';
var showlightboxtitle = $ck('[name="showlightboxtitle"]:checked').val() == '1';
var showlightboxdesc = $ck('[name="showlightboxdesc"]:checked').val() == '1';
var linkposition = $ck('#elementscontainer #linkposition').val();
$ck('#items_edition_list .item_edition').each(function(i, el) {
// update the edition item image source with the input value
// $ck('.item_image img', el).attr('src', PAGEBUILDERCK.URIROOT+'/'+getImgPathFromImgSrc($ck('.item_imageurl_edition', el).val()));
$ck('.item_image img', el).attr('src', getImgPathFromImgSrc($ck('.item_imageurl_edition', el).val(), true));
// update the slider image title and image alt tag
var title = $ck('.item_title_edition',el).val();
$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_title').text(title);
// update the image desc
ckSaveEditorOnTheFly($ck('.item_content_edition', el).attr('id'));
var content = $ck('.item_content_edition', el).val();
content = ckEditorToContent(content);
$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_desc').html(content);
// update the carousel image source and image alt tag
var alt = $ck('.item_alt_edition',el).val() ? $ck('.item_alt_edition',el).val() : $ck('.item_title_edition',el).val();
var imgsrc = $ck('.item_image img', el).attr('src');
$ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_img').attr('src', imgsrc).attr('data-src', imgsrc).attr('alt', alt);
var ahref = $ck('.item_url_href_edition',el).val() || autolinkimages;
if (ahref) {
$ck('.editfocus .pbck_slide').eq(i).find('a[class*="pbck_slide_link"]').remove();
// var linkhref = $ck('.item_image img', el).attr('src');
if (autolinkimages) {
var linkhref = $ck('.item_image img', el).attr('src');
} else {
var linkhref = $ck('.item_url_href_edition',el).val() ? $ck('.item_url_href_edition',el).val() : '';
}
if (linkposition === 'button') {
$ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_caption').append('<a class="pbck_slide_link_button" href="' + linkhref + '">' + 'Read more' + '</a>');
} else if (linkposition === 'title') {
$ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_title').empty().append('<a class="pbck_slide_link_title" href="' + linkhref + '">' + title + '</a>');
} else {
$ck('.editfocus .pbck_slide').eq(i).prepend('<a class="pbck_slide_link" href="' + linkhref + '"></a>');
}
if (uselightbox) {
var lightboxtitle = '';
if (showlightboxtitle) {
lightboxtitle += $ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_title').text();
}
if (showlightboxdesc) {
lightboxtitle += '::' + $ck('.editfocus .pbck_slide').eq(i).find('.pbck_slide_desc').text();
}
$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').attr('rel', 'lightbox[' + focus.attr('id') + ']').attr('title', lightboxtitle);
} else {
$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').removeAttr('rel').removeAttr('title');
var target = $ck('.item_url_target_edition',el).val() == 'default' ? $ck('#linktarget').val() : $ck('.item_url_target_edition',el).val();
if (target != '_parent') {
$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').attr('target', target);
} else {
$ck('.editfocus .pbck_slide').eq(i).find(' > a.pbck_slide_link').removeAttr('target');
}
}
} else {
$ck('.editfocus .pbck_slide').eq(i).find('a[class*="pbck_slide_link"]').remove();
}
});
ckSetThumbs();
$ck('.editfocus').find('.pbck_slides').height($ck('#carouselheight').val());
ckSetPresetLayout();
}
function ckAddNewListItem() {
// add the element in the carousel
var index = $ck('#items_edition_list .item_edition').length;
ckAddNewCarouselItem();
ckCarouselReset();
// add the element for edition
var itemedition = ckCreateEditImageItem(index, $ck('#items_edition_list'), '', '', $ck('<img src="'+PAGEBUILDERCK.URIROOT+'/plugins/pagebuilderck/carousel/assets/images/slide1.jpg" />'));
ckMakeEditItemAccordion(itemedition);
ckLoadEditorOnTheFly('item_content_' + index);
ckMakeExpandable();
}
function selectimagefile(file, id) {
$ck('#'+id).val(file).trigger('change');
}
function ckAddNewCarouselItem() {
var lastitem = $ck('.editfocus .pbck_wrap > .pbck_wrapinner .pbck_slide').last();
var item = lastitem.clone();
$ck('.editfocus .pbck_wrap > .pbck_wrapinner').append(item);
// item.find('.pbck_slide_caption').attr('data-index', index);
item.find('.pbck_slide_title').text('');
item.find('.pbck_slide_desc').text('');
item.find('.pbck_slide_img').attr('src', PAGEBUILDERCK.URIROOT+'/plugins/pagebuilderck/carousel/assets/images/slide1.jpg');
return item;
}
function ckCarouselReset() {
var carousel = $ck('.editfocus .pbck_carousel');
carousel.find('.pbck_wrapinner')
// .width((carousel.find('.pbck_slide').length*100)+'%')
.css('marginLeft', '0');
// carousel.find('.pbck_slide').width((100/carousel.find('.pbck_slide').length)+'%');
}
function ckBeforeDeleteEditItem(item) {
var index_item = item.index('.item_edition');
ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));
$ck('.editfocus .pbck_slide').eq(index_item).remove();
ckCarouselReset();
}
function ckMakeEditItemsSortable() {
$ck( "#items_edition_list" ).sortable({
items: ".item_edition",
helper: "clone",
handle: ".item_move",
forcePlaceholderSize: true,
tolerance: "pointer",
placeholder: "placeholderck",
start: function(e, ui){
$ck(this).find('.item_content_edition').each(function(){
if (tinymce.get($ck(this).attr('id'))) {
ckRemoveEditorOnTheFly($ck(this).attr('id'));
}
});
},
stop: function( event, ui ) {
$ck(this).find('.item_content_edition:not(.ui-sortable-helper)').each(function(){
ckLoadEditorOnTheFly($ck(this).attr('id'));
});
ckUpdatePreviewArea();
},
});
ckMakeExpandable();
}
function ckSetAttrib(field) {
var carousel = $ck('.editfocus .pbck_slides');
carousel.attr('data-' + field.id, field.value);
}
function ckGetAttrib(field) {
var carousel = $ck('.editfocus .pbck_slides');
if (carousel.attr('data-' + field.id)) $ck(field).val(carousel.attr('data-' + field.id));
}
function ckSetThumbs() {
var hasThumbs = $ck('#elementscontainer #thumbs').val();
if (hasThumbs == 1) {
if ($ck('.editfocus').find('.pbck_carousel_thumbs').length) $ck('.editfocus').find('.pbck_carousel_thumbs').remove();
var carouselinner = $ck('.editfocus .pbck_carousel');
carouselinner.append('<div class="pbck_carousel_thumbs"><div class="pbck_wrap_thumbs"></div></div>');
var carouselthumbs = $ck('.editfocus').find('.pbck_carousel_thumbs');
carouselthumbs.append('<div class="pbck_carousel_thumbs_control control_next"></div>');
carouselthumbs.append('<div class="pbck_carousel_thumbs_control control_prev"></div>');
var carouselthumbswrap = carouselthumbs.find('.pbck_wrap_thumbs');
for (i=0; i< $ck('.editfocus .pbck_slide').length; i++) {
carouselthumbswrap.append('<div class="pbck_slide_thumb"><img src="' + $ck('.editfocus .pbck_wrap .pbck_slide').eq(i).find('.pbck_slide_img').attr('src') + '" /></div>');
}
// ckSetThumbsHeight();
} else {
$ck('.editfocus').find('.pbck_carousel_thumbs').remove();
}
}
// function ckSetThumbsHeight() {
// var thumbsHeight = ckTestUnit($ck('#thumbsheight').val());
// $ck('.editfocus').find('.pbck_slide_thumb').css('width', thumbsHeight).css('height', thumbsHeight);
// var nbSlides = $ck('.editfocus').find('.pbck_slide_thumb').length;
// $ck('.editfocus').find('.pbck_wrap_thumbs').css('width', 'calc(' + nbSlides + ' * ' + thumbsHeight + ' + ' + (nbSlides - 1) * 5 + 'px)').css('height', thumbsHeight);
// }
// function ckSetCarouselHeight() {
// $ck('.editfocus').find('.pbck_slides').height($ck('#carouselheight').val());
// }
function ckAfterSaveEditionPopup() {
var carousel = $ck('.editfocus .pbck_carousel');
var thumbsHeight = ckTestUnit($ck('#thumbsheight').val() ? $ck('#thumbsheight').val() : '100');
var focusid = $ck('.editfocus').attr('id');
var nbslides = $ck('.editfocus').find('.pbck_slide').length;
var styles = '#' + focusid + ' .pbck_slide_thumb { width : ' + thumbsHeight + '; height: ' + thumbsHeight + ';}';
var nbcols = $ck('#nbcols').val() ? $ck('#nbcols').val() : '3';
var gutter = $ck('#gutter').val() ? $ck('#gutter').val() : '10';
var nbgroups = parseInt((nbslides-0.1)/nbcols)+1;
var wrapinner_width = 'calc(100% * ' + nbgroups + ' + ' + (nbgroups-1) + ' * ' + parseInt(gutter) + 'px)';
var slide_width = 'calc((100% - (' + (nbcols * nbgroups - 1) + ' * ' + parseInt(gutter) + 'px)) / (' + (nbgroups * nbcols) + '))';
styles += '#' + focusid + ' .pbck_wrap_thumbs { width : calc(' + nbslides + ' * ' + thumbsHeight + ' + ' + (nbslides - 1) * 5 + 'px); height: ' + thumbsHeight + ';}';
styles += '#' + focusid + ' .pbck_wrapinner { width: ' + wrapinner_width + '; }';
styles += '#' + focusid + ' .pbck_slide { width: ' + slide_width + '; }';
styles += '#' + focusid + ' .pbck_slide:not(:first-child) { margin-left: ' + parseInt(gutter) + 'px; }';
// styles += '#' + focusid + ' .pbck_slides { height: ' + $ck('#carouselheight').val() + '; }';
$ck('.editfocus > .ckstyle style').append(styles);
setInterval(
function(){
jQuery(window).trigger('resize');
}
, 1000);
}
</script>
<style type="text/css">
.item_image {
float: left;
box-shadow: #888 0 0 10px;
margin: 0 10px 0 0;
cursor: pointer;
border: 5px solid #fff;
}
.item_image:hover {
border-color: rgba(82, 168, 236, 0.8);
}
.item_image img {
width: 150px;
height: 150px;
}
.item_edition .item_toggler {
display: inline-block;
}
</style>