• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

PHOTO GALLERY ΜΕ SCROLL BAR

PHOTO GALLERY
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 πως θα φαίνεται ακριβώς κάτω από εδώ.





















<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>

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

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

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

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