Φτιάχνοντας ένα thumbnail wall gallery στο blogger

Μήπως είδατε το wall gallery στην ανάρτηση Παράθυρα με θέα θάλασσα; Με παίδεψε τόσο πολύ να το φτιάξω που αποφάσισα να μοιραστώ σήμερα μαζί σας τη διαδικασία και τον κώδικα που χρησιμοποίησα! Μπορείτε να φτιάξετε το δικό σας αντίστοιχο wall gallery και να το βάλετε σε post, page, widget ακόμα και σε οποιοδήποτε σημείο θέλετε στο blog σας! 

Πάμε να δούμε λοιπόν:

Βήμα 1:

Αφού κάνουμε το κλασσικό και απαραίτητο backup μας, βρίσκουμε το < /head> (χωρίς το κενό μετά το <) και κάνουμε paste τον παρακάτω κώδικα ακριβώς από κάτω.

	<style type='text/css'>
	#image-gallery { display: none; }
	#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
	#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
	#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
	#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
	#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
	#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}
	</style>

view raw gistfile1.txt hosted with ❤ by GitHub

Βήμα 2:
Ακριβώς πάνω από το ίδιο < /head> κάνουμε paste τον παρακάτω κώδικα.

	<script type='text/javascript'>
	//<![CDATA[
	var gal = {
	init : function() {
	if (!document.getElementById || !document.createElement || !document.appendChild) return false;
	if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
	var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
	li[0].className = 'active';
	for (i=0; i<li.length; i++) {
	li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
	li[i].title = li[i].getElementsByTagName('img')[0].alt;
	gal.addEvent(li[i],'click',function() {
	var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
	for (j=0; j<im.length; j++) {
	im[j].className = '';
	}
	this.className = 'active';
	document.getElementById('gallery-caption').innerHTML = this.title;
	});
	}
	},
	addEvent : function(obj, type, fn) {
	if (obj.addEventListener) {
	obj.addEventListener(type, fn, false);
	}
	else if (obj.attachEvent) {
	obj["e"+type+fn] = fn;
	obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
	obj.attachEvent("on"+type, obj[type+fn]);
	}
	}
	}
	gal.addEvent(window,'load', function() {
	gal.init();
	});
	//]]>
	</script>

view raw gistfile1.txt hosted with ❤ by GitHub

Βήμα 3:

Τέλος αφού κάνετε save το template σας, εκεί που πλέον θέλετε να εμφανίζεται το wall gallery σε μορφή html κάντε paste τον παρακάτω κώδικα.

	<div style="position:relative;">
	<ul id="image-gallery">
	<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
	<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
	<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
	<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
	<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
	</ul>
	</div>

view raw gistfile1.txt hosted with ❤ by GitHub

Όπου page-URL θα βάλετε το link προς την πηγή της φωτογραφίας σας και όπου IMAGE-URL θα βάλετε το link προς τη φωτογραφία σας.

Ελπίζω να σας φανεί χρήσιμο το tutorial που παρεμπιπτόντως εννοείται ότι δεν έγραψα μόνη μου αλλά προσάρμοσα από τα στοιχεία που βρήκα εδώ! Αν φτιάξετε κάτι θα χαρώ να μου βάλετε το link στα σχόλια για να σας θαυμάσω! Αν σας άρεσε και θέλετε και άλλα tutorial για να βελτιώσετε την εμφάνιση του blog σας, ρίξτε μια ματιά εδώ!

Καλή εβδομάδα!