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.

Advertisements

jQuery – Menü

Logo von jQueryDa ich mich ein wenig mit jQuery auseinander setzen wollte habe ich die CSS Datei von den Border-Tricks verwendet um ein einfach animiertes Menü mit Hilfe von jQuery zu programmieren. Dazu habe ich eine einfach formatiertes Listenmenü (ul li) eingefügt und das jQuery Framework von den GoogleAPIs eingebunden.

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;

Das animierte Menü bin ich dann wie folgt angegangen:

$(document).ready(function(){
$(‚#navigation a‘).hover(function(){
$(this).animate({
width:’75%‘,
padding:’10px‘
},200);
},function(){
$(this).animate({
width:’50%‘,
padding:’5px‘
},200);
});
$(‚#navigation a‘).click(function(){
$(this).animate({width:’100%‘},200)
});
});
Die Menüstruktur sah dabei so aus:
<ul id=“navigation“>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
<li>
<a href=“#“>Link</a>
<div class=“arrow“></div>
</li>
</ul>
Leider gibt es unter WordPress kein Syntaxhilighting aber ich denke man sollte alles erkennen können. Hier nun das Resultat:
 
 
Bei Fragen oder Tipps könnt ihr euch natürlich jederzeit melden.