728x90 AdSpace

Latest News

Caroysel slideshow with buttons

Το carousel slideshow έχει την δυνατότητα να εμφανίζει πολλές φωτογραφίες μαζί σε οριζόντια διάταξη οι οποίες όταν θα κλικάρονται ανοίγουν στο link που τις έχετε συνδέσει. 
Διαθέτει επίσης και κουμπιά πλοήγησης. Το πλάτος του slideshow αφήστε το ως έχει width:100%; Το ύψος των εικόνων ρυθμίστε το αλλάζοντας το max-height:150px; Το πλάτος των εικόνων το ρυθμίζετε αλλάζοντας το itemWidth: 238, αλλά θα πρέπει να λάβετε υπ’ όψιν σας πόσες εικόνες θέλετε να περιέχει το slideshow στην κάθε διαφάνεια το οποίο εξαρτάται από το πόσο πλάτος έχετε στη διάθεσή σας.

Αν έχετε πλάτος ανάρτησης π.χ. 600px μπορείτε να επιλέξετε πλάτος εικόνων 200px και ανάλογο ύψος, αλλά αυτό για 3 εικόνες που θα επιλέξετε να εμφανίζονται σε κάθε διαφάνεια του slideshow το οποίο το ρυθμίζετε 3 γραμμές παρακάτω από το itemWidth: 238, εκεί που γράφει maxItems: 4}. Αν έχετε παραπάνω πλάτος 800px π.χ. τότε μπορείτε να επιλέξετε να εμφανίζονται 4 εικόνες με 200px πλάτος ή 3 εικόνες με 266px πλάτος και φυσικά το ανάλογο ύψος για να μην υπάρχει παραμόρφωση. Δείτε πως θα φαίνεται το slideshow στην αρχή του υποσέλιδου στο demo blog μου εδώ.


<style type="text/css">
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;}
/* FlexSlider Necessary Styles */
.flexslider{
margin:0;
padding:0;}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;}
.flex-pauseplay span{text-transform:capitalize;}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;}
/* FlexSlider Default Theme */
.flexslider{
margin:0 0 5px;
background:#115595;
border:1px solid #4EFF44;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
zoom:1;}
.flex-viewport{
max-height:150px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;}
.loading .flex-viewport{max-height:150px;}
.flexslider .slides{zoom:1;}
.carousel li{margin-right:5px;}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(https://lh3.googleusercontent.com/-OlOKI59Y5qY/VSTy-zOTzqI/AAAAAAAAQr8/Q2YtZ8TQsIw/w57-h27-no/direction-nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;}
.flex-direction-nav .flex-next{background-position:100% 0; right:-36px;}
.flex-direction-nav .flex-prev{left:-36px;}
.flexslider:hover .flex-next{opacity:0.8; right:5px;}
.flexslider:hover .flex-prev{opacity:0.8; left:5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;}
.flex-direction-nav .disabled{
opacity: .3!important;
filter:alpha(opacity=30);
cursor:default;}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:5px;
text-align:center;}
.flex-control-nav li{
margin:0px;
display:inline-block;
zoom:1;
*display:inline;}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#FF1111;
background:rgba(255,255,0);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;}
.flex-control-paging li a:hover{
background:# FF1111;
background:rgba(255,255,0);}
.flex-control-paging li a.flex-active{
background:#4EFF44;
background:rgba(255,255,0);
cursor:default;}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;}
.flex-control-thumbs li{
width:50%;
float:left;
margin:0;}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;}
.flex-control-thumbs img:hover{opacity:1;}
.flex-control-thumbs .active{opacity:1; cursor:default;}
</style>
<script src="https://googledive.com/host/0B8GeBeRdN9NsTVFUY0RqUTBXbUU" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B8GeBeRdN9NseURvSXpjVHo1UVk" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){  
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 238,
itemMargin: 0,
minItems: 1,
maxItems: 4});});});
</script>
<br />
<div class="flexslider">
<ul class="slides">
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-YfNJcakAcwg/UiiIuLBOAmI/AAAAAAAAJK8/CJvT7ZwDMEI/w1264-h790-no/LEFKADA-02.jpg"/></li></a>
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w1264-h790-no/LEFKADA-03.jpg"/></li></a>
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w1264-h790-no/LEYKADA-24.jpg"/></li></a>
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-o50M8GFbcJM/VPgVav9EGOI/AAAAAAAAPuw/z-6HM_7nQ7w/w1264-h790-no/LEYKADA-42.jpg"/></li></a>
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-cNJXfE2lGoc/VPgVcRQ5EnI/AAAAAAAAPu4/4Vlocwv-X6o/w1264-h790-no/LEYKADA-43.jpg"/></li></a>
<li><a href="http://imgur.com/a/2OFXh/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-LB8zka6NnYA/UiiIxk_UOSI/AAAAAAAAJLU/YTAWF35UMF8/w1264-h790-no/LEYKADA-33.jpg"/></li></a>
<li><a href="http://imgur.com/a/i8pu5/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-LNyox8qqU10/UiiK7dhOtlI/AAAAAAAAJRw/77ETxxQDWAg/w1264-h790-no/ZAKYNTHOS-13.jpg"/></li></a>
<li><a href="http://imgur.com/a/i8pu5/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-MGuTdTnuTuU/UiiKxad1cdI/AAAAAAAAJRQ/d3Du80t-YvE/w1264-h790-no/ZAKYNTHOS-18.jpg"/></li></a>
<li><a href="http://imgur.com/a/avuZt/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-X-UZsR0Usfw/VPgVVFHmkNI/AAAAAAAAPuo/6Bc3J2_4d-I/w1264-h790-no/KEFALONIA-42.jpg"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-hodGag3QpQE/VPgV7kclq8I/AAAAAAAAPvo/not2StPmvIU/w1264-h790-no/SAMOS-33.jpg"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-wdu_wIn5Lj0/VPgV8sXTBvI/AAAAAAAAPvw/sYvFyQR6xj0/w1264-h790-no/SAMOS-32.JPG"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-hEgO-XMchEk/VPgV-vpSQfI/AAAAAAAAPv4/usx5ZtC6TJE/w1264-h790-no/SAMOS-30.jpg"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-poEax-ahwuU/VPgWA73NnNI/AAAAAAAAPwA/H2i9kXGivSM/w1264-h790-no/SAMOS-23.jpg"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh5.googleusercontent.com/-_1adH3wAdHo/VPgV4v2d1eI/AAAAAAAAPvg/7c97HXhsdbQ/w1264-h790-no/SAMOS-35.jpg"/></li></a>
<li><a href="http://imgur.com/a/PZHdg/layout/grid" target="_blank"><img src="https://lh3.googleusercontent.com/-Ryr1m4tLIBQ/VPgVwV20hhI/AAAAAAAAPvI/oU27utK_PiM/w1264-h790-no/SAMOS-50.jpg"/></li></a></ul></div>
 
 
  • Blogger Comments
  • Facebook Comments

0 comments:

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

Item Reviewed: Caroysel slideshow with buttons Rating: 5 Reviewed By: Trolleybus driver