Erstellen einer JavaScript basierten Bildergalerie

Erstellen einer JavaScript basierten Bildergalerie

Beitragvon camouflage1984 » Mo 24. Aug 2009, 20:50

Das ist ein Tut zum erstellen einer JavaScript basierten Bildergalerie
mit Steuerung und Slideshow!

Bei ausgeschaltetem Javascript kann man
die Vorschau Bilder anklicken und es werden die Original Bilder angezeigt.

Anleitung:

  1. Erstelle einen Ordner mit dem Namen zB: Bildergalerie
    (Du kannst den Ordner so benennen wie du möchtest das hier ist nur ein Beispiel.)

  2. Lade das slideshow zip Archiv auf deinen Rechner.
    http://phatfusion.net/slideshow/
    Das ist die Adresse für den Download!

  3. Entpacke das zip Archiv mit einem Entpacker zB:"7-zip"
    In dem Entpackten zip Archiv sind folgende Ordner vorhanden:_MACOSX und slideshow

  4. Für uns ist die slideshow relevant!
    Den Ordner slideshow öffnen.Dort befinden sich Folgende Dateien:_common / slideshow und utils.

  5. Öffne nun den Ordner slideshow und kopiere die Dateien:slideshow.css / slideshow.js in den Ordner Bildergalerie

  6. Öffne den Ordner _common und dann den Ordner css und kopiere dort :main.css in den Ordner Bildergalerie

  7. Öffne den Ordner _common und dann den Ordner js und kopiere dort: mootools.js in den Ordner Bildergalerie

  8. Öffne den Ordner utils und kopiere dort: backgroundSlider.js in den Ordner Bildergalerie.

  9. Erstelle in dem Ordner Bildergalerie eine Seite mit dem Namen zB: Slideshow.html
    (Du kannst die Seite so benennen wie du möchtest das ist nur ein Beispiel.)

  10. Füge nun Folgende scripte und stylesheets ein!

    Dieses Stylesheet musst du noch umwandeln in slider.css !Wie siehe unten!

    Code: Alles auswählen
    <style
     type="text/css">
    #tasten {
     width: 200px;
    margin-left: 150px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    }
    #tasten1 {
     width: 190px;
    height: 30px;
    line-height: 30px;
    top: 393px;
    left: 20px;
    position: fixed;
    padding-left: 10px;
    }
    #Rahmen {
    height: 300px;
    position: fixed;
    width: 400px;
    margin-top: 26px;
    margin-left: 20px;
    }
    #layout {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
     height: 450px;
    overflow: auto;
    }
    #title {
    width: 950px;
    height: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
     line-height: 30px;
    font-weight: inherit;
    text-align: left;
    }
    #title1 {
    float: right;
    width: 800px;
    height: 29px;
    margin-right: auto;
    margin-left: auto;
    line-height: 29px;
     font-weight: bold;
    color: black;
    text-align: center;
    }
    </style>

    Eine kurze Anleitung wie das gemacht wird:

    Kopiere die Anweisungen in die Seite Slideshow.html.Speichern nicht vergessen!
    Öffne CaScadeS: [F11] drücken oder auf das CaScadeS Icon :css: klicken.
    Das Interne Stylesheet anklicken und Stylesheet exportieren und auf externes Stylesheet umstellen klicken.
    Stylesheet als slider.css in dem Ordner Bildergalerie speichern.
    CaScadeS zumachen: auf OK klicken.

  11. Hier im Head Bereich sind jetzt alle scripte und css Anweisungen die wir für unsere Bildergalerie benötigen.
    Code: Alles auswählen
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html
     lang
    ="de"><head><meta
     content
    ="text/html; charset=ISO-8859-1"
     http-equiv="content-type"><title>Slideshow</title><link
     rel
    ="stylesheet" href="main.css" type="text/css"
     media="all"><link href="slideshow.css"
     rel="stylesheet" type="text/css"><link href="slider.css"
     rel="stylesheet" type="text/css">
    <
    script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="backgroundSlider.js"></script>
    <script type="text/javascript" src="slideshow.js"></script>
    </head>
    Jetzt noch zwei Kleine Änderung im slideshow.css!

    1.)Öffne CaScadeS: [F11] drücken oder CaScadeS Icon :css: klicken.
    Das slideshow.css anklicken und thumbnails öffnen(auf + klicken!)
    Den Inhalt löschen und diese Anweisungen einfügen:

    margin-top: 17px;
    float: right;
    width: 550px;


    2.)Im slideshowContainer
    Die höhe width:450px; zu width: 400px; ändern.

    CaScadeS zumachen: auf OK klicken.


  12. Das ist jetzt der Body Bereich mit der Bildergalerie
    Code: Alles auswählen
    <body id="layout"><div id="title"><div
     id
    ="title1">Bilder </div><a
     href
    ="index.htm">Zur
    Übersicht
    </a></div><div id="Rahmen"><div
     id
    ="example"><div id="slideshowContainer"
     class="slideshowContainer"></div></div></div><div
     id
    ="thumbnails"> <a href="Bilder/Bild01.jpg"
     class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src="Bilder/Bild01a.jpg"></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 46px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a><a
     href
    ="" class="slideshowThumbnail"><img alt=""
     style="border: 0px solid ; width: 100px; height: 75px;" src=""></a>
    <
    p></p><div id="tasten"><a
     href
    ="#" onclick="show.play(); return false;">Play</a>
    |
     <a href="#" onclick="show.stop(); return false;">Stop</a>
    |
     <a href="#" onclick="show.next(); return false;">Vor</a>
    |
     <a href="#" onclick="show.previous(); return false;">Zurück</a></div>
    </
    div> <script type="text/javascript">
    window.addEvent('domready',function(){
    var obj = {
    wait: 4000, effect: 'fade',
    duration: 1000, loop: false, thumbnails: true,
    backgroundSlider: true,
    onClick: function(i){alert(i)}
    }
    show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);
    show.play();
    });
    </script><br><div id="tasten1"><a
     href="#" onclick="show.play(); return false;">Play</a>
    | <a href="#" onclick="show.stop(); return false;">Stop</a>
    | <a href="#" onclick="show.next(); return false;">Vor</a>
    | <a href="#" onclick="show.previous(); return false;">Zurück</a>
    </div></body></html>


  13. Jetzt sollte die Seite so Aussehen!
    Bild

  14. Wähle die Bilder aus die du für die Bildergalerie verwenden möchtest und Verkleinere diese.
    Die Bilder die du unter href:"" eingibst müssen auf 400x300px verkleinert werden!Hochkantbilder müssen in der
    Höhe auf 300 px reduziert werden!
    Die Vorschaubilder die unter scr="" eingibst haben eine grösse von 100x75px!Hochkantbilder müssen in der
    Höhe auf 75px reduziert werden!

  15. Vergib den Bildern den selben namen und Füge zu den kleinen Bildern ein a dazu!

    Bild01.jpg (400x300px) href=""
    Das ist ein kleiner Trick der das Einfügen der Bilder in die Bildergalerie vereinfacht.
    Du brauchst jetzt nur Bild01.jpg in alle href="" einzufügen und zum Schluss nur die fortlaufenden Nr.eintragen!

    Bild01a.jpg (100x75px) scr=""
    Die Vorschaubilder kannst über die Grafik in KompoZer einfügen!
    Du kannst es aber auch manuell einfügen wie oben beschrieben!

  16. Kopiere jetzt alle Bilder in einen eigenen Ordner mit dem Namen zB: Bilder
    Verschiebe jetzt den Ordner Bilder in den Ordner Bildergalerie.
    (Du kannst den Ordner so benennen wie du möchtest das ist nur ein Beispiel.)

  17. Einstellungen im JS

    var obj = {
    wait: 4000, effect: 'fade',
    duration: 1000, loop: false,thumbnails: true,
    backgroundSlider: true,
    onClick: function(i){alert(i)}
    }

  18. wait:4000,
    Wenn du möchtest das die Bilder Länger oder Kürzer angezeigt werden sollen kannst du das hier einstellen:
    wait:2000, jetzt beträgt die zeitverzögerung zwischen dem Bildwechsel 2 sek.
    Die max. zeitverzögerung beträgt 8 sek.Standardmässig steht die zeitverzögerung bei wait:4000, also 4 sek.

  19. loop:true,
    Standardmässig ist die loop Funktion auf true gesetzt!
    Damit wird erreicht das die slideshow beim erreichen des letzten Bildes zum ersten spring
    und die slideshow von neuem anfängt!Ist wie eine endlos schleife!
    Ich habe loop:false, gesetzt weil ich möchte das beim letzten Bild der Bildergalerie die slideshow endet!

  20. Größe der Bildergalerie:
    Du kannst die Bildergalerie mit so vielen Bildern bestücken wie du möchtest!
    Füge einfach so viele zeilen mit <a href="" class="slideshowThumbnail"><img alt=""
    style="border: 0px solid ; width: 100px; height: 75px;" src=""></a> hinzu wie du brauchst!

  21. Hochladen auf den Server:
    Lade den gesamten Inhalt deines Ordners Bildergalerie auf deine Server Hoch.
    Den Ordner Bilder bitte als Ordner Hochladen!
    Benutze dazu ein Programm wie zB: File Zilla , FireFTP oder ein anderes FTP Programm.

  22. Finale! :clap:
    So jetzt hast du eine Funktionierende Bildergalerie mit Slideshow Effekt!
    Siehe hier:
    Dieses Beispiel wurde für diese Seite Angepasst!
