Ich habe mal ein Testprojekt erstellt und eine Testseite mit dem jQuery Plugin Supersized.
Das ganze kann individuell angepasst werden. Wenn Fragen sind können diese hier gestellt werden. Ich habe hier nur die Demos eingebaut so das hier es vergleichen könnt.
Entweder benutzt man das ganze unter Schritt 1 in dem erweiterten Bereich - so wird die Slideshow auf jeder Seite als Hintergrund benutzt oder man macht es auf jeder Seite individuell unter Eigenschaften der Seite.
Das Paket Supersized ist hier zu finden. Ich benutze im Projekt die Version 3.2.7
Auf der Seite gibt es auch die verschiedenen Einstellungen zu sehen. Wer damit nicht zurecht kommt fragt einfach hier nach.
Als erstes werden die benötigten Dateien auf den Webspace gepackt das kann man entweder per Hand machen oder man bindet die Dateien an ein HTML Objekt (meine Variante).
Diese Dateien müssen wir in den Head der Seite einbinden (Schritt 1 oder Eigenschaften der Seite)
- <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
- <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
- <script type="text/javascript" src="js/jquery.easing.min.js"></script>
- <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
- <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
Je nach dem welche Anzeige man bevorzugt ist nicht unbedingt alles nötig - schadet aber erstmal nicht wenn man alles reinschreibt.
Um jetzt das ganze zu steuern fehlt noch das eigentlich Script welches die Dateien anspricht.
Das ist aber je nach gewünschter Funktion immer unterschiedlich (dieses Beispiel wäre die Slideshow)
- <script type="text/javascript">
- jQuery(function($){
- $.supersized({
- // Functionality
- slide_interval : 3000, // Length between transitions
- transition : 3, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
- transition_speed : 700, // Speed of transition
- // Components
- slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
- slides : [ // Slideshow Images
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
- ]
- });
- });
- </script>
Wie man sehen kann wird dort das verwendete Bild angegeben und einige weitere Optionen - Wie Text,Link und ein Thumbnail. Kann man machen wie man möchte...siehe hier
Das ganze reicht schon aus um eine Slide bzw. Fadeshow anzuzeigen ohne Steuerung.
Wer jetzt noch die Steuerung und die Leiste unten mit dabei haben möchte muss diese noch erstellen. Auf den Demoseiten gibt es dazu im Bodybereich die Beispiele...
- <!--Thumbnail Navigation-->
- <div id="prevthumb"></div>
- <div id="nextthumb"></div>
- <!--Arrow Navigation-->
- <a id="prevslide" class="load-item"></a>
- <a id="nextslide" class="load-item"></a>
- <div id="thumb-tray" class="load-item">
- <div id="thumb-back"></div>
- <div id="thumb-forward"></div>
- </div>
- <!--Time Bar-->
- <div id="progress-back" class="load-item">
- <div id="progress-bar"></div>
- </div>
- <!--Control Bar-->
- <div id="controls-wrapper" class="load-item">
- <div id="controls">
- <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
- <!--Slide counter-->
- <div id="slidecounter">
- <span class="slidenumber"></span> / <span class="totalslides"></span>
- </div>
- <!--Slide captions displayed here-->
- <div id="slidecaption"></div>
- <!--Thumb Tray button-->
- <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
- <!--Navigation-->
- <ul id="slide-list"></ul>
- </div>
- </div>
Das ist wieder die Slideshow. Das ganze muss in X5 auch in den Body Bereich. Da man aber im HTML Objekt immer Platz einnimmt machen wir das unter Eigenschaften der Seite innerhalb des Body Tags.
Da dieser Begriff und die Funktion immer täuschen müssen wir ein wenig tricksen. Denn diese Funktion wird innerhalb <body FUNKTION> geschrieben und nicht danach so wie wir es haben wollen.
Also schreiben wir an den Anfang von dem HTML Quelltext einfach ein > um den Body zu schließen, da aber das Programm am Ende noch den abschließenden > einfügt müssen wir diesen bei uns am Ende entfernen.
Das ganze sieht dann so aus
- ><!--Thumbnail Navigation-->
- <div id="prevthumb"></div>
- <div id="nextthumb"></div>
- <!--Arrow Navigation-->
- <a id="prevslide" class="load-item"></a>
- <a id="nextslide" class="load-item"></a>
- <div id="thumb-tray" class="load-item">
- <div id="thumb-back"></div>
- <div id="thumb-forward"></div>
- </div>
- <!--Time Bar-->
- <div id="progress-back" class="load-item">
- <div id="progress-bar"></div>
- </div>
- <!--Control Bar-->
- <div id="controls-wrapper" class="load-item">
- <div id="controls">
- <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
- <!--Slide counter-->
- <div id="slidecounter">
- <span class="slidenumber"></span> / <span class="totalslides"></span>
- </div>
- <!--Slide captions displayed here-->
- <div id="slidecaption"></div>
- <!--Thumb Tray button-->
- <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
- <!--Navigation-->
- <ul id="slide-list"></ul>
- </div>
- </div
Ich hoffe das Thema ist ein wenig verständlich wenn nicht einfach mal nachfragen wenn was unklar ist.