HTML Vorschaubilder als großen Bild auf gleicher Seite öffnen

r_geier

Newbie
Registriert
März 2009
Beiträge
6
Moin zusammen,

Ich würde gerne auf einer Website Bilder präsentieren.
Dazu soll folgendes Layout benutzt werden:
Website Layout.png
Wenn ein Miniaturbild angeklickt wird, soll auf der gleichen Seite dieses Bild in groß auf dem Platz vom Hauptbild angezeigt werden.
Der entsprechende Text zum Bild soll rechts davon angezeigt werden und ebenfalls wechseln.
Die Links zu den Bildern, und er passende Text sind in einer MySQL-Datenbank hinterlegt.

Nun die Frage: Wie lässt sich das am simpelsten, aber trotzdem hübsch bewerkstelligen? JQuery? HTML5? Wie sähe die Logik dahinter aus?

Am liebsten wäre mir HTML5, bin aber für alles offen.

Vielen Dank im vorraus!
 
jQuery kann dir eine Menge Arbeit ersparen. Ohne JavaScript lässt sich das vorhaben nur schlecht realisieren. Außerdem bleibt dann das neu laden der gesamten Website aus.

Die Umsetzung hängt jedoch entscheidend davon ab, ob du bei einer festen Anzahl von Bildern bleibst, oder ob dein Layout auch für mehr Bilder funktionieren soll.
Die Grundidee wäre, dass du beim Klick auf die Miniaturbilder eine Funktion ausführst, die das Hauptbild ersetzt. Mit jQuery ist das selektieren der einzelnen Elemente etwas einfacher, als mit reinem JavaScript. Links und die Bildbeschreibung kannst du dir auf unterschiedliche Weise besorgen. Du könntest diese z.B. beim Laden der Seite mit Python, oder PHP aus der Datenbank holen und als JSON übergeben. Dann kannst du beim umschalten der Bilder darauf zugreifen und musst nicht jedes Mal ein PHP- bzw. Python-Script aufrufen.
 
Vielen Dank schonmal,

die Sache ist, es soll mehrere Unterkategorieren geben. Darin jeweils das entsprechende Layout.
Die Anzahl an Miniaturbilder kann stark schwanken. Es muss also für für eine Variable Anzahl an Bildern klappen.

Auch sollte das ganze dynamisch aufgebaut sein, sprich wenn die Datenbank in einer Unterkategorie um ein Bild ergänzt wird,
sollte sich das Layout dementsprechend anpassen.

Du sagst also jQuery wäre die beste Wahl? Ich hab von einem Bekannten gehört, dass jQuery Perfomanceschwierigkeiten hat, gerade beim ersten Laden der Seite. Allerdings ist diese Information auch schon ein paar Jahre alt. Ist da was dran?
 
Das mit der Geschwindigkeit hat sich in den letzten zwei Jahren meiner Meinung nach gebessert, wobei AngularJS noch flotter ist.
 
Hier geht es um eine sehr minimalistische Website und um keine riesige Webapp. jQuery reicht somit von der Performance voll aus. Angular hat durchaus viele Vorteile, aber ich schätze den Einarbeitungsaufwand viel höher ein, als bei jQuery. Es hängt jedoch von dem Vorwissen ab. Als C++- oder Java-Programmierer (mit GUI Erfahrung) kann man sich wahrscheinlich ganz gut in Angular einarbeiten. Ohne etwas Erfahrung überfordert einem sehr wahrscheinlich das zugrunde liegende Konzept.

Ein dynamisches anpassen des Layout ist mit dem CSS-Framework Bootstrap kein Problem. Dort kann man dem Div mit dem Vorschaubild die Klassen "col-xs-3, col-md-2" geben, wodurch 6 (bzw. 4) Vorschaubilder ein einer Zeile angezeigt werden. Ist eine Zeile voll, dann geht es einfach in der nächsten weiter.
 
Blöde Frage:
Wenn Ihr schon bei Geschwindigkeit seid:
Wie lädst du die Bilder überhaupt? Hast du verschiedene Größen der Bilder abgespeichert? Wie viele Bilder werden max. geladen? Hast du überhaupt schon ne Connection zur DB? etc. etc.

Wenn du sowieso alles quasi "statisch" als HTML ausgibst mit allen Bildern etc., tuts auch n 0815 Slider wie der hier:
http://kenwheeler.github.io/slick/
 
wenn du eine bilder galaerie hat ist das laden von JQ dein geringstes problem. Die komprimierte version ist ja gerade mal 85kb groß und wird anschließend im cache behalten (hat mir schon so manchesmal ärger verursacht).

Wäre wirklich hilfreich wenn du uns mal zeigst was du schon hast. Z.b. das script welches dir die Seite überhaupt erzeugt. Ansonsten google nach "jQuery picture gallery" da findest du einige hundert und kannst dir die beste für dich raussuchen, man muss das Rad ja nicht jedesmal neu erfinden ;)
Manche von denen bauen dir die galerie auch on the fly, je nachdem welche daten du dem scriopt zur verfügung stellst.
 
Zuletzt bearbeitet:
Zurück
Oben