Heute will ich euch mein erstes jQuery Tutorial präsentieren. Es soll, wie links zu sehen, die Funktion haben eine “Bilder Wand” anzuzeigen, und diese per Klick ein und auszufahren.

Hier eine kleine Liste zu den Funktionen:

• Nach jedem Reload neue Anordnung, Rotation & Größe der Bilder
• Tranzparentsanimation bei Überfahren der Bilder
• Anzeigen eines Links oder einer Beschreibung beim Überfahren der Bilder
• Draggable Funktion (herumziehen der Bilder mit der Maus)
• Ein- und Ausfahren aller Bilder
• Deaktivierung bei zu wenig Platz

Siehe Demo auf der linken Seite. Getestet mit Safari 5, Opera 10.4, Chrome 4.1 und Firefox 3.x

Download

Bilder-Wall.zip

(enthält: jQuery Framework, jQuery UI, CSS-Transform, Animate-CSS-Transform, Bilder Wall | 37KB)

Installation

1. Ladet die Dateien hoch.
2. Bindet die Dateien in den HEAD-Bereich eures Dokuments ein.

   Code anzeigen

   <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
   <script type="text/javascript" src="jquery.css-transform.js"></script>
   <script type="text/javascript" src="jquery.animate-css-transform.js"></script>
   <script type="text/javascript" src="jquery.bilder-wall.js"></script>

3. Eure Bilder müssen in folgendem Aufbau gebracht werden:

   Code anzeigen

   
   <div id="wallDiv">
   	<div id="walltoggleBtn"></div>
   	<div>
   		<div>
   			//Link oder Beschreibung des Bilds; Wird angezeigt beim überfahren des Bildes
   		</div>
   		<div>
   			//Bild
   		</div>
   	</div>
   	<div>
   		<div>
   			//Link oder Beschreibung des Bilds 2; Wird angezeigt beim überfahren des Bildes
   		</div>
   		<div>
   			//Bild 2
   		</div>
   	</div>
   ...
   </div>
   

4. Fertig!

Anpassen

Wenn der obige Aufbau aus irgend einem Grund nicht möglich ist, könnt Ihr Ihn in der “jquery.bilder-wall.js” bearbeiten, beziehungsweiße anpassen. Öffnet die “jquery.bilder-wall.js” und verändert in den ersten 20 Zeilen die Variablen nach euren Wünschen.

Viel Spaß mit dem Script und vielen Dank für die Hilfe aus dem mediengestalter Forum.

jQuery Image Wall von Moritz Graf steht unter einer Creative Commons Attribution-ShareAlike 3.0 Unported Lizenz.
Beruht auf einem Inhalt unter grafagoggel.de.