2017

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!

2 comentarios:

  1. Salut Constantin
    Ce se intampla fiindca nu se incarca tema complet si nu pot vedea exemplul oferit de tine pentru aceasta galerie

    RăspundețiȘtergere
  2. Salut Marius, la ce te referi cand spui ca nu se incarca complet? eu am verificat si totul este ok.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc