GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1

ΜΕΓΕΝΘΥΣΗ ΕΙΚΟΝΩΝ
ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width: 168px; height:105px; Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Αν θέλετε πατώντας κλίκ πάνω στην φωτογραφία να ανοίγει σε νέα καρτέλα απενεργοποιήστε την εμφάνιση φωτογραφιών με το lightbox του blogger ή μην βάζετε και τα 2 link των φωτογραφιών (τα πράσινα και τα μώβ) από το Picassa ή το Google+.



<style type="text/css">
.enlarge{list-style-type:none;margin:0;padding:0;}
.enlarge li{display:inline;}
.enlarge li img{
width: 168px;
height:105px;
border:0;     
margin-right: 0px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; }
.enlarge li img:hover{
-moz-transform:scale(2.0);
-webkit-transform:scale(2.0);
-o-transform:scale(2.0);}
</style>

<ul class="enlarge">
<li><a href="http://i.imgur.com/UMQ2IrD.jpg" target="_blank"><img src="https://lh5.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/w1600-h1000-no/ALONISOS-01.jpg" title="ALONISOS" /></a></li>
<li><a href="http://i.imgur.com/7X4wjWS.jpg" target="_blank"><img src="https://lh5.googleusercontent.com/--XVgaOXi3jE/UhTJsPzQPAI/AAAAAAAAI1U/g0V_CnJpb0E/w1600-h1000-no/KERKYRA-16.jpg" title="KERKYRA" /></a></li>
<li><a href="http://i.imgur.com/DgCJJQe.jpg" target="_blank"><img src="https://lh5.googleusercontent.com/-Wlx9Ii3rPao/Uned84Hf3rI/AAAAAAAAKDc/xb9Rif7AYI4/w1600-h1000-no/SKOPELOS-33.jpg" title="SKOPELOS" /></a></li>
<li><a href="http://i.imgur.com/rcivwQJ.jpg" target="_blank"><img src="https://lh3.googleusercontent.com/-J2-VLHIOGaY/UfEEJCtBiwI/AAAAAAAAIWk/U2ub8rfJXlA/w1600-h1000-no/LEYKADA-24.jpg" title="LEYKADA" /></a></li>
<li><a href="http://i.imgur.com/uFoNudk.jpg" target="_blank"><img src="https://lh5.googleusercontent.com/-64u9VKOcYV8/UnedCfeLTYI/AAAAAAAAKBA/SVKgT_cS5_E/w1600-h1000-no/SIVOTA-12.jpg" title="SIVOTA" /></a></li></ul>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".