Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Lightbox image viewer ( preview zoom ) JavaSCRIPT


Navigare :: Javascript/Jquery
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Lightbox image viewer ( preview zoom ) JavaSCRIPT Vin 23 Apr 2010 - 23:21

Salutare Vizitator, in acest tutorial iti pun la dispozitie un script. Ce face acest script ? Mareste imaginea la dimensiunea ei normala atunci cand dai click pe ea.
Pentru a intelege mai bine despre ce este vorba priveste aici o demonstratie: http://j.mp/Lightbox_image_viewer .

Bun, acum hai Vizitator sa-ti explic cum il pui la tine pe site, blog sau forum.

Pentru inceput descarca arhiva asta, dezarhiveaza si apoi uploadeaza documentul js pe un host propriu: lightbox.zip.
Dupa ce ai uploadat documentul js copie link-ul si trecel aici, in spatiu indicat
Apoi acest cod il pui in sursa pagini web intre tagurile <body> si </body>.
Cod:
<script type="text/javascript" src="LINK-ul Documentului JS"></script>
Iar acest cod css il pui intre tagurile <head> si </head>:
Cod:

<style type="text/css">
#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; }
#closeButton{ top: 5px; right: 5px; }

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

#overlay{ background-image: url(http://i65.servimg.com/u/f65/14/45/99/41/overla10.png); }

* html #overlay{
   background-color: #333;
   back\ground-color: transparent;
   background-image: url();
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://i65.servimg.com/u/f65/14/45/99/41/overla10.png", sizingMethod="scale");
   }
</style>

Iar pentru afisarea imaginilor foloseste acest cod html:
Cod:
<a href="LINK Imagine" rel="lightbox" title="Descriere Imagine"><img src="LINK Imagine" border="0" width="100" height="100" /></a>


Acum, daca esti una din persoanele care ai forum facut pe forumgratuit si doresti ca acest script sa fie functional in intreg forumul, folosind in topicuri doar cod-ul html pentru afiseara imaginilor, trebuie sa pui cod-ul documentului js de mai sus intr-unul din templateurile forumului sau widgeturi care apar pe toate paginile forumului. Iar cod-ul css il treci in foaia de stil css al forumului fara tagurile de la inceput si de la sfarsit, adica asta <style type="text/css"> si </style>



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu