Hintergrund Slideshow mit Slide oder Fade Effekt in Website X5 V9

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Hintergrund Slideshow mit Slide oder Fade Effekt in Website X5 V9

      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)

      HTML-Quellcode

      1. <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
      2. <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
      3. <script type="text/javascript" src="js/jquery.easing.min.js"></script>
      4. <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
      5. <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)

      JavaScript-Quellcode

      1. <script type="text/javascript">
      2. jQuery(function($){
      3. $.supersized({
      4. // Functionality
      5. slide_interval : 3000, // Length between transitions
      6. transition : 3, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
      7. transition_speed : 700, // Speed of transition
      8. // Components
      9. slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
      10. slides : [ // Slideshow Images
      11. {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/'},
      12. {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/'},
      13. {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/'},
      14. {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/'},
      15. {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/'},
      16. {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/'},
      17. {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/'},
      18. {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/'},
      19. {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/'}
      20. ]
      21. });
      22. });
      23. </script>
      Alles anzeigen


      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...

      HTML-Quellcode

      1. <!--Thumbnail Navigation-->
      2. <div id="prevthumb"></div>
      3. <div id="nextthumb"></div>
      4. <!--Arrow Navigation-->
      5. <a id="prevslide" class="load-item"></a>
      6. <a id="nextslide" class="load-item"></a>
      7. <div id="thumb-tray" class="load-item">
      8. <div id="thumb-back"></div>
      9. <div id="thumb-forward"></div>
      10. </div>
      11. <!--Time Bar-->
      12. <div id="progress-back" class="load-item">
      13. <div id="progress-bar"></div>
      14. </div>
      15. <!--Control Bar-->
      16. <div id="controls-wrapper" class="load-item">
      17. <div id="controls">
      18. <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
      19. <!--Slide counter-->
      20. <div id="slidecounter">
      21. <span class="slidenumber"></span> / <span class="totalslides"></span>
      22. </div>
      23. <!--Slide captions displayed here-->
      24. <div id="slidecaption"></div>
      25. <!--Thumb Tray button-->
      26. <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
      27. <!--Navigation-->
      28. <ul id="slide-list"></ul>
      29. </div>
      30. </div>
      Alles anzeigen


      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

      HTML-Quellcode

      1. ><!--Thumbnail Navigation-->
      2. <div id="prevthumb"></div>
      3. <div id="nextthumb"></div>
      4. <!--Arrow Navigation-->
      5. <a id="prevslide" class="load-item"></a>
      6. <a id="nextslide" class="load-item"></a>
      7. <div id="thumb-tray" class="load-item">
      8. <div id="thumb-back"></div>
      9. <div id="thumb-forward"></div>
      10. </div>
      11. <!--Time Bar-->
      12. <div id="progress-back" class="load-item">
      13. <div id="progress-bar"></div>
      14. </div>
      15. <!--Control Bar-->
      16. <div id="controls-wrapper" class="load-item">
      17. <div id="controls">
      18. <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
      19. <!--Slide counter-->
      20. <div id="slidecounter">
      21. <span class="slidenumber"></span> / <span class="totalslides"></span>
      22. </div>
      23. <!--Slide captions displayed here-->
      24. <div id="slidecaption"></div>
      25. <!--Thumb Tray button-->
      26. <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
      27. <!--Navigation-->
      28. <ul id="slide-list"></ul>
      29. </div>
      30. </div
      Alles anzeigen


      Ich hoffe das Thema ist ein wenig verständlich wenn nicht einfach mal nachfragen wenn was unklar ist.
      Dateien
      • supersized.rar

        (8,96 MB, 49 mal heruntergeladen, zuletzt: )
      :hi: :mario:
    • :S
      slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
      slides : [ // Slideshow Images
      {image : '/picture/Bild1.jpg'},
      {image : '/picture/Bild2.jpg'},
      {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/'},
    • Hintergrund Slideshow

      Hallo!

      Ich würde sehr gerne die Hintergrund slide show im meine Webseite einbauen.
      Ich habe mir das Javascript runter geladen und in meinen Webseiten-stamm -Ordner gegeben , auch auf den Server hochgeladen.
      Die Webseite, auf die ich die slidshow anwenden möchte, habe ich in den "buildinternet-supersized-2ccedfd/slideshow/" Ordner gelegt um keine Verlinkungsprobleme mit der Einbindung der Java Datei zu bekommen.
      Auch bei mir erscheind nur ein schwarzer Hintergrund. wie bei Ewald, und ich denke auch das es an der Verlinkung meiner Bilder liegt. Ich habe welche im selben slide Ordner und auch außerhalb.
      Ich habe aber schon alles probiert und habe jetzt keine Ideen mehr was ich noch Probieren könnte.

      Vielleicht kann mir jemand helfen
      Vielen dank!
      -------------------------------------------------------------
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Unbenanntes Dokument</title>

      <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>

      </head>

      <body>
      <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 : '<img src="schimmel_pipi.jpg" width="425" height="607" />', title : 'Image Credit: Maria Kazvan', },
      {image : '<img src="Rumpelstilzchen04.jpg" width="420" height="356" />', 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 : 'Rumpelstilzchen04.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 : "schimmel_pipi.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 : '<img src="../../bilder/Richtung.jpg" width="352" height="471" />', 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 : '../../bilder/Kreutzung_mit_Schatten.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/'},

      ]

      });
      });

      </script>
      </body>
      </html>