Eternal...
Mondial Domain (Design by LoW)

Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.


 



• 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]


Membru Level II

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



Vezi profilul utilizatorului

MesajSubiect: Vizualizarea imaginii la marimea initiala intr-un sablon suprapus pe pagina curenta Mar 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
creeaza un forum | © phpBB | Forum gratuit de suport | Contact | Semnaleaza un abuz | Blogratuit.ro