Ads 468x60px

Τετάρτη, 12 Μαρτίου 2014

FlexSlider Basic Image Slider

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε
να ενσωματώσουμε στην σελίδα μας ένα πολύ ωραίο και απλό slider!Είναι
πολύ εύκολο στην εγκατάσταση του, όπως και άλλα sliders που έχουμε δει εδώ!

Ίσως σε κάποια πρότυπα να μην δουλέψει, λόγω των αρχείων Js που έχει στον
κώδικα αλλά δεν χάνεται τίποτα να δοκιμάσετε!




Δείτε εδώ το DEMO


 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--

..............................................................................................................................................................
<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* 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 li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
 /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 
!important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; 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 60px; background: #fff; border: 4px solid #fff; 
position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; 
-o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba
(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px
 rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
 }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px;
 height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10;
 overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); 
text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s
 ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com
/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
 left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/
flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
 right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity:
 0.9; }


/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position:
 absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow:
 hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; 
display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align:
 center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display:
 inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block;
 background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent:
 -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius:
 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px 
rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba
(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba
(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; 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 .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    
<!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another 
color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
        
        </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="ΕΔΩ ΤΟ URL ΣΑΣ">
                <img src="ΕΔΩ ΤΟ LINK ΤΗΣ ΦΩΤΟΓΡΑΦΊΑΣ ΣΑΣ" />
                </a>
            </li>
            <li>
                <a href="ΕΔΩ ΤΟ URL ΣΑΣ">
                <img src="ΕΔΩ ΤΟ LINK ΤΗΣ ΦΩΤΟΓΡΑΦΊΑΣ ΣΑΣ" />
                </a>
            </li>
            <li>
                <a href="ΕΔΩ ΤΟ URL ΣΑΣ">
                <img src="ΕΔΩ ΤΟ LINK ΤΗΣ ΦΩΤΟΓΡΑΦΊΑΣ ΣΑΣ" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.
flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
  animation: "slide",
  controlNav: true, 
  directionNav: true,
  easing: "swing",
  slideshowSpeed: 3000,        
     animationSpeed: 600, 
      });
    });
    //<![CDATA[
        $(window).load(function() { 
            $('#preloader').delay(350).fadeOut('slow'); 
        })
    //]]>
</script> 
................................................................................
ΑΛΛΑΓΕΣ
 
ΕΔΩ ΤΟ URL ΣΑΣ- Εδώ βάζετε το url της διεύθυνση σας

ΕΔΩ ΤΟ LINK ΤΗΣ ΦΩΤΟΓΡΑΦΊΑΣ ΣΑΣ - Εδώ μπαίνει η διεύθυνση του url 

της εικόνα σας!

Αποθήκευση και έτοιμοι! 
 
 
Καλή επιτυχία!!!


Πηγή κώδικα
thanks to imagesliderforblogger.blogspot.gr




Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog