Simpla galerie de imagini

Aceasta este o galerie de imagini foarte simpla şi se bazează pe un script foarte mic care se pot adăuga oriunde pe şablon, de exemplu, înainte de </head>:

<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>

salveaza modificarea,

2. Cauta in sablon linia urmatoare ]]></b:skin> si adauga urmatorul cod clase style:

<style>
div#ejemploGaleria {
background-color: #123;
border: 3px solid #234;
margin: 0 auto;
padding: 10px;
width: 480px;
}
span#imgDescripcion {
color: #ABC;
float: left;
font-size: 18px;
width: 250px;
}
ul#imgListaEjemplo{
float: right;
margin: 0;
}
ul#imgListaEjemplo li {
display: inline;
padding: 0 5px;
}
ul#imgListaEjemplo li a {
font-size: 16px;
}
img#imgContenedor{
margin-top: 10px;
}
</style>

salveaza si aceasta modificare:

3. Ultimul pas intr-o postare noua adauga urmatoarele:

<div id="ejemploGaleria">
<span id="imgDescripcion">TEXT</span>
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagine1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagine2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagine3" title="Esta es la tercera imagen">3</a></li>
</ul>
<img id="imgContenedor" src="URL_imagine_principala" /></div>

inlocuieste url_imagini cu url-ul imaginilor ce doresti sa apara in galerie.

Acesta este un exemplu de galerie de imagini.

Galeríe de imagini

• 1
• 2
• 3