[Script] Javascript - Bildergalerie

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Murdoc, 23. März 2008 .

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 23. März 2008
    Javascript - Bildergalerie

    tach, hab eine bildergalerie in js erstellt. die galerie hat folgende funktionen:

    - bildvorschau als tooltip
    - bildvorschau in element (div-element)
    - bilder slideshow (fullscreen)
    - anzeigewahl (wie viele bilder sollen auf einmal zu sehen sein)

    im ie6 & ie7 funkioniert sie nicht. jetzt funktioniert sie auch im ie (getestet mit ie6)

    doku + download: http://murdoc.freeweb7.com/gal/

    wichtig, für die galerie wird prototype und script.aculo.us benötigt.


    api:

    benutzen
    HTML:
    <script die ganzen libs></script>
    <div id="images">
     <img src="bild1.jpg" alt="bild" />
     <img src="bild2.jpg" alt="bild" />
     <img src="bild3.jpg" alt="bild" />
     <img src="bild4.jpg" alt="bild" />
     <img src="bild5.jpg" alt="bild" />
     <img src="bild6.jpg" alt="bild" />
     <img src="bild7.jpg" alt="bild" />
     <img src="bild8.jpg" alt="bild" />
     <img src="bild9.jpg" alt="bild" />
    </div>
    <script>
     //hier als erstes attribut die id des elements angeben in welchem die bilder sind. das ganze mit $('') umklammern.
     new mcImageSlide.Galerie($('images') {
     //optionen
     display: 3, //wieviele bilder sollen auf einmal angezeigt werden
     imageMaxHeight: 60, //wie hoch sollen bilder dargestellt werden 
     imageMaxWidth: 60, //kann auch weggelassen werden (dann ist maxHeight gleich maxWidth)
     
     //wenn hier ein element übergeben wird, werden bilder bei mouseover in diesem element angezeigt
     //putPreviewIn: einElement,
     preview: true, //mit diesem parameter werden bilder als tooltip-vorschau angezeigt
     
     //events
     events: {
     oncreate: function(obj) { alert('galerie wird erstellt'); },
     oncreated: function(obj) { alert('galerie wurde erstellt'); },
     onpreview: function(obj) { alert('es wurde eine vorschau angefordert'); },
     onnextimage: function(obj) { alert('es wurde auf "weiter" geklickt'); },
     onprevimage: function(obj) { alert('es wurde euf "zurück" geklickt'); },
     onshow: function(obj) { alert('es wurde eine ansicht angefordert'); },
     oncontainerclose: function(obj) { alert('die ansicht wurde geschlossen'); },
     oncontainernext: function(obj) { alert('es wurde in der ansicht auf "weiter" geklickt'); },
     oncontainerprev: function(obj) { alert('es wurde in der ansicht auf "zurück" geklickt'); },
     
     //internal
     oncontainercreate: function(obj) { alert('der ansicht-container wird erstellt'); },
     oncontainerbodycreate: function(obj) { alert('der hintergrund wurde abgedunkelt'); },
     oncontainercreated: function(obj) { alert('der ansicht-container wurde erstellt'); }
     }
     });
    </script>
    die galerie wird via css angepasst. folgende klassen kann man bearbeiten:
    Code:
    /* die buttons in der ansicht */
    .slideshow_container_button {}
    
    /* die tabelle, in der die bilder zu sehen sind */
    .slideshow_table {}
    
    /* der vor und zurück-button in der tabelle */
    .slide_next {}
    .slide_back {}
    
    /* button wenn nix mehr geht in der tabelle */
    .disabled {}
    
    /* button wenn nix mehr geht in der ansicht */
    .slideshow_container_button_disabled {}
    
    /* der ansichts-container */
    #slideshowImageContainer {}
    
    /* der container der den hintergrund abdunkelt */
    #slideshowImageContainerBody {}
    
    
    
     

  2. Anzeige
    Heute: Deals & Sale mit stark reduzierten Angeboten finden.
  3. #2 23. März 2008
    AW: Javascript - Bildergalerie

    Sieht schick aus, lädt mir aber etwas zu lange. Selbst auf meinem doch nicht so langsamen Desktop, braucht das ganz schön resourcen.

    Code habe ich mir nicht angesehen, kenne mich aber auch noch nicht so gut aus mit JS.
     
  4. #3 23. März 2008
    AW: Javascript - Bildergalerie

    des lange laden liegt am space, bei der galerie bekommst du des laden normal garnet mit :D
     
  5. #4 27. März 2008
    AW: Javascript - Bildergalerie

    update :D ansehen lohnt sich!
     
  6. #5 27. März 2008
    AW: Javascript - Bildergalerie

    cool cool aber kannst maybe mal nen tut oder sowas zur erklärung
    schreiben^^ ich steig iwi nich dran lang... :)

    mfg marcel182
     
  7. #6 27. März 2008
    AW: Javascript - Bildergalerie

    Wenn man aufs kleine Bild geht kommt ja die große Preview, wenn man dann runter vom kleinen Bild mitm Cursor geht und wieder drauf dann wird das große Previewbild ausgeblendet und dasselbe wieder eingeblendet. ;)
    :D
     
  8. #7 27. März 2008
    AW: Javascript - Bildergalerie

    fixed.

    atm wird der slideEffect "roll" noch gefixt, denn wenn man da zweimal hintereinander auf "next" oder "back" klickt, dann is alles am sack.

    //edit: slideEffect "roll" fixed
     
  9. #8 27. März 2008
    AW: Javascript - Bildergalerie

    wenn man mit der maus über die Bilder geht dann passiert es ab und zu das die Vorschau an anderen orten im bild wieder auftaucht^^
     
  10. #9 27. März 2008
    AW: Javascript - Bildergalerie

    liegt daran, das du die maus erst bewegen musst damit sich die vorschau an den cursor hängt.
    werds nicht fixen, seh keine notwendigkeit.

    update: für leute die sich garnet mit js auskennen ist jetzt ein xml-support eingebaut.
    d.h. ihr könnt eure bilder in einen .xml-file speichern und die bilder von dieser aus laden lassen.

    wies geht kann man hier lesen: http://murdoc.freeweb7.com/gal/xmltest.html

    //und bitte ned meckern von wegen in xml kann man doch xhtml-elemente reinmachen und die einfach einfügen -> sagt das mal einer dem internet-explorer
     
  11. #10 28. März 2008
    AW: Javascript - Bildergalerie

    wie muss denn dann mein quell code aussehen so ungefähr?

    <script die ganzen libs>
    new mcImageSlide.Galerie('id_of_the_element', {
    putPreviewIn: 'id_of_pre_element',
    preview: true
    });
    </script>
    <div id="images">
    <img src="Bilder/DSC00202.JPG" alt="bild" width="70" height="50"/>
    <img src="Bilder/DSC00202.JPG" alt="bild" width="70" height="50"/>
    <img src="Bilder/DSC00202.JPG" alt="bild" width="70" height="50"/>
    <img src="Bilder/DSC00202.JPG" alt="bild" width="70" height="50"/>
    </div>
    <script>
    //hier als erstes attribut die id des elements angeben in welchem die bilder sind. das ganze mit $('') umklammern.
    new mcImageSlide.Galerie($('images') {
    //optionen
    display: 3, //wieviele bilder sollen auf einmal angezeigt werden
    imageMaxHeight:30, //wie hoch sollen bilder dargestellt werden
    imageMaxWidth: 30, //kann auch weggelassen werden (dann ist maxHeight gleich maxWidth)

    //wenn hier ein element übergeben wird, werden bilder bei mouseover in diesem element angezeigt
    //putPreviewIn: einElement,
    preview: true, //mit diesem parameter werden bilder als tooltip-vorschau angezeigt

    //events
    events: {
    oncreate: function(obj) { alert('galerie wird erstellt'); },
    oncreated: function(obj) { alert('galerie wurde erstellt'); },
    onpreview: function(obj) { alert('es wurde eine vorschau angefordert'); },
    onnextimage: function(obj) { alert('es wurde auf "weiter" geklickt'); },
    onprevimage: function(obj) { alert('es wurde euf "zurück" geklickt'); },
    onshow: function(obj) { alert('es wurde eine ansicht angefordert'); },
    oncontainerclose: function(obj) { alert('die ansicht wurde geschlossen'); },
    oncontainernext: function(obj) { alert('es wurde in der ansicht auf "weiter" geklickt'); },
    oncontainerprev: function(obj) { alert('es wurde in der ansicht auf "zurück" geklickt'); },

    //internal
    oncontainercreate: function(obj) { alert('der ansicht-container wird erstellt'); },
    oncontainerbodycreate: function(obj) { alert('der hintergrund wurde abgedunkelt'); },
    oncontainercreated: function(obj) { alert('der ansicht-container wurde erstellt'); }
    }
    });
    </script>
     
  12. #11 28. März 2008
    AW: Javascript - Bildergalerie

    Das sieht jetzt viel besser aus! Sehr schick...

    Läuft auch besser....
     
  13. #12 28. März 2008
    AW: Javascript - Bildergalerie

    Moin Murdoc,
    das ganze sieht wirklich ganz nett aus, nur ist mir eben was aufgefallen und zwar kann man im Vorschaumodus noch scrollen und so den ausgegrauten Bereich verlassen. Falls das so gewollt war, diesen Beitrag einfach ignorieren :D
     
  14. #13 28. März 2008
    AW: Javascript - Bildergalerie

    Kannst ja noch erlauben das die Bilder noch irgendwas verlinken, was der User halt will. Wär doch praktisch..^^
     
  15. #14 28. März 2008
    AW: Javascript - Bildergalerie

    jap is gewollt, der abgedunkelte bereich muss ja ned unnötig groß werden. evtl. kommt in der nächsten version noch eine funktion dazu die den schwarzen bereich samt bild mitnimmt wenn man scrollt.

    neue version ist online. dazugekommen sind nützliche funktionen:

    - InlineSlideShow()
    erstellt eine automatisch laufende slideshow (die bilder laufen von selber durch)
    Code:
    var galerieObj = mcImageSlide.InlineSlideShow('element_id' [, optionen])
    in den optionen kann man mit interval: ms angeben wie schnell das ganze laufen soll

    - FullsizeSlideShow()
    popt nach dem erstellen der galerie das erste bild gleich auf und läuft dann automiaisch jedes bild durch.
    Code:
    benutzen funktioniert genauso wie InlineSlideShow
    vorschau gibts heute abend.

    hm... mal schaun, wobei die bilder ja indirekt von dem script verlinkt werden (die ansicht halt)
     
  16. #15 28. März 2008
    AW: Javascript - Bildergalerie

    Naja, wär doch schön wenn man dann zB Cover auf "irgendeiner" Seite verlinken kann, bspweise mit 'ner Seite wo man "mehr Informationen" zu den Medien findet. ^^
     
  17. #16 28. März 2008
    AW: Javascript - Bildergalerie

    naja okay, dann bau ich ne neue option rein das man wählen kann was bei klick passieren soll.

    HTML:
    <!-- benötigte libs -->
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scripaculous.js?load=effects"></script>
    
    <!-- die slideshow lib ned vergessen -->
    <script type="text/javascript" src="slideshow.js"></script>
    <!-- ende libs -->
    
    <!-- das element in welchen die slideshow sein soll -->
    <div id="slider">
     <!-- hier die bilder einfach ganz normal angeben -->
     <img src="bild.jpg" alt="bild" />
     <!-- beliebig viele -->
    </div>
    <!-- ende element -->
    
    <!-- eine neue slideshow erstellen -->
    <script type="text/javascript">
     //der erste parameter ist die id, welche beim element oben angegeben wurde
     new mcImageSlide.Galerie('slider', {
     imageMaxHeight: 100, //hier die gewünschte maximale hohe der bilder angeben
     imageMaxWidth: 100, //hier die gewünschte maximale breite der bilder angeben
     preview: true, //true => ja, false = nein - vorschau gewünscht?
     });
    </script>
    //hab mal die lizenz geändert, von GPL in LGPL
     
  18. #17 28. März 2008
    AW: Javascript - Bildergalerie


    Jo, kannst das ruhig auch in deine XML "Schnittstelle" mit einbauen, aka <image onclick=""> etc :p es sei denn du weißt was besseres als das ^^

    Was bringt LGPL im ggsatz zu GPL? :S
     
  19. #18 28. März 2008
    AW: Javascript - Bildergalerie

    damit man das ding in eigene programme einbauen kann ohne das die unter der selben lizenz stehen müssen. d.h.: bei gpl muss software die meine slideshow verwendet auch unter der gpl stehen, bei lgpl ned.

    //okay, das mit dem verlinkten bildern is eingebaut. dazugekommen sind zwei neue attribute in den optionen:
    - followLinks: true|false (verlinkte bilder verlinkt lassen)
    - noFullscreen: true|false (bilder bei klick nicht vergrößern)
     
  20. #19 31. März 2008
    AW: Javascript - Bildergalerie

    eine frage kann ich des irgendwie so machen das es ne tabelle wird ^^ wo man mehr die übersicht sieht also ich mein so

    [] = Bild

    [][][][][][][][][]
    [][][][][][][][][]
    [][][][][][][][][]
    [][][][][][][][][]
    [][][][][][][][][]
    [][][][][][][][][]

    check mich nich so mit java aus aber weiß wie man sie einfügt xD
    den so in einer reihe past ga nich zu meiner page =)
     
  21. #20 31. März 2008
    AW: Javascript - Bildergalerie

    zufall? genau das is derzeit in arbeit. die buttons für "next" und "back" sind dann oben und unten.
     
  22. #21 1. April 2008
    AW: Javascript - Bildergalerie

    so, jetzt kann man auch mehrere zeilen machen. das ganze sieht dann so aus: http://murdoc.freeweb7.com/gal/multi.html

    das ganze erstellt man indem man in den optionen einfach inRow angibt.

    zb:
    Code:
    new mcImageSlide.Galerie('element', {
     inRow: 3, //soviele bilder in eine zeile
     lines: 2 //soviele zeilen sollen zu sehen sein
    });
    der slideEffect "fade" funktioniert dann aber nicht mehr im IE

    //hätte am anfang ned gedacht dass das script mal 1000 zeilen lang werden würde :D
     
  23. #22 1. April 2008
    AW: Javascript - Bildergalerie

    WIE GEIL DARF ICHS KOPIEREN .=)
     
  24. #23 2. April 2008
    AW: Javascript - Bildergalerie

    ich bitte darum ;)
    viel spaß damit!

    wenn jemand verbesserungsvorschläge oder ne idee hat die da gut mit reinpasst einfach sagen!
     
  25. #24 3. April 2008
    AW: Javascript - Bildergalerie

    Kannste das mal nochmal komplett auf den thread setzen check grad nich wie es geht xD
     
  26. #25 7. Mai 2008
    AW: Javascript - Bildergalerie

    Sieht schick aus, aber irgendwie gefällts mir der Scrolleffekt nicht. Wenn ich auf den Pfeil klicke zieht sich das Bild so auseinander, ein smootherer Übergang wäre ästhetischer.
     

  27. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Script Javascript Bildergalerie
  1. Antworten:
    4
    Aufrufe:
    612
  2. Antworten:
    0
    Aufrufe:
    3.538
  3. Antworten:
    0
    Aufrufe:
    3.793
  4. Antworten:
    6
    Aufrufe:
    3.094
  5. Antworten:
    2
    Aufrufe:
    1.282
  • Annonce

  • Annonce