Vegas Slider Background
Hier tut der Vegas Background Slider nun das, was der Name bereits sagt.
Auch hier ist das Ganze mit Bilder Div in einem Template innerhalb des CMS realisiert.
Eine Bildunterzeile macht hier wenig Sinn, wäre aber möglich!
Link zum Setup: Vegas Background Slideshow
Link zu den Settings : Settings Vegas Background Slideshow
Link zum Vegas Background Slideshow im Div-Container
Das Template
https://github.com/pranjay-poddar/Dev-Geeks
https://github.com/topics/css3-animations
https://github.com/Rocker2102/Animate-CSS
<!--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:
body:after{
background-image: none;
}
-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div id="vegas_bg_slide">
<div id="vegas_bg_slide_inner" class="voodoo_box_fade"></div>
<script>
$('body').vegas({
overlay: true,
loop: true,
transition: 'fade',
transitionDuration: 9000,
delay: 8000,
animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],
animationDuration: 19000,
slides: [
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
{
src: '{THUMB_REL}',
},
<!--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]
],
});
</script>
</div>
[ATTR_CLASS]</div>[/ATTR_CLASS][ATTR_CLASS_ELSE][ATTR_ID]</div>[/ATTR_ID][/ATTR_CLASS_ELSE]
<!--IMAGES_FOOTER_END//-->
Thumbnail image: {THUMB_NAME}
relative: {THUMB_REL}
absolute: {THUMB_ABS}
height/width: {THUMB_HEIGHT}px/{THUMB_WIDTH}px
height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
columns: {THUMB_COLUMNS}
image ID: {IMAGE_ID}
image Hash: {IMAGE_HASH}
image Extension: {IMAGE_EXT}
Slide ID: {SLIDE_ID}
Slide Number: {SLIDE_NUM}
[SLIDES]{SLIDES}[/SLIDES]
If you are not sure wrap zoomed image:
[ZOOM]
Zoomed (big) image: {IMAGE_NAME}
relative: {IMAGE_REL}
absolute: {IMAGE_ABS}
height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
[/ZOOM]