Se afișează postările cu eticheta Imagini. Afișați toate postările
Se afișează postările cu eticheta Imagini. Afișați toate postările

duminică, 30 ianuarie 2011

Poze cu efect Lightbox automat pe Blogger - blogspot

In primul rand, daca nu stiti ce este efectul Lightbox, dati clic pe imaginea din aceasta postare si veti vedea despre ce este vorba.

Dupa cum stiti, la un blog pozele sunt foarte importante, de aceea v-am prezentat deja cateva efecte pentru a le pune in evidenta. A venit acum si randul efectului Lightbox pentru a fi prezentat.




Sunt multe tutoriale pe net despre efectul Lightbox, dar toate implica adaugarea la codul pozei a atributului rel="lightbox". Insa, aceste coduri gasite aici, fac ca acest atribut sa nu mai fie necesar. Scriptul face toata treaba si din fericire functioneaza si pe sabloanele descarcate de pe net dar si pe cele create cu ajutorul designerului de sabloane de la blogger.

miercuri, 7 aprilie 2010

Efect de reflexie si perspectiva la pozele de pe Blogger

Pozele ocupa un loc important intr-un blog, ele intregind articolul si clarificand referirea blogerului la un anumit subiect.
Toate blogurile afiseaza imaginile la fel, in modul clasic. Dar daca vreti ca pozele voastre sa aiba un aspect mai deosebit, un efect care sa le puna in evidenta? Atunci ne folosim de scripturi externe pentru a face asta.
De curand v-am prezentat un script care poate da pozei un aspect de polaroid cu umbra, iar astazi va voi prezenta un script care da pozelor un efect de reflexie si de vedere in perspectiva.

Demo



Instalarea scriptului reflex.js - grad de dificultate usoara spre medie
Pentru ca efectul sa fie aplicat pozelor trebuie sa urmam 2 pasi:

Pasul 1. Intrati la Aspect --> Editati html si cu ajutorul combinatiei de taste Ctrl+F cautati acest cod:
</head>
Dupa ce l-ati gasit, copiati codul de mai jos inaintea lui:
<script src='http://efect-reflex.googlecode.com/files/reflex.js' type='text/javascript'/>
Dupa ce l-ati adaugat puteti salva sablonul pentru ca aceasta este singura interventie pe care o veti face in codul sablonului.

vineri, 19 martie 2010

Poze pe Blogger cu efect polaroid si umbra (instant.js)

Daca aveti un blog foto si vreti ca pozele pe care le postati pe blog sa aiba un aspect mai deosebit atunci acest script este unul care face ca imaginile voastre sa aiba un aspect de poza polaroid cu umbra si o mica curbare, dandu-le un aspect 3D.

Vezi poza de mai jos.




Pentru a instala acest script trebuie sa mergeti la Aspect --> Editati html, sa faceti o copie a sablonului actual pentru eventualitatea in care lucrurile merg prost si sa cautati cu ajutorul combinatiei de taste Ctrl+F, tagul:

</head>

Dupa ce l-ati gasit, copiati codul de mai jos inaintea lui:

<script src='http://efect-polaroid.googlecode.com/files/instant.js' type='text/javascript'/>

duminică, 13 septembrie 2009

Image Magnify - Zoom pe pozele din Blogger

La cererea Loredanei va prezint un script JavaScript care face poza sa se mareasca de 3 ori atunci cand cineva da clic pe ea.
Scriptul este unul foarte usor de instalat si este preluat de pe site-ul Dynamic Drive.

Din nou am sa va rog sa va hostati singuri scripturile pentru a nu risca sa ramaneti fara latime de banda si sa nu mai functioneze. Pentru a vedea cum sa va hostati singuri scripturile JavaScript cititi acest tutorial facut de mine.

Peteti vedea scriptul in actiune dand clic pe poza de mai jos.


Instalare script

Urmati calea Aspect --> Editati html si gasiti urmatorul cod (foloti Ctrl+F):

</head>

Dupa ce l-ati gasit chiar inainte de el copiati codul de mai jos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sites.google.com/site/myfilesdan/jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Apoi salvati sablonul.

Acum, pentru ca scriptul sa functioneze trebuie sa umblam la codul html al fiecarei poze pe care o punem in postarea noastra.
Atentie: Codul nu functioneaza la imaginile care au atribuit un link.

Codul unei imagini fara link asa cum ne trebuie noua arata cam asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" style="width:200px; height:150px" />

Pentru ca imaginea sa se mareasca trebuie sa adaugam acest atribut Css  class="magnify" la codul imaginii.

Codul va arata asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" class="magnify" style="width:200px; height:150px" />

Metoda de mai sus este pentru pozele care nu sunt adaugate prin metoda pusa la dispozitie de Blogger. Pentru ca scriptul sa functioneze si la pozele adaugate prin metoda Inserati imagine trebuie sa facem niste modificari si la acest cod.

Daca va uitati la codul unei imagini adaugate astfel el arata cam asa:

<a href="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s1600-h/Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" /></a>


In prima faza trebuie sa scoatem link-ul imaginii. Faceti codul sa arate asa:

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" />

Acum adaugatii atributul Css  class="magnify":

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" class="magnify" />

Acum cand reveniti in modul normal de editare a textului pozitionati imaginea in ce parte doriti.
Publicati postarea si vedeti daca scriptul functioneaza.