jQuery – Polaroid Galerie

Mein zweiter Versuch mit jQuery bezog sich jetzt auf eine kleine Bildergalerie in Form von Polaroid Fotos mit einer kleinen Beschriftung am Ende des Bildes. Dabei sollten die Bilder auf der Seite verschoben werden und mit einem Doppelklick vergrößert werden können. Die grafische Darstellung wurde wieder mit ein wenig CSS3 verfeinert (Schlagschatten).

Die Dragfunktion ist hier in einer externen jQuery Erweiterung untergebracht „jQuery UI“ (User Interface), die auch wieder unter der Google API zu finden ist:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js„></script>

Somit konnte einfach ein $(„.polaroid“).draggable({}); angewendet werden um die Bilder verschieben zu können. Alle weiteren Infos können in den Manuals zu jQuery UI gelesen werden. Dort sind auch Beispiele geschrieben.

Hier nun erst einmal das Ergebnis:

Wenn Ihr Fragen, Anmerkungen oder Verbesserungsvorschläge habt könnt Ihr einfach ein Kommentar hinterlassen.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s