jQuery lernen: Enthüllungs-Fotoflider

Auf meiner Reise, um jQuery zu lernen, versuche ich, Dinge zu lernen, die CSS bereits kann, die jQuery aber „sexier“ machen kann. Jonathan Snook hat einen Artikel mit dem Titel „Content Overlay with CSS“, in dem zusätzliche Inhalte in einem bestimmten Bereich enthüllt werden, wenn mit der Maus darüber gefahren wird. Dies hat mich inspiriert, etwas Ähnliches mit jQuery zu versuchen. Mein erster Gedanke war eine Miniaturfoto-Galerie, bei der das Klicken auf eine Schaltfläche das gesamte Foto und weitere Informationen zu diesem Foto enthüllen würde. Hier ist das Ergebnis

Demo ansehen   Dateien herunterladen

Das ist, was passiert, in einfacher Sprache

1. Klickereignis auf der „Mehr Info“-Schaltfläche
2. Zwei Dinge „wachsen“, der gesamte Container und die Div, die das Foto enthält.
3. Die „Mehr Info“-Schaltfläche wird ausgeblendet.
4. Der „Info“-Bereich und die „Schließen“-Schaltfläche werden eingeblendet.

Hier ist das CSS

.photo-area {
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid #666;
	overflow: hidden;
	position: relative;
	margin: 10px;
	background: white;
}
#photo {
	width: 100px;
	height: 100px;
	background: url(images/mthood.jpg) center center;
	margin-bottom: 5px;
}
.info-area {
	opacity: 0.0;
	}
	a.more-info {
		display: block;
		width: 89px;
		height: 26px;
		background: url(images/moreinfo.jpg);
		text-indent: -9999px;
	}
	a.close {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
		width: 20px;
		height: 21px;
		background: url(images/close_button.jpg);
		text-indent: -9999px;
	}

Hier ist das jQuery Javascript

<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){

		$(".more-info").click(function(){
			$(this).parents(".photo-area").animate({ 
					width: "500px",
					height: "470px",
			        borderWidth: "10px"
			      }, 600 );
			
			$(this).fadeOut();
			
			$("#photo").animate({ 
		        width: "500px",
				height: "375px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 1.0,
			      }, 600 );
			});
		
		$(".photo-area .close").click(function(){
			$(this).parents(".photo-area-1").animate({ 
					width: "100px",
					height: "130px",
			        borderWidth: "1px"
			      }, 600 );
			
			$(".more-info").fadeIn();
			
			$("#photo").animate({ 
		        width: "100px",
				height: "100px"
			      }, 600 );
			$(".info-area").animate({ 
		        opacity: 0.0,
			      }, 600 );
			});

		});
	</script>

Obwohl dies gut funktioniert und ich wirklich aufgeregt war, es funktionieren zu sehen, hat es einige Probleme und ernsthafte Einschränkungen.

• Die Größe, auf die sich die `.photo-area` und das `#photo` vergrößern, sind fest im Javascript codiert. Es wäre viel cooler, wenn sie basierend auf der Größe des Bildes wachsen würden. innerWidth?
• Die Art und Weise, wie ich auf Seitenelemente verweise, ist zu universell. Um das zweite Bild zu erstellen, musste ich im Grunde das Javascript kopieren und einfügen und alle Klassen- und ID-Namen ändern, damit es mit dem zweiten funktioniert, ohne das erste zu beeinträchtigen. Es muss einen Weg geben, Eltern/Kinder im Javascript so zu referenzieren, dass dies nur einmal geschrieben werden muss und für jeden `.photo-area` funktioniert.

Ich bin sicher, viele von Ihnen wissen viel mehr über jQuery als ich, also wenn Sie Vorschläge haben, wie dies besser funktionieren kann, bin ich ganz Ohr!