nicht angemeldet
Moin,
wollte mein Script noch etwas erweitern und zwar um einen "sanften" Übergang. Ein Beispiel habe ich hier http://photecs.de/kategorie/studio/halterungen-und-klemmen/ die Frage ist nur, wie bekomme ich dieses hin? Gehe mal davon aus, dass ich mit CSS hier nicht allein weiter komme oder?
Vielleicht hat jemand von euch sogar eine fertige Lösung die ich verwenden kann. Meine Datei sieht derzeit so aus:
<script src="jQuery.1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#zeilen').click(function(){
$('section').addClass('zeilenansicht');
$('#zeilen').attr('disabled', 'disabled');
$('#gitter').removeAttr('disabled', 'disabled');
});
$('#gitter').click(function(){
$('section').removeClass('zeilenansicht');
$('#zeilen').removeAttr('disabled', 'disabled');
$('#gitter').attr('disabled', 'disabled');
});
});
</script>
h1 {
margin-left: 1.23em;
}
p {
margin-left: 2.4em;
}
figure {
display: inline-block;
}
figcaption {
display: none;
}
.zeilenansicht figure {
display: block;
padding-top: 20px;
}
.zeilenansicht figcaption {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Test - Seite</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Demo Bilder</h1>
<p>
<button id="gitter" disabled >Gitteransicht</button>
<button id="zeilen">Zeilenansicht</button>
</p>
<section>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das erste Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das zweite Bild</figcaption>
</figure>
<figure>
<img src="http://dummyimage.com/330x400" />
<figcaption>Ich bin eine Beschreibung für das dritte Bild</figcaption>
</figure>
</section>
</body>
</html>
Hier kann es Live getestet werden: http://jsfiddle.net/se44g7p1/
Matthias Apsel
Gunnar Bittersmann
Der Martin
Auge