GADGETS FOR BLOGS

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

CAROUSEL SLIDESHOW WITH BUTTONS No 2

CAROUSEL SLIDESHOW
CAROUSEL SLIDESHOW WITH BUTTONS No 2
Το 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 ΣΕ ΛΕΙΤΟΥΡΓΙΑ ►

<style>
/* 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="http://yourjavascript.com/92381085612/jquery-flexslider.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/21861382296/jquery-flexslider-min.js" 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>

Πηγή :  http://www.dimpost.com/search/label/Blogger%20Slider

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

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

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