2017 altex.ro

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


5 comentarios:

  1. Salutare! Caut de ceva timp, dar inca nu reusesc sa-mi dau seama unde este problema!
    Vreau sa-mi pun pe blog un Featured Articles, slideshow cu imagini si text din articolele blogului.Sigur stii despre ce vorbesc ca ai mai vazut asa ceva. Banuiesc ca este vorba de un script care trebuie adaptat. Din ce am observat, am gasit ceva pe word press, dar nu este compatibil.

    RăspundețiȘtergere
  2. Buna claudia, un script de word press nu se adapteaza la blogspot, pana nu vad codul html al blogului tau nu ma pot pronunta.

    RăspundețiȘtergere
  3. Ar fi o idee, dar nu exista ceva similar pentru blogspot?
    Daca nu, o sa-ti trimit cumva codul!
    Multumesc

    RăspundețiȘtergere
  4. Nu trebuie sa te complici claudia, posteaza aici in comentariu link-ul blogului tau si o sa il studiez.

    RăspundețiȘtergere
  5. http://wifetotheskillet.blogspot.com

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc