Vegas Slider im Container
Vegas Background Slideshow:
Man kann sicherlich darüber diskutieren ob es Sinn macht einen Background-Slider in einem Container-Div zu verwenden, aber es würde funktionieren.
Das es mit Bilder DIV in einem Template innerhalb des CMS funktioniert hat mich etwas nerven gekostet, aber nun geht es. Oberhalb könnt ihr das Ergebnis sehn.
Mögliche Effekte wären KenBurns, Vertical Slide, Horizontal Slide und Fade
Link zum Setup: Vegas Background Slideshow
Link zu den Settings : Settings Vegas Background Slideshow
Link zur Vegas Background Slideshow
Das Template unter: inc_cntpart/images
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width = 1200
;height = 500
col = 9999999
;zoom = 0
;crop = 1
;space = 0
;lightbox = 0
;nocaption = 0
;random = 0
;limit = 0
; if set to 1 and total amount of images > limit render hidden feature
;hide_limited = 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image = 0
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
[ATTR_CLASS]<div class="{ATTR_CLASS}"[ATTR_ID] id="{ATTR_ID}"[/ATTR_ID]>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]<div id="{ATTR_ID}">[/ATTR_ID][/ATTR_CLASS_ELSE]
<!-- CSS: {TEMPLATE}mylib/vegas-slider-2.6/vegas.min.css -->
<!-- JS: {TEMPLATE}mylib/vegas-slider-2.6/vegas.min.js -->
<!-- CSS: {TEMPLATE}mylib/vegas-slider-2.6/vegas-box-slide.css -->
<!-- CSS:
#vegas_box_slide_kb_01{
max-width: {THUMB_WIDTH_MAX}px;
height: {THUMB_HEIGHT_MAX}px;
}
-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
<div id="vegas_box_slide_kb_01">
<div id="vegas_box_slide_kb_01_inner" class="voodoo_box_fade"></div>
<script>
$('#vegas_box_slide_kb_01').vegas({
delay: 5000,
loop: true,
preload: true,
preloadImage: true,
preloadVideo: false,
timer: false,
overlay: false,
autoplay: true,
shuffle: false,
cover: true,
color: null,
align: 'center',
valign: 'center',
firstTransition: 'kenburnsUp',
firstTransitionDuration: 0,
transition: 'fade',
// Mögliche Effekte:
// transition: [ 'swirlRight', 'swirlLeft','swirlRight2', 'swirlLeft2' , 'slideDown' , 'slideLeft' , 'slideRight'],
// transitionDuration: 2000,
animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],
// animation: [ 'fade' ],
animationDuration: '5000',
animationRegister: [],
slidesToKeep: 1,
slides: [
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
{
src: '{THUMB_REL}',
title:'{CAPTION}',
link:'[URL]<a class="btn btn-vegas" href="{URL}"[URL_TARGET] target="{URL_TARGET}"[/URL_TARGET] alt="{ALT}" title="{TITLE}">weiter lesen</a>[/URL]'
},
<!--ENTRY_DATA_START//-->
<!--ENTRY_DATA_END//-->
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
[DATA]{DATA}[/DATA]
],
walk: function (index, slideSettings) {
var htmlContent = `
<div class="vegas_box_slide_kb_01_caption">
<div class="vegas-title">${slideSettings.title}</div>
<div class="vegas-link">${slideSettings.link}</div>
</div>`;
$('#vegas_box_slide_kb_01_inner').html(htmlContent);
}
});
</script>
</div>
[TEXT]{TEXT}[/TEXT]
[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
<!--IMAGES_FOOTER_END//-->