ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 1

ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 1

Το παρακάτω carousel slideshow εμφανίζει τις εικόνες του καθέτως αντί οριζοντίως όπως συνήθως. Το πλάτος και το ύψος των εικόνων του είναι 160px; και 100px; αντίστοιχα και αλλάζει στην 4^η γραμμή από το τέλος του κώδικα style. Το συνολικό πλάτος και ύψος του slideshow είναι 180px; και 550px; αντίστοιχα και αλλάζει στην 1^η  ,11^η, και 12^η γραμμή του κώδικα style. Ο αριθμός των εικόνων που θα αλλάζουν σε κάθε πέρασμα του slideshow αλλάζει στο 4^ο script και είναι χρωματισμένος με κίτρινο χρώμα (itemstodisplay: 4,). 

Τα γαλάζια linksείναι για να προβάλουν τις εικόνες στο αρχικό τους μέγεθος και τα πράσινα linksείναι για τις εικόνες σε μικροφραφία που περιέχονται στο slideshow. Δείτε το σε λειτουργία ακριβώς κάτω από εδώ ▼.

KERKYRA

PAXOI

LEYKADA

ITHAKI

KEFALLONIA

ZAKYNTHOS

SKOPELOS

ALONNISOS

SKIATHOS

SKYROS

AIDIPSOS

MYKONOS

ASTYPALAIA

SYROS

MILOS

SANTORINI

<script>

$(document).ready(function() {

$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });});

</script>

<script src="https://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="https://github-codes.github.io/mycodes/javascripts/jsCarousel-2.0.0.js" type="text/javascript"></script>

<script>

