WBCE CMS Forum

better-work

Mitglied

Vegas Background Slideshow

@grindbatzn

Hallo Chio,

könntest Du bitte mal eine kleine Anleitung hinterlassen, wie Du es eingebaut hast,
oder ist das bereits im Template eingebaut / dokumentiert?
http://wbce.at/tpls/unterseiten/itemz-p … slider.php

Gruß Jörg

Beitrag geändert von better-work (26.04.2016 10:31:29)

---

Gruß Jörg

grindbatzn

Gast

Re: Vegas Background Slideshow

Alle diese Sachen sind mit Itemz (=Members) zusammengebaut - als Test- und Spielwiese.
Itemz ist noch ziemlich buggy, ich komme leider nicht dazu, das alles auszubessern. Und wirklich schlimm sind die Bugs nicht.
Aber alles was in members funktioniert, funktioniert da auch - und etliches mehr.

Angehängt ist die Version, wie ich sie immer verwende.
Da hast du ein preset drin: vegas-background. Das ist genau das von og. Seite.

better-work

Mitglied

Re: Vegas Background Slideshow

Vielen Dank, das sehe ich mir mal an...

Gruß Jörg

---

Gruß Jörg

grindbatzn

Gast

Re: Vegas Background Slideshow

++++++++++++
Ich hole das hier rauf, kann ja auch für andere interessant sein:

Der hier wesentliche Unterschied zwischen members und itemz ist das Feld "Items Divider", das Code zwischen 2 Items enthalten kann.
In diesem Fall "," (beistrich) weil hier Listenelemente ausgegeben werden.
Im Ordner /helpers sind einige jQuery-Plugins und gesammeltes Zeugs drin. Auch der Vegas-Slider.

Die EInstellungen sind:
Kopfzeile:
<!-- see: http://vegas.jaysalvat.com/documentation/settings/ -->
<script src="http://zeptojs.com/zepto.min.js"></script>

<link rel="stylesheet" href="[ITEMZ_MOD_DIR]helpers/vegas/vegas.min.css" />
<script src="[ITEMZ_MOD_DIR]helpers/vegas/vegas.min.js" type="text/javascript"></script>

<script>

$(".header").vegas({
    overlay: '[ITEMZ_MOD_DIR]helpers/vegas/overlays/02.png',
    slides: [

Fusszeile:
],
    transition: [ 'swirlRight', 'swirlLeft','swirlRight2', 'swirlLeft2' ],
animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],

init: function (globalSettings) {
        console.log("Init");
    }
});
</script>

Item:
{ src: "[PICTURE]" }

und Items Divider:
, (Beistrich)

Ganz oben unter Speicherort der Bilder: /head-slides
(bezogen auf /media )

$(".header").vegas({
In Sobresot heißt der Container eben .header
Eine eindeutige ID wäre besser, aber ich wollte es nicht ändern.

Diese Zeile:
<script src="http://zeptojs.com/zepto.min.js"></script>
ist scheinbar nicht nötig. Funktioniert auch ohne.

Wo der itemz-abschnitt ist, ist egal, er sollte aber eher unten im Quellcode sein.

Man legt einige Items an, wählt je ein Bild und einen Namen (der kommt nirgends vor, aber man muss trotzdem einen angeben)

Die EInstellungen zum Slider macht man im Feld Fußzeile. In die Liste kopiert man die, die zufällig gewählt werden sollen.
Einstellungen zu jedem Bild einzeln wären möglich, aber das ist mühsam.

Mit etwas basteln kann man allerhand mehr machen.

http://vegas.jaysalvat.com/documentation/transitions/

Was es so alles gibt:
transition: [ 'fade', 'fade2', 'slideLeft', 'slideLeft2', 'slideRight', 'slideRight2', 'slideUp', 'slideUp2', 'slideDown', 'slideDown2', 'zoomIn', 'zoomIn2', 'zoomOut', 'zoomOut2', 'swirlLeft', 'swirlLeft2', 'swirlRight', 'swirlRight2', 'burn', 'burn2', 'blur', 'blur2', 'flash', 'flash2' ]

Beitrag geändert von grindbatzn (29.04.2016 13:17:30)

grindbatzn

Gast

Re: Vegas Background Slideshow

Teil 2:
Wenn man das ganze für den Seiten-Hintergrund haben will, gibt man einfach an:
$("body").vegas({ ...

Bei manchen Templates ist noch nötig:
<style>
html {background:none;}
</style>

Späße wie sowas:
http://trikefahren.ch/
lassen sich mit den weiteren Feldern und ein paar Zeilen Script mehr machen, ist aber im Kern das gleiche.

byteworker

Mitglied

Re: Vegas Background Slideshow

Ich lese interessiert mit, hast Du echt toll umgewandelt Chio 

---

= Templates für WBCE

better-work

Mitglied

Re: Vegas Background Slideshow

Hallo Chio,

was soll ich sagen nur eins: GENIAL !!!!      
Echt Cool auch: http://trikefahren.ch/

---

Gruß Jörg