GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

ΚΑΘΕΤΟ CAROUSEL SLIDESHOW No 1

SLIDESHOW CAROUSEL
ΚΑΘΕΤΟ 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
KERKYRA
PAXOI
PAXOI
LEYKADA
LEYKADA
ITHAKI
ITHAKI
 KEFALLONIA
KEFALLONIA
 ZAKYNTHOS
ZAKYNTHOS
 SKOPELOS
SKOPELOS
ALONNISOS
ALONNISOS
SKIATHOS
SKIATHOS
SKYROS
SKYROS
AIDIPSOS
AIDIPSOS
MYKONOS
MYKONOS
ASTYPALAIA
ASTYPALAIA
SYROS
SYROS
MILOS
MILOS
SANTORINI
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://rawgit.com/github-codes/b8104ed8b6798090354078e871b47f8f/raw/0b5ba16c6228ed966aee16651b523556c14f752f/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://lh5.googleusercontent.com/-FYx-w-Lbgro/V8bZ9APBlxI/AAAAAAAAVi4/3iZhT3SQ1FsTbbl3q3xKt0kckQK_PrszgCL0B/w98-h15-no/top_arrow.jpg);background-repeat: no-repeat;background-position: bottom;}
.jscarousal-vertical-forward{background-image: url(https://lh3.googleusercontent.com/-QGH56YL8QFI/V8baAAqaYUI/AAAAAAAAVjI/e5NKZaH3Qeod_NU2N5KgV5g3NLaVeTL4wCL0B/w98-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="http://i.imgbox.com/x4YtqHsG" target="_blank">
<img alt="KERKYRA" src="http://i.imgur.com/Pq9Dexat.jpg" /></a><br />
<span class="thumbnail-text">KERKYRA</span></div>
<div><a href="http://i.imgur.com/kbCkBYe.jpg" target="_blank">
<img alt="PAXOI" src="http://i.imgur.com/kbCkBYet.jpg" /></a><br />
<span class="thumbnail-text">PAXOI</span></div>
<div><a href="http://i.imgur.com/gCr4ycD.jpg" target="_blank">
<img alt="LEYKADA" src="http://i.imgur.com/gCr4ycDt.jpg" /></a><br />
<span class="thumbnail-text">LEYKADA</span></div>
<div><a href="http://i.imgur.com/JcRaeRS.jpg" target="_blank">
<img alt="ITHAKI" src="http://i.imgur.com/JcRaeRSt.jpg" /></a><br />
<span class="thumbnail-text">ITHAKI</span></div>
<div><a href="http://i.imgur.com/XMS6PHs.jpg" target="_blank">
<img alt=" KEFALLONIA " src="http://i.imgur.com/XMS6PHst.jpg" /></a><br />
<span class="thumbnail-text">KEFALLONIA</span></div>
<div><a href="http://i.imgur.com/I9SFA0s.jpg" target="_blank">
<img alt=" ZAKYNTHOS " src="http://i.imgur.com/I9SFA0st.jpg" /></a><br />
<span class="thumbnail-text">ZAKYNTHOS</span></div>
<div><a href="http://i.imgur.com/6mZpZ0F.jpg" target="_blank">
<img alt=" SKOPELOS " src="http://i.imgur.com/6mZpZ0Ft.jpg" /></a><br />
<span class="thumbnail-text">SKOPELOS</span></div>
<div><a href="http://i.imgur.com/9GqSG9a.jpg" target="_blank">
<img alt="ALONNISOS" src="http://i.imgur.com/9GqSG9at.jpg" /></a><br />
<span class="thumbnail-text">ALONNISOS</span></div>
<div><a href="http://i.imgur.com/W8LjNt5.jpg" target="_blank">
<img alt="SKIATHOS" src="http://i.imgur.com/W8LjNt5t.jpg" /></a><br />
<span class="thumbnail-text">SKIATHOS</span></div>
<div><a href="http://i.imgur.com/CaUHw47.jpg" target="_blank">
<img alt="SKYROS" src="http://i.imgur.com/CaUHw47t.jpg" /></a><br />
<span class="thumbnail-text">SKYROS</span></div>
<div><a href="http://i.imgur.com/GwVdj0U.jpg" target="_blank">
<img alt="AIDIPSOS" src="http://i.imgur.com/GwVdj0Ut.jpg" /></a><br />
<span class="thumbnail-text">AIDIPSOS</span></div>
<div><a href="http://i.imgur.com/C83SL17.jpg" target="_blank">
<img alt="MYKONOS" src="http://i.imgur.com/C83SL17t.jpg" /></a><br />
<span class="thumbnail-text">MYKONOS</span></div>
<div><a href="http://i.imgur.com/YCL3P4v.jpg" target="_blank">
<img alt="ASTYPALAIA" src="http://i.imgur.com/YCL3P4vt.jpg" /></a><br />
<span class="thumbnail-text">ASTYPALAIA</span></div>
<div><a href="http://i.imgur.com/3sNGgku.jpg" target="_blank">
<img alt="SYROS" src="http://i.imgur.com/3sNGgkut.jpg" /></a><br />
<span class="thumbnail-text">SYROS</span></div>
<div><a href="http://i.imgur.com/w9qsfyQ.jpg" target="_blank">
<img alt="MILOS" src="http://i.imgur.com/w9qsfyQt.jpg" /></a><br />
<span class="thumbnail-text">MILOS</span></div>
<div><a href="http://i.imgur.com/KwuI9Z2.jpg" target="_blank">
<img alt="SANTORINI" src="http://i.imgur.com/KwuI9Z2t.jpg" /></a><br />
<span class="thumbnail-text">SANTORINI</span></div></div></div>

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

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

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