PHOTO GALLERY ΜΕ SCROLL BAR

PHOTO GALLERY ΜΕ SCROLL BAR

Με τον παρακάτω κώδικα μπορείτε να βάλετε μια photo gallery μεσα στην ανάρτησή σας ή στη σελίδα σας ή απλά σαν gadget σε όποιο μέρος του ιστολογίου σας θέλετε αρκεί να προσαρμόσετε τις διαστάσεις της. Το 1^ο width: 960px; είναι το πλάτος ανάρτησης που διαθέτετε. Τα υπόλοιπα height:360px;width:190px; είναι το ύψος και το πλάτος για την κάθε photo gallery ξεχωριστά. Τα γαλάζια και πράσινα links των εικόνων πρέπει να τα αντικαταστήσετε με τα δικά σας.

Στα πράσινα links να προσθέσετε και διαστάσεις όπως έχω προσθέσει στην πρώτη photo gallery αμέσως μετά τα πράσινα links εκεί που γράφει width:160px; height:100px; Αυτό θα σας χρειαστεί στην περίπτωση που οι φωτογραφίες σας δεν έχουν ενσωματωμένες τις διαστάσεις μέσα στο url τους όπως έχουν οι δικές μου που είναι από το imgur.com το οποίο προσφέρει 6 διαφορετικές διαστάσεις για μικρότερο μέγεθος με μία απλή προσθήκη ενός γράμματος στο τέλος του link της εικόνας. Το s = 90X90, το b = 160X160, το t = 160 πλάτος Χ αναλογικό ύψος, το m = 320 X αναλογικό ύψος, το l = 640 X αναλογικό ύψος, το h = 1024 X  αναλογικό ύψος. Δείτε την photo gallery πως θα φαίνεται ακριβώς κάτω από εδώ. ▼

▲ SAMOS ▲ SAMOS ▲ ASYPALAIA ▲ ASTYPALAIA ▲ ALONNISOS ▲ AIDIPSOS ▲ ITHAKI

▲ KRITI ▲ LEYKADA ▲ LEYKADA ▲ LEYKADA ▲ LEYKADA ▲ LEYKADA ▲ CORFU

▲ AIGINA ▲ ANAFI ▲ POROS ▲ POROS ▲ SANTORINI ▲ SANTORINI ▲ SANTORINI

▲ KERKYRA ▲ KRITI ▲ KRITI ▲ KARPATHOS ▲ SYROS ▲ MYKONOS ▲ ZAKYNTHOS

▲ KEFALONIA ▲ KEFALONIA ▲ MONEMVASIA ▲ MILOS ▲ RODOS ▲ SANTORINI ▲ SIVOTA

<div style="width: 960px;">

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">

<a href="http://i.imgbox.com/9dP2HvKB" target="_blank"><img src="http://i.imgur.com/ykZzT5Ot.jpg" width:160px; height:100px;/>▲ SAMOS</a>

<a href="http://i.imgbox.com/3XWi0jnI" target="_blank"><img src="http://i.imgur.com/XZLp5MAt.jpg" width:160px; height:100px;/>▲ SAMOS</a>

<a href="http://i.imgbox.com/E8TQuoGj" target="_blank"><img src="http://i.imgur.com/uLrZapxt.jpg"/>▲ ASYPALAIA</a>

<a href="http://i.imgbox.com/x39wFzp0" target="_blank"><img src="http://i.imgur.com/YCL3P4vt.jpg"/>▲ ASTYPALAIA</a>

<a href="http://i.imgbox.com/6IruqU66" target="_blank"><img src="http://i.imgur.com/9GqSG9at.jpg"/>▲ ALONNISOS</a>

<a href="http://i.imgbox.com/vZMmzLkI" target="_blank"><img src="http://i.imgur.com/GwVdj0Ut.jpg"/>▲ AIDIPSOS</a>

<a href="http://i.imgbox.com/ZpvJrjg4" target="_blank"><img src="http://i.imgur.com/JcRaeRSt.jpg"/>▲ ITHAKI</a>

</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">

<a href="http://i.imgbox.com/kV04fIoO" target="_blank"><img src="http://i.imgur.com/gptb8xnt.jpg"/>▲ KRITI</a>

<a href="http://i.imgbox.com/MIiFeUzy" target="_blank"><img src="http://i.imgur.com/gCr4ycDt.jpg"/>▲ LEYKADA</a>

<a href="http://i.imgbox.com/PmqgyMDJ" target="_blank"><img src="http://i.imgur.com/pyL40yft.jpg"/>▲ LEYKADA</a>

<a href="http://i.imgbox.com/Nvd7I6cH" target="_blank"><img src="http://i.imgur.com/WeZKATzt.jpg"/>▲ LEYKADA</a>

<a href="http://i.imgbox.com/7XbHpOTN" target="_blank"><img src="http://i.imgur.com/W09tTTEt.jpg"/>▲ LEYKADA</a>

<a href="http://i.imgbox.com/z5ZhbY0q" target="_blank"><img src="http://i.imgur.com/RefXdO6t.jpg"/>▲ LEYKADA</a>

<a href="http://i.imgbox.com/CXGR0wf1" target="_blank"><img src="http://i.imgur.com/wzBRWddt.jpg"/>▲ CORFU</a> 

</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">

<a href="http://i.imgbox.com/vUYYuGhI" target="_blank"><img src="http://i.imgur.com/c9oYxTHt.jpg"/>▲ AIGINA</a>

<a href="http://i.imgbox.com/uSg2JzVi" target="_blank"><img src="http://i.imgur.com/h6tthMot.jpg"/>▲ ANAFI</a>

<a href="http://i.imgbox.com/kuNHeoxC" target="_blank"><img src="http://i.imgur.com/R29XOCZt.jpg"/>▲ POROS</a>

<a href="http://i.imgbox.com/V6XAirZ2" target="_blank"><img src="http://i.imgur.com/n5IesXRt.jpg"/>▲ POROS</a>

<a href="http://i.imgbox.com/Rct5R9mV" target="_blank"><img src="http://i.imgur.com/SE7KOHst.jpg"/>▲ SANTORINI</a>

<a href="http://i.imgbox.com/oAmPVZ8O" target="_blank"><img src="http://i.imgur.com/KwuI9Z2t.jpg"/>▲ SANTORINI</a>

<a href="http://i.imgbox.com/SrKdznto" target="_blank"><img src="http://i.imgur.com/AunBy7at.jpg"/>▲ SANTORINI</a>

</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">

<a href="http://i.imgbox.com/x4YtqHsG" target="_blank"><img src="http://i.imgur.com/Pq9Dexat.jpg"/>▲ KERKYRA</a>

<a href="http://i.imgbox.com/7qUpZcPW" target="_blank"><img src="http://i.imgur.com/uAMMFyit.jpg"/>▲ KRITI</a>

<a href="http://i.imgbox.com/dyM6m3zW" target="_blank"><img src="http://i.imgur.com/RyX6tl4t.jpg"/>▲ KRITI</a>

<a href="http://i.imgbox.com/R6GYEpSU" target="_blank"><img src="http://i.imgur.com/qMMDdhYt.jpg"/>▲ KARPATHOS</a>

<a href="http://i.imgbox.com/LUt5RX51" target="_blank"><img src="http://i.imgur.com/3sNGgkut.jpg"/>▲ SYROS</a>

<a href="http://i.imgbox.com/JwHSht5d" target="_blank"><img src="http://i.imgur.com/C83SL17t.jpg"/>▲ MYKONOS</a>

<a href="http://i.imgbox.com/HwIiXvNX.jpg" target="_blank"><img src="http://i.imgur.com/I9SFA0st.jpg"/>▲ ZAKYNTHOS</a>

</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">

<a href="http://i.imgbox.com/4jvkDVTA" target="_blank"><img src="http://i.imgur.com/XMS6PHst.jpg"/>▲ KEFALONIA</a>

<a href="http://i.imgbox.com/efSM91gc" target="_blank"><img src="http://i.imgur.com/zcIUR7Lt.jpg"/>▲ KEFALONIA</a>

<a href="http://i.imgbox.com/InTTRRkC" target="_blank"><img src="http://i.imgur.com/loTsDgRt.jpg"/>▲ MONEMVASIA</a>

<a href="http://i.imgbox.com/6CibblTz" target="_blank"><img src="http://i.imgur.com/w9qsfyQt.jpg"/>▲ MILOS</a>

<a href="http://i.imgbox.com/rMcsofyY" target="_blank"><img src="http://i.imgur.com/xHwALvDt.jpg"/>▲ RODOS</a>

<a href="http://i.imgbox.com/IogT1Dv6" target="_blank"><img src="http://i.imgur.com/ADKyUh1t.jpg"/>▲ SANTORINI</a>

<a href="http://i.imgbox.com/0Bkv5X68" target="_blank"><img src="http://i.imgur.com/uFoNudkt.jpg"/>▲ SIVOTA</a>

</div></div>