ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 1

31 Αυγούστου 2016

ΚΑΘΕΤΟ 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. Δείτε το σε λειτουργία ακριβώς κάτω από εδώ ▼.

SKIATHOS

SKYROS

AIDIPSOS

MYKONOS

$(document).ready(function() {

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

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