Scattered Polaroids Gallery (Tersebar)

Sebuah flat bergaya Polaroid Galeri di mana item-item (di sini saya gunakan foto) yang tersebar secara acak dalam sebuah wadah (Container). Ketika item tertentu dipilih, ia akan bergerak ke tengah sementara Polaroid yang lain akan membuat ruang dengan berpindah ke sisi. Opsional, item dapat memiliki backface yang akan ditampilkan dengan membalik Polaroid saat mengklik navigasi current.

Malam ini saya ingin berbagi percobaan sebuah galeri kecil dengan Anda. Galeri yang dihasilkan menunjukkan beberapa gambar Polaroid dengan judul, diputar secara acak dan menyebar dalam sebuah wadah. Bila menavigasi gambar, yang sekarang akan dipindahkan ke tengah dan Polaroid yang lain akan berpindah ke sisi. Opsional, kita akan memiliki bagian belakang untuk setiap Polaroid yang dapat dilihat dengan mengklik dot saat navigasi lagi. Indikasi untuk belakang yang sudah ada akan menjadi panah yang diputar pada titik. Setelah dot (Navigation Optional) diklik lagi, dot itu sendiri akan berbalik sehingga Polaroid itu sendiri menampilkan keterangan di bagian belakang.

Kita menggunakan struktur berikut untuk galeri:

<section id="photostack-1" class="photostack photostack-start">
	<div>

		<!-- default Polaroid without backside -->
		<figure>
			<a href="http://goo.gl/Qw3ND4" class="photostack-img">
				<img src="img/1.jpg" alt="img01"/>
			</a>
			<figcaption>
				<h2 class="photostack-title">Serenity Beach</h2>
			</figcaption>
		</figure>

		<!-- Polaroid with backside -->
		<figure>
			<a href="http://goo.gl/fhwlSP" class="photostack-img">
				<img src="img/2.jpg" alt="img02"/>
			</a>
			<figcaption>
				<h2 class="photostack-title">Happy Days</h2>
				<!-- optional backside -->
				<div class="photostack-back">
					<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
				</div>
			</figcaption>
		</figure>

		<!-- Example for different shuffle iteration count -->
		<figure data-shuffle-iteration="3">
			<!-- ... -->
		</figure>

		<!-- Example for a "dummy" Polaroid -->
		<figure data-dummy>
			<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
			<figcaption>
				<h2 class="photostack-title">Lovely Green</h2>
			</figcaption>
		</figure>
		
		<!-- ... -->
	</div>
</section>

Tag pada class="photostack-start" dapat digunakan untuk menampilkan overlay awal pada wadah galeri. Setelah galeri diklik, item akan membuat langkah pertama mereka dan item pertama akan ditampilkan di tengah.

Tag pada class="photostack-back" dapat digunakan untuk memasukkan beberapa info untuk bagian belakang Polaroid.

Tag pada item "dummy" tidak akan menjadi bagian dari galeri yang di lihat. Hal ini dapat berguna dalam kasus di mana hanya sebagian dari koleksi gambar tertentu harus di tampilkan. Bayangkan sebuah artikel tentang perjalanan Anda di mana di setiap bagian Anda menggambarkan lokasi tertentu. Anda akan mengatur item yang tidak relevan sebagai "dummy" dan hanya Polaroid yang spesifik di lokasi tersebut yang dapat di lihat secara rinci. Pada bagian berikutnya Anda akan mengatur set lain pada item "dummy".

Perhatikan bahwa pembungkus utama div diatur dengan lebar dan tinggi 100%, yang berarti bahwa gambar akan tersebar di seluruh wadah. Jika kita ingin membuat gambat menyebarkan di ruang dengan kompak, kita juga bisa mengatur dimensi div yang lebih kecil.

Lihatlah beberapa screenshot dari galeri: