wtorek, 1 października 2013

jQuery slider

jQuery slider 

Przedstawię klika możliwości uzycia jQuery do popularnego przewijania zdjęć

Co będzie potrzebne:
1.Biblioteki jQuery
jquery.jcarousel.js,jquery.jcarousel.min.js,jquery-1.4.2.min.js
2.Pliki css strony głównej i sliderów
skin.css,skin.css,site.css
3.grafika
I zdaje się wszystko jeżeli coś przeoczyłem ,nic nie szkodzi cały tutorial zostanie spakowany i będzie do pobrania na samym końcu.

Przykład 1 slider poziomyw sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
</script>
W sekcji <body></body> dajemy miejsce gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)
<ul id="mycarousel" class="jcarousel-skin-tango">
     <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
 Przykład 2 slider pionowy
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});
</script>
 W sekcji <body></body> dajemy miejsce gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 Przykład 3 slider z autoprzewijaniem
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    //ta funkcja zatrzymuje przewijanie automatyczne i nie powraca do niego po zjechaniu myszą
    // dla tych którym to przeszkadza proponuje zakomentowac
  
    <!--dezaktywuje po przez zakomentowanie-->
  
    /*carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });*/
    <!--koniec dezaktywacji funkcji-->
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
</script>
 W sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
Przykład 4 slider kontrola statyczna
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<style type="text/css">
/**
 * Additional styles for the controls.
 */
.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;
}
.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    padding: 0 5px;
    margin: 0 0 5px 0;
    border: 1px solid #fff;
    color: #eee;
    background-color: #4088b8;
    font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
}
.jcarousel-scroll {
    margin-top: 10px;
    text-align: center;
}
.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}
.jcarousel-scroll select {
    font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 11px;
}
</style>
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
    jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });
    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });
    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};
// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});
</script>
 W sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)

<div id="mycarousel" class="jcarousel-skin-tango">
    <div class="jcarousel-control">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#">7</a>
      <a href="#">8</a>
      <a href="#">9</a>
    </div>
    <ul>
      <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
    </ul>
    <div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev">&laquo; Cofnij</a>
        <a href="#" id="mycarousel-next">Dalej &raquo;</a>
      </form>
    </div>
    </div>
Przykład 5 rózne stylizacje kilku sliderów na jednej stronie
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheets
-->
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
    // Note that they use both the same configuration options (none in this case).
    jQuery('.first-and-second-carousel').jcarousel();
  
    // If you want to use a caoursel with different configuration options,
    // you have to initialise it seperately.
    // We do it by an id selector here.
    jQuery('#third-carousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});
</script>
sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)
<p><a href="../slidery.html">powrót do menu głównego</a></p>
     <ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 
  <br/>
 
  <ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 
  <br/>
 
  <ul id="third-carousel" class=" jcarousel-skin-tango2">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
Przykład 6 slider javascript zdjecia ładowane z tablicy "array" dynamic content loading via java script
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--ładuje zdjęcia do tablicy-->
<script type="text/javascript">
var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
        if (i > mycarousel_itemList.length) {
            break;
        }
        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
};
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
</script>
<!--end tablica-->
sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider (zdjęcia przykładowe ładowane z netu)
<ul id="mycarousel" class="jcarousel-skin-tango">
    <!-- The content will be dynamically loaded in here  tutaj załaduje zdjęcia-->
  </ul>
Przykład 7 slider dynamiczne ładowanie w Ajax
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!-- tworzymy funkcje obsługi-->
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
    // Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;
    jQuery.get('dynamic_ajax.txt', function(data) {
        mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
    // Simply add all items at once and set the size accordingly.
    var items = data.split('|');
    for (i = 0; i < items.length; i++) {
        carousel.add(i+1, mycarousel_getItemHTML(items[i]));
    }
    carousel.size(items.length);
};
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});
</script>
sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider
<div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- The content will be dynamically loaded in here -->
    </ul>
Przykład 8 slider z jQuery thickbox
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<!--
  Thickbox stylesheet
-->
<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<!--
  jCarousel skin stylesheet
-->
<link href="../skora/ie7/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  Thickbox 3 library
-->
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<script type="text/javascript">
// Set thickbox loading image
tb_pathToImage = "images/loading-thickbox.gif";
var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"},
    {url: "../images/min1.jpg", title: "Flower11"}
];
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
        if (i > mycarousel_itemList.length) {
            break;
        }
        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
        // Apply thickbox
        tb_init(item);
        carousel.add(i, item);
    }
};
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
</script>
sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider
<ul id="mycarousel" class="jcarousel-skin-ie7">
 <!-- The content will be dynamically loaded in here -->
</ul>
Przykład 9 jQuery slider z efektem przesunięcia
w sekcji <head></head> dołanczamy następujący kod
<link href="../css/site.css" rel="stylesheet" type="text/css">
<link href="../skora/tango/skin.css" rel="stylesheet" type="text/css">
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        easing: 'BounceEaseOut',
        animation: 1000
    });
});
</script>
sekcji <body></body> dajemy miejscE gdzie ma pojawić się nasz slider
<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
I to by było na tyle
Autor: o
Etykiety:

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)

lubię to

Popularne posty

  • Prosta strona w php
    Jest to bardzo prosty przykład ale demonstruje sposób budowania stron w php Nagłówek strony naglowek.php <?php // sprawdzenie czy zmie...
  • Integracja Zoo z Jcomments
    Pobieramy paczkę com_zoo.plugin.php Link do paczki I umieszczamy w components/com_jcomments/plugins .  Następnie Pobieramy Pozostałe 3 el...
  • jQuery panel boczny
    Dzisiaj pokażę w jaki sposób stworzyć wysuwany panel boczny z wykorzystaniem jQuery i css3 ----------------------------------------------...
  • Bootstrap joomla zastosowanie
    Bootstrap zastosowanie Czym jest twitter bootstrap nie bende się rozwodził ,najogólniej to frameworkiem HTML5, CSS3, JS (jQuery) to co ...
  • microdata ,itemscope ,itemtype
     Jak oznaczyć zawartość za pomocą microdata  1.Co to jest microdata: Kiedy czytasz strone bądz wstęp do niej wisz o czy jest w zasadzie ....
  • zablokować bingbota
    Jak zablokować bingbota Blokowanie msnbot lub jak kto woli bingbota to nie zawsze prosta sprawa.Postanowiłem napisać kilka słów na ten tema...
  • Joomla B2J Contact
    Joomla  B2J contact   Polecam wszystkim ten znakomity komponent .Sporo opcji dobra konfiguracja
  • joomla easy blog jos_easyblog_fields_groups_acl' doesn't exist
    Jak to naprawić administrator/components/com_easyblog/models/fieldgroupacl.php edytujemy i zmieniamy : $query = 'DELETE FROM `jos_ea...
  • Pisanie modułu joomla 2.5
    Pisanie modułu joomla 2.5 Dzisiaj pokażę jak napisać moduł joomla prosty W skład modułu joomla  wejdą -mod_helloworld.php (silnik całego ...
  • Joomla przekierowanie 404
    Modyfikujemy plik  error.php  umieszczamy w folferze głównym szablonu domyslnego strony . Zawartość pliku error.php . Po tym zabiegu , po w...