Alles nicht so ernst nehmen!Mit einem Lächeln Bild kommt man viel weiter!

Benutzeravatar
camouflage1984
Administrator
 
Beiträge: 4120
Registriert: Mi 20. Mai 2009, 20:45
Wohnort: NRW

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon camouflage1984 » Sa 29. Jan 2011, 15:36

Hallo

Nach langer Zeit habe ich mal wieder Zeit gefunden an der Slideshow Galerie zu Arbeiten.
So wie in der obigen Anleitung gibt es diese Galerie nicht mehr.(phatfusion.net/slideshow/ gibt es so auch nicht mehr :( )

Da es sich um eine Open Source MIT Licence handelt, habe ich das Script überarbeitet und es als download auf meiner HP geladen.

Habe ein paar Änderungen durchgeführt und dadurch (hoffentlich) einige Stolperfallen beseitigt.

  1. Eine der Änderungen betrifft backgroundSlider.js wer es gewohnt ist nicht auf Groß und Kleinschreibung zu achten übersieht das Große S schnell und dann Funktioniert das Script nicht mehr :(
    Ich habe jetzt backgroundSlider.js in vorschaubild.js umbenannt und das Script slideshow.js dementsprechend angepasst und es in slider.js umbenannt.
  2. Angepasst wurden auch die verschiedenen css Anweisungen und in eine zusammen gefasst.( slideshow.css /main.css mit ca.50 Anweisungen wurde jetz eine css Datei mit 16 Anweisungen. )
  3. Die Vorschaubilder und die Großen Bilder sind jetzt zentriert.
  4. Die Steuer Elemente wurden auch neu positioniert.
  5. Hier könnt ihr die"nackte Seite" anschauen und auch das Script samt css style herunterladen.
  6. Auch bei mir gilt diese Open Source MIT Licence

Ich wünsche euch viel Spaß mit der Neuen Galerie.
Alles nicht so ernst nehmen!Mit einem Lächeln Bild kommt man viel weiter!

Benutzeravatar
camouflage1984
Administrator
 
Beiträge: 4120
Registriert: Mi 20. Mai 2009, 20:45
Wohnort: NRW

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon mkrueger » Mo 14. Mär 2011, 09:44

Hallo camouflage1984!

Vielen Dank für die Überarbeitung dieses Super-Scrips. Das Ergebnis / Beispiel auf Deiner Seite gefällt mir außerordentlich gut :clap: . Ich bin gerade dabei, es entsprechend in meine Homepage einzubauen.

Du hast folgendes geschrieben:

camouflage1984 hat geschrieben:[*]Auch bei mir gilt diese Open Source MIT Licence [/list]


Mein englisch ist nicht so doll ... Was soll mir das sagen? Soweit ich das verstanden habe, kann ich dass Script in meinen Seite einbauen und entsprechend verändern, ohne irgendwelche Copyrights zu verletzen. Was ich aber nicht verstanden habe: Muss ich irgendeinen Verweis auf meiner Seite auf die Quelle oder die Lizenzbedingungen einarbeiten? :think:

Liebe Grüße
mkrueger
Bild
http://www.von-der-jossaquelle.de

Harz IV - und der Tag gehört Dir!
Benutzeravatar
mkrueger
 
Beiträge: 66
Registriert: Di 21. Sep 2010, 08:30
Wohnort: Hessen - Jossgrund

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon Quaks » Mo 14. Mär 2011, 12:09

Hallo mkrueger,

vielleicht hilft dir zunächst die deutsche Übersetzung weiter.

Liebe Grüße, Quaks
Benutzeravatar
Quaks
Administrator
 
Beiträge: 1202
Registriert: Do 13. Mai 2010, 22:20

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon mkrueger » Mo 14. Mär 2011, 14:03

Hallo Quaks,

danke für die Rückantwort. In den Script-Dateien sind Copyright - Hinweise enthalten. Die müssen also erhalten bleiben und dürfen nicht raus. Ok.

Laut Deinem Wikipedia-Link müsste aber (so ich den Text richtig interpretiere) eigentlich auch noch der Text mit Hinweis auf etwaige Veränderung und Weitergabe der Software mit hinein und auch auf Haftungsausschluss. Im Original habe ich davon nichts gelesen - reicht etwa der Hinweis auf Open Source MIT Licence? Ich habe wirklich keinen Bedarf, mit irgendwelchen Abmahn-"Anwälten" in Kontakt zu kommen. Vielleicht bin ich aber auch nur paranoid... :whistle:

Liebe Grüße
mkrueger
Bild
http://www.von-der-jossaquelle.de

Harz IV - und der Tag gehört Dir!
Benutzeravatar
mkrueger
 
Beiträge: 66
Registriert: Di 21. Sep 2010, 08:30
Wohnort: Hessen - Jossgrund

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon camouflage1984 » Mo 14. Mär 2011, 23:17

Hallo mkrueger

In dem Script mootools muss das Copyright erhalten bleiben.
In den beiden anderen Scripts muss die Lizenzart also MIT Licence angegeben werden.
Alles nicht so ernst nehmen!Mit einem Lächeln Bild kommt man viel weiter!

Benutzeravatar
camouflage1984
Administrator
 
Beiträge: 4120
Registriert: Mi 20. Mai 2009, 20:45
Wohnort: NRW

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon mkrueger » Di 15. Mär 2011, 00:20

@camouflage1984: Na alles klar, dann kann ich die Bildgalerie ja problemlos einbinden.

Nur noch eine Frage: gibt es eine einfache Möglichkeit, dass die Vorschaubilder und auch die eigentlichen Bilder zentriert dargestellt werden? Jetzt kleben sei ja immer am linken Rand. Ist wahrscheinlich eine blöde Frage, aber ich kenne mich mit Java-Script noch nicht aus und wenn ich in der kern.css unter".slideshowThumbnail" herumspiele, wird es ganz übel... Wenn nicht, ist es wahrscheinlich besser, man bindet nur Querformat- oder nur Hochformat-Bilder ein, sieht sonst teilweise sehr unruhig aus....

Liebe Grüße
mkrueger
Bild
http://www.von-der-jossaquelle.de

Harz IV - und der Tag gehört Dir!
Benutzeravatar
mkrueger
 
Beiträge: 66
Registriert: Di 21. Sep 2010, 08:30
Wohnort: Hessen - Jossgrund

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon camouflage1984 » Di 15. Mär 2011, 04:28

Hallo mkrueger

mkrueger hat geschrieben: sieht sonst teilweise sehr unruhig aus....
:think: Die Bilder sind zentriert,oder meinst du wenn man zwischen den breiten Bildern ein schmales hat?

Wenn du möchtest das die Bilder im slideshowContainer und slideshowThumbnail zentriert dargestellt werden dan gib beiden
Code: Alles auswählen
text-align:center;
Alles nicht so ernst nehmen!Mit einem Lächeln Bild kommt man viel weiter!

Benutzeravatar
camouflage1984
Administrator
 
Beiträge: 4120
Registriert: Mi 20. Mai 2009, 20:45
Wohnort: NRW

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon mkrueger » Do 17. Mär 2011, 11:28

@camouflage1984: Ich meinte, wenn man Hoch - und Querformat gemischt hat. Die Hochformat-Bilder sind dann immer linksbündig dargestellt, nicht zentriert - siehe http://www.camouflage1984.bplaced.net/bilder_1.php. Der Motorradfahrer. Ich habe mir jetzt damit geholfen, nur Querformat Bilder zu nehmen. Sieht auch eigentlich schöner aus, weil größer...

An ein "text-align:center;" hatte ich auch schon gedacht, aber irgendwie nicht die Stelle gefunden, wo es hinkommt.

Liebe Grüße
mkrueger
Bild
http://www.von-der-jossaquelle.de

Harz IV - und der Tag gehört Dir!
Benutzeravatar
mkrueger
 
Beiträge: 66
Registriert: Di 21. Sep 2010, 08:30
Wohnort: Hessen - Jossgrund

Re: Erstellen einer JavaScript basierten Bildergalerie

Beitragvon mich78 » Do 17. Mär 2011, 12:14

mkrueger hat geschrieben:An ein "text-align:center;" hatte ich auch schon gedacht, aber irgendwie nicht die Stelle gefunden, wo es hinkommt.

In der Galerie von Camoflage1984 ware es die Klasse
.text a
camouflage.css (Zeile 319)
wenn du hier:
text-align: center;
reinschreibst, sollte es passen ;)
Grundlagen:
Was ist HTML und Was ist CSS
KompoZer-Tutorials für Anfänger:
Das erste Layout / Das erste Design

KompoZer-Kurs: http://www.kreativ-workshops.net/
Benutzeravatar
mich78
Administrator
 
Beiträge: 2488
Registriert: Mi 10. Sep 2008, 14:24

Nächste

Zurück zu Für alle Webeditoren

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast