Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.


 
AcasaAcasa  CăutareCăutare  ÎnregistrareÎnregistrare  ConectareConectare  



• Regula 1.
• Regula 2.
• Regula 3.
• Regula 4.
• Regula 5.






Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta

Membru-LZ: Baietel[MD]

Baietel[MD]
Membru Level II

Posts Posts : 394
Birthday Birthday : 03/03/1997
Age Age : 25
Location Location : Republic Of Moldova (Chisinau)
Job/hobbies Job/hobbies : Web-Master,School
Humor Humor : Gou Gou Gou !

Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta Empty



Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta Empty
MesajSubiect: Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta EmptyMar Mar 15, 2011 12:10 am

Descriere:

Lightbox JS este un script simplu, discret utilizat pentru imagini suprapuse pe pagina curenta.
Se instaleaza repede si functioneaza pe toate browserele moderne.



Beneficile utiliarii:

Mentine
utilizatorii pe aceasi pagina, acestia avand posibilitatea de a da
click pe imagine pentru a o putea vizualiza la marimea initiala intr-un
elegant sablon ce poate fi inchis apasand pe un buton, utilizatorul
revenind la pagina initiala.



Utilizare:

Includeti fisierul JS in header.


Cod:
<script type="text/javascript" src="http://www.huddletogether.com/projects/lightbox/lightbox.js"></script>

Adaugati
rel="lightbox" fiecarui link ce este inserat unei imagini:

Cod:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>



Personalizare:

Puteti folosi CSS pentru a personaliza sablonul in care este incadrata imaginea.
Exemplu:


Cod:

#lightbox{
  background-color:#eee;
  padding: 10px;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
  }
#lightboxDetails{
  font-size: 0.8em;
  padding-top: 0.4em;
  } 
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

Pentru a crea efectul de "umbra" sunteti nevoit sa folositi o imagine in format PNG si un cod CSS suplimentar.
CSS-ul
este putin dezordonat datorita suportului de proasta calitate ce il
ofera IE pentru transparenta PNG. (aceasta problema nu apare si la
browserele moderne precum Mozila Firefox, Google Chrome s.a.m.d.)



Cod:
#overlay{ background-image: url(overlay.png); }

* html #overlay{
  background-color: #000;
  background-color: transparent;
  background-image: url(blank.gif);
 
  filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.huddletogether.com/projects/lightbox/overlay.png",
 sizingMethod="scale");
  }

sursa: http://www.huddletogether.com
Tradus si adaptat de AGent
















Admin Panel
Design and coded by eTn Team
Creati un forum | © phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente