Jump to content

Tutorial Galerie Foto In Html


Recommended Posts

Posted

Pentru a avea o galerie foto, fara a sta sa instalati nici un script gen Coppermine Photo Gallery etc, nu trebuie decat sa copiati codul de mai jos si sa modificati unde este cazul, am indicat in cod pentru incepatori unde trebuie modificat si ce.Totusi, daca nu va descurcati postati si va vom ajuta.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created by PC Troubleshooting -->
<!-- http://pctroubleshooting.ro -->
<head>
<title>Picture Gallery</title>
<!-- CSS-ul pentru pozele thumbnail-->
<style>
body{background-color:}
#small_img{width:290px;height:600px;float:left;overflow:scroll;text-align:center;background-color:06AEFF;}
img {border:none;}
</style>

<script>

/*Puteti sa adaugati mai multe poze*/
var photo = new Array();
photo[0]="IMG_1000.JPG"/*puneti locatia pozei, sau numele pozei daca aceasta se afla in acelasi folder*/
photo[1]="IMG_1001.JPG"
photo[2]="IMG_1002.JPG"
photo[3]="IMG_1003.JPG"
photo[4]="IMG_1004.JPG"
photo[5]="IMG_1005.JPG"




function ff(code)
{
document.images.home.src=photo[code];/*codul din sir este pentru functia ff(#####)numarul de poze din site*/

}
</script>
</head>
<body>
<div id="small_img">
<a href ="#" onclick="ff(0)"><img src="IMG_1000.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="#" onclick="ff(1)"><img src="IMG_1001.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="#" onclick="ff(2)"><img src="IMG_1002.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="#" onclick="ff(3)"><img src="IMG_1003.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="#" onclick="ff(4)"><img src="IMG_1004.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="#" onclick="ff(5)"><img src="IMG_1005.JPG" alt="o mica descriere" height="200"></a><br>
</div>
<div>
<img name="home" src="IMG_1000.JPG" height="600"/><br>
</div>
</body>
</html>[/html]

[color=red][b]*[/b][/color] [b]Pe site-uri gen neogen,freewebs,piczo codul nu functioneaza![/b]

Succes :pct:

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

  • 2 years later...

Posted

Codul urmator ar trebui sa faca exact ceea ce doresti tu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><!-- Created by PC Troubleshooting -->
<!-- http://pctroubleshooting.ro -->
<head>
<title>Picture Gallery</title>
<!-- CSS-ul pentru pozele thumbnail-->
<style>
body{background-color:}
#small_img{width:600px;height:100px;overflow:scroll;text-align:center;background-color:06AEFF;}
img {border:none;}
</style>
<script> /*Puteti sa adaugati mai multe poze*/
var photo = new Array();
photo[0]="IMG_1000.JPG"/*puneti locatia pozei, sau numele pozei daca aceasta se afla in acelasi folder*/
photo[1]="IMG_1001.JPG"
photo[2]="IMG_1002.JPG"
photo[3]="IMG_1003.JPG"
photo[4]="IMG_1004.JPG"
photo[5]="IMG_1005.JPG"
function ff(code) { document.images.home.src=photo[code];/*codul din sir este pentru functia ff(#####)numarul de poze din site*/ }
</script>
</head>
<body>

<div align="center"><img name="home" src="IMG_1000.JPG" height="600"/>
<div id="small_img"><a href ="#" onClick="ff(0)"><img src="IMG_1000.JPG" alt="o mica descriere" height="100"></a>
<a href ="#" onClick="ff(1)"><img src="IMG_1001.JPG" alt="o mica descriere" height="100"></a><a href ="#" onClick="ff(2)"><img src="IMG_1002.JPG" alt="o mica descriere" height="100"></a><a href ="#" onClick="ff(3)"><img src="IMG_1003.JPG" alt="o mica descriere" height="100"></a><a href ="#" onClick="ff(4)"><img src="IMG_1004.JPG" alt="o mica descriere" height="100"></a><a href ="#" onClick="ff(5)"><img src="IMG_1005.JPG" alt="o mica descriere" height="100"></a>
</div>
</div>
</body>
</html>[/code]

Succes :pct2: !

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

  • 9 months later...
Posted

Ceva de genul ar trebui sa te ajute:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
<!-- Created by PC Troubleshooting -->
<!-- http://pctroubleshooting.ro -->
<head>
<title>Picture Gallery</title>
<!-- CSS-ul pentru pozele thumbnail-->
<style>
body{background-color:}
#small_img{width:290px;height:600px;float:left;overflow:scroll;text-align:center;background-color:06AEFF;}
img {border:none;}
</style>
</head>
<body>
<div id="small_img">
<a href ="IMG_1000.JPG" target="_blank"><img src="IMG_1000.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="IMG_1001.JPG" target="_blank"><img src="IMG_1001.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="IMG_1002.JPG" target="_blank"><img src="IMG_1002.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="IMG_1003.JPG" target="_blank"><img src="IMG_1003.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="IMG_1004.JPG" target="_blank"><img src="IMG_1004.JPG" alt="o mica descriere" height="200"></a><br>
<a href ="IMG_1005.JPG" target="_blank"><img src="IMG_1005.JPG" alt="o mica descriere" height="200"></a><br>
</div>
</body>
</html>

[/code]

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

  • 1 year later...
Posted

ceva de genul dar cand dau click pe poza mica sa-mi apara o poza mare, insa sa nu se vada poza mare fara sa dai click pe eca mica

Am gasit asta si sper sa reusesc sa o fac

  • 5 months later...
Posted

Codul postat mai sus (in primul post) este de fapt o pagina HTML, care contine o galerie foto.

Daca citesti codul, ar trebui sa iti dai seama ce trebuie sa faci. Daca tot ti se pare complicat, uite cateva explicatii:

 

Copiaza tot codul intr-un document notepad, si salveaza-l cu extensia .html, astfel, vei obtine o pagina HTML cu galeria foto. Dupa aceea, editeaza fisierul proaspat creat (pagina html), tot cu notepad, si in loc de IMG_1000.JPG (vezi ca o gasesti in doua locuri), pui locatia imaginii pe care o doresti afisata in galerie. Mai exact, daca imaginea se afla pe site-ul tau la adresa: www.site-ul_tau.ro/imagini/poza-nuferi-salbatici.png, treci aceasta legatura in loc de IMG_1000.JPG, si, asa faci cu toate.

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.