GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

ΓΕΝΙΚΗ ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ ΕΙΚΟΝΩΝ ΣΕ PHOTO GALLERY

PHOTO GALLERY
ΓΕΝΙΚΗ ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ ΕΙΚΟΝΩΝ ΣΕ PHOTO GALLERY
Για να ρυθμίσετε μαζικά όλες τις εικόνες μιάς photo gallery στο ίδιο πλάτος και ύψος θα πρέπει όλες οι εικόνες να είναι μεγαλύτερες από τις διαστάσεις που θέλετε να εμφανίζονται στην photo gallery και φυσικά να έχουν όλες την ίδια αναλογία για να μην δημιουργούνται κενά. 

Εφόσον αυτά συμβαίνουν παίρνετε τα links των εικόνων αυτών και τα βάζετε στη θέση των γαλάζιων και πράσινων links του παρακάτω κώδικα τα οποία από ότι θα παρατηρήσετε δεν έχουν διαστάσεις δίπλα τους γιατί οι διαστάσεις καθορίζονται μέσα στις 3 γραμμές του κώδικα style. Συγκεκριμένα θα αλλάξετε στην 3η γραμμή του κώδικα style τα max-width:150px; και max-height:94px; Ενώ στη 1η και 2η γραμμή ρυθμίζονται οι διαστάσεις και το style του gallery frame. Δείτε πως θα εμφανίζεται η photo gallery ακριβώς κάτω από εδώ.


<style>
#gallery-frame {width:960px;height:500px;margin:0;padding:2px;background:#333;color:#FFF;}
#gallery-display {width:960px;height:500px;margin:0;padding:0;overflow:auto;}
#gallery-display img {max-width:150px;max-height:94px;margin:0;padding:0;}
</style>

<div id="gallery-frame">
<div id="gallery-display">
<a href="http://i.imgbox.com/Qf8ElAbc" target="_blank">
<img src="http://t.imgbox.com/Qf8ElAbc.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/Tbylzrok" target="_blank">
<img src="http://t.imgbox.com/Tbylzrok.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/WW0xLlA4" target="_blank">
<img src="http://t.imgbox.com/WW0xLlA4.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/2cgCqlWA" target="_blank">
<img src="http://t.imgbox.com/2cgCqlWA.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/rjV52stk" target="_blank">
<img src="http://t.imgbox.com/rjV52stk.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/cUc4AdEx" target="_blank">
<img src="http://t.imgbox.com/cUc4AdEx.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/7LoDaM5L" target="_blank">
<img src="http://t.imgbox.com/7LoDaM5L.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/PuiVZ7UX" target="_blank">
<img src="http://t.imgbox.com/PuiVZ7UX.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/x5CNG2Qt" target="_blank">
<img src="http://t.imgbox.com/x5CNG2Qt.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/FOh5Y8Po" target="_blank">
<img src="http://t.imgbox.com/FOh5Y8Po.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/spp4Hd9e" target="_blank">
<img src="http://t.imgbox.com/spp4Hd9e.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/NYaintiI" target="_blank">
<img src="http://t.imgbox.com/NYaintiI.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/f8Hms23V" target="_blank">
<img src="http://t.imgbox.com/f8Hms23V.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/bACYmkOx" target="_blank">
<img src="http://t.imgbox.com/bACYmkOx.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/5ZDT7J4L" target="_blank">
<img src="http://t.imgbox.com/5ZDT7J4L.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/ehQDNsgV" target="_blank">
<img src="http://t.imgbox.com/ehQDNsgV.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/HYGCh1WJ" target="_blank">
<img src="http://t.imgbox.com/HYGCh1WJ.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/Ols1OfnR" target="_blank">
<img src="http://t.imgbox.com/Ols1OfnR.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/B0lkTTil" target="_blank">
<img src="http://t.imgbox.com/B0lkTTil.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/ayyaUKpv" target="_blank">
<img src="http://t.imgbox.com/ayyaUKpv.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/fJnCogAI" target="_blank">
<img src="http://t.imgbox.com/fJnCogAI.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/x4YtqHsG" target="_blank">
<img src="http://t.imgbox.com/x4YtqHsG.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/MIiFeUzy" target="_blank">
<img src="http://t.imgbox.com/MIiFeUzy.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/dhx6QEfD" target="_blank">
<img src="http://t.imgbox.com/dhx6QEfD.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/M9MigOVh" target="_blank">
<img src="http://t.imgbox.com/M9MigOVh.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/PmqgyMDJ" target="_blank">
<img src="http://t.imgbox.com/PmqgyMDJ.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/dTEbNHax" target="_blank">
<img src="http://t.imgbox.com/dTEbNHax.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/hrhb3CQF" target="_blank">
<img src="http://t.imgbox.com/hrhb3CQF.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/fRGLvJyR" target="_blank">
<img src="http://t.imgbox.com/fRGLvJyR.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/Gtdir4jE" target="_blank">
<img src="http://t.imgbox.com/aIbecn93.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/MRitCIPz" target="_blank">
<img src="http://t.imgbox.com/MRitCIPz.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/kVCP59nd" target="_blank">
<img src="http://t.imgbox.com/kVCP59nd.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/qDL8m9d5" target="_blank">
<img src="http://t.imgbox.com/qDL8m9d5.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/6CibblTz" target="_blank">
<img src="http://t.imgbox.com/6CibblTz.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/gg2I0QEd" target="_blank">
<img src="http://t.imgbox.com/gg2I0QEd.jpg" alt="imgbox"/></a>
<a href="http://i.imgbox.com/UHg9hbjc" target="_blank">
<img src="http://t.imgbox.com/UHg9hbjc.jpg" alt="imgbox"/></a>
</div>

</div>

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

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

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.