Vegas Background Slideshow in PHPWCMS
Effekte: KenBurns
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
Vegas Background Slider in einem DIV:
das Template dazu
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
;width = 1200
;height = 500
col = 9999999
<!--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 -->
<!-- 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;
border-radius: var(--border-radius, 4px);
}
-->
[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>
</div>
<script>
window.VEGAS_SLIDES_KB_01 = [
<!--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]'
},
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_FOOTER_START//-->
[DATA]{DATA}[/DATA]
];
</script>
[TEXT]{TEXT}[/TEXT]
[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
<script>
(function waitForVegasKB01() {
if (
window.jQuery &&
jQuery.fn &&
jQuery.fn.vegas &&
document.getElementById('vegas_box_slide_kb_01') &&
window.VEGAS_SLIDES_KB_01
) {
var $ = jQuery;
var $box = $('#vegas_box_slide_kb_01');
/* Mehrfach-Initialisierung verhindern */
if ($box.data('vegas-init')) return;
$box.data('vegas-init', true);
/* Alte Instanz sauber entfernen (falls CMS neu rendert) */
if ($box.data('vegas')) {
$box.vegas('destroy');
}
$box.vegas({
delay: 6000, /* Gesamtzeit pro Slide */
timer: false,
transition: 'fade',
transitionDuration: 1200,
animation: [
'kenburnsUp',
'kenburnsDown',
'kenburnsLeft',
'kenburnsRight'
],
animationDuration: 6000, /* MUSS < delay sein */
cover: true,
preload: true,
slidesToKeep: 1,
slides: window.VEGAS_SLIDES_KB_01,
walk: function (index, slideSettings) {
var $inner = $('#vegas_box_slide_kb_01_inner');
if (!$inner.length) return;
var html =
'<div class="vegas_box_slide_kb_01_caption">' +
'<div class="vegas-title">' + (slideSettings.title || '') + '</div>' +
'<div class="vegas-link">' + (slideSettings.link || '') + '</div>' +
'</div>';
$inner.html(html);
}
});
} else {
setTimeout(waitForVegasKB01, 50);
}
})();
</script>
<!--IMAGES_FOOTER_END//-->
Vegas Background Slider Template:
das Template dazu
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
;width = 1200
;height = 500
col = 9999999
<!--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 -->
<!-- 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;
border-radius: var(--border-radius, 4px);
}
-->
[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>
</div>
<script>
window.VEGAS_SLIDES_KB_01 = [
<!--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]'
},
<!--IMAGES_ENTRY_END//-->
<!--IMAGES_FOOTER_START//-->
[DATA]{DATA}[/DATA]
];
</script>
[TEXT]{TEXT}[/TEXT]
[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
<script>
(function waitForVegasKB01() {
if (
window.jQuery &&
jQuery.fn &&
jQuery.fn.vegas &&
document.getElementById('vegas_box_slide_kb_01') &&
window.VEGAS_SLIDES_KB_01
) {
var $ = jQuery;
var $box = $('#vegas_box_slide_kb_01');
/* Mehrfach-Initialisierung verhindern */
if ($box.data('vegas-init')) return;
$box.data('vegas-init', true);
/* Alte Instanz sauber entfernen (falls CMS neu rendert) */
if ($box.data('vegas')) {
$box.vegas('destroy');
}
$box.vegas({
delay: 6000, /* Gesamtzeit pro Slide */
timer: false,
transition: 'fade',
transitionDuration: 1200,
animation: [
'kenburnsUp',
'kenburnsDown',
'kenburnsLeft',
'kenburnsRight'
],
animationDuration: 6000, /* MUSS < delay sein */
cover: true,
preload: true,
slidesToKeep: 1,
slides: window.VEGAS_SLIDES_KB_01,
walk: function (index, slideSettings) {
var $inner = $('#vegas_box_slide_kb_01_inner');
if (!$inner.length) return;
var html =
'<div class="vegas_box_slide_kb_01_caption">' +
'<div class="vegas-title">' + (slideSettings.title || '') + '</div>' +
'<div class="vegas-link">' + (slideSettings.link || '') + '</div>' +
'</div>';
$inner.html(html);
}
});
} else {
setTimeout(waitForVegasKB01, 50);
}
})();
</script>
<!--IMAGES_FOOTER_END//-->