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



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



    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



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

  • Hab deine slidshow (ohne Steuerung) versucht! funktioniert aber nicht - nur schwarzer Bildschirm?!
    Könnte es sein, dass ich probleme mit dem Pfad zu den Bildern habe?


  • Könnte es sein, dass ich probleme mit dem Pfad zu den Bildern habe?


    Hallo


    Könnte sein.


    Link?

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

  • :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/'},

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

  • Wird nur funktionieren wenn ihre die Bilder auch mit raufladet in den Ordner den ihr hoffentlich angegeben habt !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !