jQuery Colorbox: GIF-Datei größer als das Original darstellen

  • Hallo,


    Für eine Wetterseite werden täglicher Temperaturverlauf, Windstärken, Regenmenge, etc. in kurzen Zeitabständen als GIF-Bilder ins Netz hochgeladen. Die Dateien haben alle eine Originalgröße von 320px x 200px. Auf der Website werden sie etwas kleiner skaliert in der Größe 295px x 185px angezeigt. Über die jQuery Colorbox sollen die GIF-Bilder allerdings deutlich größer dargestellt werden, z.B. 640px x 400px.


    Die Colorbox funktioniert einwandfrei, doch leider werden die GIF-Bilder nie größer als in Originalgröße, also 320px x 200px angezeigt.
    Ich habe es u. a. schon mit width, height, innerWidth, innerHeight und $.colorbox.resize() versucht, leider ohne Erfolg!


    Händisch zusätzliche vergrößerte GIF-Files zu erstellen scheidet aus, weil die Originaldateien immer wieder aktualisiert hochgeladen werden.


    Kann man der Colorbox irgendwie beibringen, dass die Graphiken größer als in Originalgröße dargestellt werden sollen?


    Viele Grüße,
    Schildus

  • Kenne Colorbox nicht und bin auch nicht so tief eingestiegen, aber eine Lösung könnte sein, die Bilder in einen Container zu legen und diesen mit Inline-HTML anzuzeigen. Dann kannst Du die Größe mit CSS ändern. Ist u. U. einfacher, als in den Code von Colorbox einzugreifen.
    Du bist dir schon bewusst, dass die Qualität bei einer Verdopplung der Größe leidet?

  • Ich würde schon gerne bei der Colorbox bleiben um alle Bildergalerien mit dem gleichen Look and Feel anzuzeigen.


    Wenn die Colorbox die Graphiken nicht größer skalieren kann, gibt es evtl. die Möglichkeit die GIF-Dateien über js zu kopieren und zu vergrößern um sie anschließend der Colorbox vergrößert zu übergeben?


    Mir ist durchaus bewusst, dass die Qualität leidet. Aber ich denke die angehängten Files zeigen, dass eine Vergrößerung sich eher positiv auswirkt.

  • Anscheinend hast Du mein Posting nicht richtig gelesen:
    "eine Lösung könnte sein, die Bilder in einen Container zu legen und diesen mit Inline-HTML anzuzeigen. Dann kannst Du die Größe mit CSS ändern."
    Dies sollte mit Colorbox möglich sein. Ist jedenfalls in den Beispielen von Colorbox so angegeben.

  • PS: Ich hab's gerade ausprobiert, funktioniert einwandfrei:

  • HTML, CSS und js gehören leider nicht zu meinem täglichen Handwerkszeug...


    Danke für das Beispiel, es funktioniert prima!
    Einen kleinen Schönheitsfehler gibt es allerdings noch: Nach dem Anhalten der Slideshow funktioniert der erneute Start nicht. Die Slideshow läuft dann nicht wieder an. Aber damit kann ich leben. ;)


    Bei der Umsetzung ohne inline-HTML mit kleinem Bild für die Webseite und großem Bild für die Colorbox tritt der Fehler komischerweise nicht auf.

  • "Nach dem Anhalten der Slideshow funktioniert der erneute Start nicht."
    Ich hoffe, dass ich das beheben konnte: Ändere die Funktionen start() und stop() wie folgt:

  • Leider kam ich noch nicht zum Ausprobieren.
    Habe dafür eine weitere kleine Unschärfe entdecken müssen.
    IE10 baut blaue Rahmen um die zu einer Slideshow gehörenden GIFs, was nicht gewünscht ist und eine veränderte Ausrichtung zur Folge hat.
    Firefox und Chrome machen das nicht.

    Zitat

    "Nach dem Anhalten der Slideshow funktioniert der erneute Start nicht."
    Ich hoffe, dass ich das beheben konnte: Ändere die Funktionen start() und stop() wie folgt:

    Hallo Sempervivum,


    bin Dir noch eine Antwort schuldig...
    Habe die Funktionen geändert und ausprobiert.
    Alles funktioniert perfekt, danke!


    Gruß,
    Schildus

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!