PHOTO GALLERY WITH GENERAL DIMENSION SETTINGS

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