$(document).ready(function() {

$('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 4, orientation: 'v' });});      

</script>

<style>

.jscarousal-vertical{width: 180px;height: 550px;background:#115599;border:solid 1px #00cc00;margin:0;padding:0;position: relative;overflow: hidden;}

.jscarousal-vertical-back, .jscarousal-vertical-forward{width: 100%;height:15px;background:#333333;color:#FFFFFF; position:relative;cursor:pointer;z-index:100;}

.jscarousal-vertical-back{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFad8qUFzfMj2pVHAYWDL4pv5ZDNuVHxSSgpTNS4WWpwvc2bF7OMg1Jmab9XXGtU-2yj8JEY-zHWdnyF87nFIUWsKVQly5JdgZsbohlRkaZTeZoI2FxBxsFOk9OJYRQEcRiGH-TgJ6c1k/98-h15-no/top_arrow.jpg);background-repeat: no-repeat;background-position: bottom;}

.jscarousal-vertical-forward{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDW3L2O551Oasu3R1JUBd0yvdkbkdUJFgRx1y7oFFAXkBVMhzmyvFikbMDmsBgo2u2ZkUEAxDpFoiT8L8dxNxpjHX1Hv7c34cTL67OxEYYnQ4cIpOeaQaRZodyY-51gM4afpD7oqoy1Vv/98-h15-no/bottom_arrow.jpg);background-repeat: no-repeat;background-position: top;}

.jscarousal-contents-vertical{overflow: hidden;width:180px;height: 520px;}

.jscarousal-contents-vertical > div{position: absolute;top:5px;width:100%;height:550px;overflow: hidden;}

.jscarousal-contents-vertical > div > div{width:160px;height:100px;margin-top:25px;margin-left:10px;}

.jscarousal-contents-vertical > div > div span{display:block;width:100%;text-align:left;}

.jscarousal-contents-vertical img{width:160px;height:100px;border:solid 1px #00cc00;}

.thumbnail-text{color:#FFFFFF;font:12px Arial;text-align:left;display:block;padding:5px;}

.hidden{display: none;}

.visible{display: block;}

</style>

<div id="contents">        

<div id="carouselv">

<div><a href="https://i.imgbox.com/x4YtqHsG" target="_blank">

<img alt="KERKYRA" src="https://i.imgur.com/Pq9Dexat.jpg" /></a><br />

<span class="thumbnail-text">KERKYRA</span></div>

<div><a href="https://i.imgur.com/kbCkBYe.jpg" target="_blank">

<img alt="PAXOI" src="https://i.imgur.com/kbCkBYet.jpg" /></a><br />

<span class="thumbnail-text">PAXOI</span></div>

<div><a href="https://i.imgur.com/gCr4ycD.jpg" target="_blank">

<img alt="LEYKADA" src="https://i.imgur.com/gCr4ycDt.jpg" /></a><br />

<span class="thumbnail-text">LEYKADA</span></div>

<div><a href="https://i.imgur.com/JcRaeRS.jpg" target="_blank">

<img alt="ITHAKI" src="https://i.imgur.com/JcRaeRSt.jpg" /></a><br />

<span class="thumbnail-text">ITHAKI</span></div>

<div><a href="https://i.imgur.com/XMS6PHs.jpg" target="_blank">

<img alt=" KEFALLONIA " src="https://i.imgur.com/XMS6PHst.jpg" /></a><br />

<span class="thumbnail-text">KEFALLONIA</span></div>

<div><a href="https://i.imgur.com/I9SFA0s.jpg" target="_blank">

<img alt=" ZAKYNTHOS " src="https://i.imgur.com/I9SFA0st.jpg" /></a><br />

<span class="thumbnail-text">ZAKYNTHOS</span></div>

<div><a href="https://i.imgur.com/6mZpZ0F.jpg" target="_blank">

<img alt=" SKOPELOS " src="https://i.imgur.com/6mZpZ0Ft.jpg" /></a><br />

<span class="thumbnail-text">SKOPELOS</span></div>

<div><a href="https://i.imgur.com/9GqSG9a.jpg" target="_blank">

<img alt="ALONNISOS" src="https://i.imgur.com/9GqSG9at.jpg" /></a><br />

<span class="thumbnail-text">ALONNISOS</span></div>

<div><a href="https://i.imgur.com/W8LjNt5.jpg" target="_blank">

<img alt="SKIATHOS" src="https://i.imgur.com/W8LjNt5t.jpg" /></a><br />

<span class="thumbnail-text">SKIATHOS</span></div>

<div><a href="https://i.imgur.com/CaUHw47.jpg" target="_blank">

<img alt="SKYROS" src="https://i.imgur.com/CaUHw47t.jpg" /></a><br />

<span class="thumbnail-text">SKYROS</span></div>

<div><a href="https://i.imgur.com/GwVdj0U.jpg" target="_blank">

<img alt="AIDIPSOS" src="https://i.imgur.com/GwVdj0Ut.jpg" /></a><br />

<span class="thumbnail-text">AIDIPSOS</span></div>

<div><a href="https://i.imgur.com/C83SL17.jpg" target="_blank">

<img alt="MYKONOS" src="https://i.imgur.com/C83SL17t.jpg" /></a><br />

<span class="thumbnail-text">MYKONOS</span></div>

<div><a href="https://i.imgur.com/YCL3P4v.jpg" target="_blank">

<img alt="ASTYPALAIA" src="https://i.imgur.com/YCL3P4vt.jpg" /></a><br />

<span class="thumbnail-text">ASTYPALAIA</span></div>

<div><a href="https://i.imgur.com/3sNGgku.jpg" target="_blank">

<img alt="SYROS" src="https://i.imgur.com/3sNGgkut.jpg" /></a><br />

<span class="thumbnail-text">SYROS</span></div>

<div><a href="https://i.imgur.com/w9qsfyQ.jpg" target="_blank">

<img alt="MILOS" src="https://i.imgur.com/w9qsfyQt.jpg" /></a><br />

<span class="thumbnail-text">MILOS</span></div>

<div><a href="https://i.imgur.com/KwuI9Z2.jpg" target="_blank">

<img alt="SANTORINI" src="https://i.imgur.com/KwuI9Z2t.jpg" /></a><br />

<span class="thumbnail-text">SANTORINI</span></div></div></div>