ΓΕΝΙΚΗ ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ ΕΙΚΟΝΩΝ ΣΕ 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>