cms_plugin_slider
Note: you can't update data of this sample due insufficient permissions of logged demo user
Smarty template plugin docs available at {cms_plugin_slider}
jQuery code snippet:
var cms_plugin_slider;
$(document).ready(function() {
cms_plugin_slider = $('#skin-slide-wrapper').cms_plugin_slider( { // create cms_slider instance on slide wrapper <div> tag
slides: $('.skin-slide-step'), // slide <div> tag class name
dots: $('.skin-slide-dots-element'), // slides dot <div> tag class name
arrow_left: $(".skin-slide-arrow-left"), // slide shift left arrow <a> tag class
arrow_right: $(".skin-slide-arrow-right"), // slide shift right arrow <a> tag class
container: $(".skin-slide-container"), // slides container <div> tag class name
id: skin_lang, // slider id = language code
lang: skin_lang, // slider language code
cms_path: skin_cms_path // cms folder relative path
} );
});
HTML code snippet:
<fieldset class="cms-form-fieldset">
<legend class="cms-form-legend">{t}Add slider into page sample{/t}</legend>
<div class="skin-slide-area">
{nocache}
{strip}
{cms_plugin_slider var="slide" id=$lang_code}
<div class="skin-slide-container">
<div id="skin-slide-wrapper" class="skin-slide-wrapper"></div>
{if count($slide)==0}
<div class="skin-slide-step-empty"><p>{t}Empty{/t}</p></div>
{/if}
{for $i=1 to count($slide)}
{$url = $slide[$i-1]->url}
{if $cms->conf->ssl || $slide[$i-1]->ssl == '1'}{$http="https"}{else}{$http="http"}{/if}
{if substr($url,0,1)=="/"} {$url = $http|cat: "://"|cat: $site_url|cat: $url}{/if}
<div class="skin-slide-step skin-slide-item" id="{$slide[$i-1]->id}">
<div class="skin-slide-left">
<div class="skin-slide-text">
<h2 class="skin-slide-title">{$slide[$i-1]->title}</h2>
<div class="skin-slide-description">{$slide[$i-1]->description}</div>
</div>
<a class="skin-slide-more cms-plugin-slider-more" href="{$url}"><div class="skin-christmas-bell skin-christmas"></div>{t}More{/t} ...</a>
</div>
<div class="skin-slide-right">
<table class="skin-slide-image" width="100%" height="100%">
<tr>
<td><img src="/skin/images/dot.gif" alt="{$slide[$i-1]->title} (image)" style="background-image:url({$slide[$i-1]->image})"/></td>
</tr>
</table>
</div>
</div>
{/for}
<div class="skin-slide-bottom">
{if count($slide)>0}
<div class="skin-slide-dots">
<a class="skin-slide-arrow-left" href=""></a>
{for $i=1 to count($slide)} <a class="skin-slide-dots-element" href=""></a> {/for}
<a class="skin-slide-arrow-right" href=""></a>
</div>
{/if}
</div>
</div>
</div>
{/strip}
{/nocache}
</div>
</fieldset>
CSS code snippet:
.skin-slide-area {position: relative; display: block; background: $slide-area-background; background-size: $slide-area-background-size; border-bottom: 0px; width: 100% }
.skin-slide-container {
position: relative; display: block;
max-width: $slide-container-width;
@media only screen and (max-width : $mobile-width-media) { height: $slide-container-height-iphone }
@media only screen and (min-width : $mobile-width-media + 1) { height: $slide-container-height }
margin: 0px auto; top: $slide-container-top; left: $slide-container-left
}
.skin-slide-wrapper {
overflow: hidden; width: 100%;
@media only screen and (max-width : $mobile-width-media) { height: $slide-wrapper-height-iphone }
@media only screen and (min-width : $mobile-width-media + 1) { height: $slide-wrapper-height }
position: absolute;
left: $slide-wrapper-left; top: $slide-wrapper-top; display: block; z-index:1
}
.skin-slide-step {display: none; width: 100%; height: $slide-wrapper-height }
.skin-slide-step-empty {
position: absolute; display: none; width: $slide-wrapper-width; height: $slide-wrapper-height; border: 1px white dashed; top: $slide-wrapper-top - 1; left: $slide-wrapper-left - 1;
p {font-size: $slide-empty-font-size; font-style: $slide-empty-font-style; margin-top: $slide-empty-margin-top; margin-left: $slide-empty-margin-left; color: $slide-empty-color}
}
.skin-slide-left {
position: absolute; display: block;
width: percentage($slide-left-width / $slide-container-width);
@media only screen and (max-width : $mobile-width-media) { height: $slide-wrapper-height-iphone }
@media only screen and (min-width : $mobile-width-media + 1) { height: $slide-wrapper-height }
left: 0px; overflow: visible; color: $slide-left-color;
}
.skin-slide-text {
position: relative; display: block; padding-left: $slide-left-padding; padding-right: $slide-left-padding; color: $slide-left-color;
text-shadow: $slide-left-shadow;
ul {
list-style-type: none;
line-height: $slide-left-list-line-height;
@media only screen and (max-width : $mobile-width-media) {
padding-left: 10px;
margin: 0px;
line-height: 100%;
}
li {
&:before {
content: $slide-left-list-bullet-1; /* code Hex notation */
padding-right: 5px;
color: $slide-left-color;
}
white-space: nowrap
}
ul {
list-style-type: none;
padding-left: 10px;
li:before {
content: $slide-left-list-bullet-2; /* code Hex notation */
padding-right: 5px;
color: $slide-left-color;
}
}
}
}
.skin-slide-title {
font-weight: $slide-left-title-font-weight;
padding: 0px; margin: 0px;
@media only screen and (max-width : $mobile-width-media) { font-size: $slide-left-title-font-size-iphone }
@media only screen and (min-width : $mobile-width-media + 1) { font-size: $slide-left-title-font-size }
white-space: nowrap
}
.skin-slide-description, .skin-slide-description h1, .skin-slide-description h2, .skin-slide-description h3, .skin-slide-description h4, .skin-slide-description p {
font-weight: $slide-left-text-font-weight;
padding: 0px; margin: 0px;
@media only screen and (max-width : $mobile-width-media) {
font-size: $slide-left-text-font-size-iphone;
margin-top: $slide-left-text-margin-top-iphone;
}
@media only screen and (min-width : $mobile-width-media + 1) {
font-size: $slide-left-text-font-size;
margin-top: $slide-left-text-margin-top;
}
}
.skin-slide-more {color: $slide-more-color; display:block; position:absolute; bottom: $slide-more-bottom; left: $slide-more-left; width: $slide-more-width; height: $slide-more-height; font-size: $slide-more-font-size;
text-decoration: none; line-height: $slide-more-height - 2; font-weight: $slide-more-font-weight; text-align:center; background: $slide-more-background;
z-index: 1
}
.skin-slide-right {
position: absolute; display: block;
width: percentage($slide-right-width / $slide-container-width);
@media only screen and (max-width : $mobile-width-media) { height: $slide-wrapper-height-iphone }
@media only screen and (min-width : $mobile-width-media + 1) { height: $slide-wrapper-height }
right: 0px; overflow: hidden;
}
.skin-slide-image {
td {
vertical-align: middle; text-align: center; overflow: hidden;
}
img {
width: $slide-right-image-width;
@media only screen and (max-width : $mobile-width-media) {
height: $slide-right-image-height-iphone;
background-position: 0px center;
background-size: 50%;
}
@media only screen and (min-width : $mobile-width-media + 1) {
height: $slide-right-image-height;
background-position: center center;
background-size: cover;
}
background-repeat: no-repeat;
border: $slide-right-image-border;
-moz-border-radius: $slide-right-image-border-radius;
-webkit-border-radius: $slide-right-image-border-radius;
border-radius: $slide-right-image-border-radius;
}
}
.skin-slide-bottom {
position: absolute;
@media only screen and (max-width : $mobile-width-media) {
height: $slide-bottom-height-iphone;
}
@media only screen and (min-width : $mobile-width-media + 1) {
height: $slide-bottom-height
}
width: 100%; bottom: 0px;
}
.skin-slide-arrow-left, .skin-slide-arrow-right {
position: relative; display: inline-block; width: $slide-bottom-arrow-width;
@media only screen and (max-width : $mobile-width-media) {
height: $slide-bottom-height-iphone
}
@media only screen and (min-width : $mobile-width-media + 1) {
height: $slide-bottom-height
}
}
.skin-slide-arrow-left { background: $slide-bottom-arrow-left-background }
.skin-slide-arrow-right { background: $slide-bottom-arrow-right-background }
.skin-slide-dots {
width: 100%;
position: absolute;
text-align: center;
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
bottom: $slide-wrapper-bottom
}
.skin-slide-dots-element {
display: inline-block; position: relative; width: $slide-dots-element-diameter; height: $slide-dots-element-diameter; border-radius: 50%;
cursor: pointer; background: $slide-dots-element-background; border:1px solid $slide-dots-element-border-color; margin-right: $slide-dots-element-gap;
@media only screen and (max-width : $mobile-width-media) {
margin-bottom: ($slide-bottom-height-iphone - $slide-dots-element-diameter) / 2 - 1;
}
@media only screen and (min-width : $mobile-width-media + 1) {
margin-bottom: ($slide-bottom-height - $slide-dots-element-diameter) / 2 - 1;
}
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
&.cms-plugin-slider-dot-current { background: $slide-dots-active-element-background; border:1px solid $slide-dots-active-element-border-color }
}
.cms_plugin_slider()
| Option | Method | Callback |
|---|---|---|
| data, interval, duration | ||
| slides, themes, theme_arrow_left | ||
| theme_arrow_right, dots, arrow_left | ||
| arrow_right, container, class_current | ||
| class_more, class_control, admin | ||
| id, lang, cms_path, cms |
|
.cms_plugin_slider( settings )
|
|||||||
|
cms_plugin_slider plugin plugin styling and control (plugin implementation in sample):
- sample-slide-area - area where slide container is placed
- sample-slide-container - area where is placed container
- sample-slide-wrapper - element to which will be appended slider dynamic elements
- sample-slide-step - one slide element
- sample-slide-step-empty - empty slide element
- sample-slide-step-empty p - empty slide element paragraph
- sample-slide-left - left slide area
- sample-slide-text - left slide area text region
- sample-slide-title - slide title
- sample-slide-description - slide desription text
- sample-slide-description h1 - header h1 in slide desription text
- sample-slide-description h2 - header h2 in slide desription text
- sample-slide-description h3 - header h3 in slide desription text
- sample-slide-description h4 - header h4 in slide desription text
- sample-slide-description p - paragraph in slide desription text
- sample-slide-more - more button
- sample-slide-right - right slide area
- sample-slide-image td - table cell containing slide image
- sample-slide-image img - slide image
- sample-slide-bottom - slide bottom area containing dots
- sample-slide-arrow-left - slides moving to left control
- sample-slide-arrow-right - slides moving to right control
- sample-slide-dots - slides dot elements area
- sample-slide-dots-element - slide dot elements
- sample-slider-dot-current - active slide dot element
- sample-plugin-control - plugin right click context menu control