O galerie simpla cu imangini miniatura

Daca iti place grafica si doresti sa optimizezi cat mai bine spatiul pe blog, poti folosi urmatorul cod JavaScript si CSS, pentru a forma o galerie care include imagini miniaturi si pot fi vizualizate pe rand intr-o alta dimensiune. Vezi exemplul de mai jos:

• 
• 
• 
• 
• 
• 

.
.
.
.
.
.
.
.
.
.
.
.
.
.
Mergi la Desing --> Editati HTML si cauti linia ]]></b:skin> si exact inaintea ei adaugi urmatorul cod CSS.

<style type="text/css">
#gallery { display: none; }
#jgal {padding:0;margin:0;list-style: none; width: 160px; }
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 20px; left: 160px; display: none; }
#jgal li.active img { display: block; width:370px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>

Salveaza modificarile si in continuare cauta tot in sablon linia </head> si deasupra ei adaugi codul JavaScript urmator:

<script type="text/javascript">
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').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('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
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>

Salvezi modificarile si utimul pas, mergi la o postare noua sau intr-o postare unde doresti sa apara galeria de imagini si adaugi codul HTML urmator:

<div style="position:relative;">
<ul id="gallery">
<li><img src="URL_IMAGINE1" alt="" /></li>
<li><img src="URL_IMAGINE2" alt="" /></li>
<li><img src="URL_IMAGINE3" alt="" /></li>
<li><img src="URL_IMAGINE4" alt="" /></li>
<li><img src="URL_IMAGINE5" alt="" /></li>
<li><img src="URL_IMAGINE6" alt="" /></li>
</ul>
</div>

Inlocuiesti URL_IMAGINE1,2,3,4,5,6 cu url-ul imaginilor ce vrei sa apara. SUCCES!