docs Home gallery Gallery lazyload Lazyload plugins Plugins Frame Frame gallery Desktop
docs Docs docs Code Download Download

YCodaSlider 2.0

Copyright (c) 2008 Massimiliano Balestrieri
Examples and docs at: http://maxb.net/blog/
Licensed GPL licenses:
http://www.gnu.org/licenses/gpl.html

Slider scripts are one of the common objects of newspaper & portal websites.
They are very useful as they help us present more content in a limited space.
This script helps you present your content with a tabbed menu + previous-next buttons to switch between tabs.
YCodaSlider 2.0 requires jQuery to run and you can use any type of content inside the slider like HTML, Flash, webpages etc.
It can be configured easily to use different effects while changing the content.
from : www.webresourcesdepot.com

Based on Gian Carlo Mingati's slideViewer
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

Based on Niall Doherty's coda-slider
http://www.ndoherty.com/coda-slider

Inspired by the clever folks at http://www.panic.com/coda

Basic usage:

jQuery(".ycodaslider").ycodaslider();

Example

Js

jQuery(window).bind("load", function() {
    jQuery(".ycodaslider").ycodaslider();
});

Html:

<div class="ycodaslider">
    <div class="yslider-panelwrapper" title="Panel 1"></div>
    <div class="yslider-panelwrapper" title="Panel 2"></div>
    <div class="yslider-panelwrapper" title="Panel 3"></div>
    <div class="yslider-panelwrapper" title="Panel 4"></div>
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>

Changable options (runtime):

jQuery(".ycodaslider").ycodaslider({
                id : options.id, 
                easeTime : options.easeTime, 
                easeFunc : options.easeFunc, 
                shortcut : options.shortcut.split(","),
                height   : options.height,
                width    : options.width,
                scroll   : true,
                history  : true
        });

33 Easing Effects Example

Panels with options and custom id:

jQuery(".ycodaslider").ycodaslider({
        id : "yslider-myid", 
        easeFunc : "easeInOutExpo", //see jquery-easing-1.3.js for more easing method 
        easeTime : "750" 
});

Example effect - Example id

Custom Shortcuts:

jQuery(".ycodaslider").ycodaslider({shortcut : [37,39]});//false if don't want shortcut

Example

Chinability:

jQuery(".ycodaslider").ycodaslider({shortcut : [37,39]}).css("border","1px solid red");

Example

Custom dimensions:

jQuery(".ycodaslider").ycodaslider({height : 200, width : 300, scroll : true});

Example

History (require jquery.history_remote.js):

jQuery(".ycodaslider").ycodaslider({history:true});

Example

Draggable (require ui core, ui draggable and dimensions):

jQuery(".ycodaslider").ycodaslider({draggable:true});

Example

No sidebars:

jQuery(".ycodaslider").ycodaslider({sidebars: false});

Example

YCodaGallery 2.0

jQuery(window).bind("load", function(){
    jQuery(".ycodaslider").ycodagallery().ycodaslider();
});

YCodaLazy 2.0

jQuery(document).ready(function() {
    YCodaSlider.Lazy.init("div#yslider-gallery1",{
            threshold   : 0, 
            placeholder : "../../skins/base/images/grey.gif",
            effect      : "fadeIn",
            effectspeed : "slow"
    });
});
jQuery(window).bind("load", function() {
    jQuery("div#yslider-gallery1").ycodagallery().ycodaslider();
});

YCodaFrame 2.0

jQuery(document).ready(function() {
    jQuery.ajaxHistory.initialize();
    jQuery("#yslider-frame").ycodaframe(
        {height : wh ,  width : ww},
        function(){
            YCodaSlider.Lazy.init("div#yslider-frame",{
                type        : "iframe",
                threshold   : 0, 
                placeholder : "../../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-frame")
           .ycodaslider({
                id: "yslider-frame", 
                height:300,  
                width : 500, 
                scroll: true, 
                history: true
           });
        }
     );
});

YCodaFeeds 2.0

jQuery(window).bind("load", function() {
    jQuery("#yslider-feeds").ycodafeeds().ycodaslider(
        {id : "yslider-flickr", scroll : true}
    ); 
});

YCodaFlickr 2.0

jQuery(document).ready(function() {
    jQuery("#yslider-flickr").ycodaflickr(
        {proxy : "../../../exe/feed.php"},
        function(){
            YCodaSlider.Lazy.init("div#yslider-flickr",{
                threshold   : 0, 
                placeholder : "../../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-flickr").ycodagallery().ycodaslider(
             {id : "yslider-flickr"}
           ); 
        }
    );
});

YCodaDilbert 2.0

jQuery(document).ready(function() {
    jQuery("#yslider-dilbert").ycodadilbert(
        {proxy : "../../exe/feed.php"},
        function(){
            YCodaSlider.Lazy.init("div#yslider-dilbert",{
                threshold   : 0, 
                placeholder : "../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-dilbert").ycodagallery().ycodaslider(
            {id : "yslider-dilbert", width: 560, height: 250}
           ); 
        }
    );
});

YCodaCode 2.0

jQuery(window).bind("load", function(){
    jQuery("div#yslider-code").ycodacode().ycodaslider();
});

Examples

Js

jQuery(window).bind("load", function(){
    jQuery(".ycodaslider").ycodagallery().ycodaslider();
});

Html:

<div class="ycodaslider">
    <img alt="new Mikado logo 600 3D"  src="http://maxb.net//repository/images/14.jpg" />
    <!-- [...] -->
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>        
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(document).ready(function() {

    YCodaSlider.Lazy.init("div#yslider-gallery1",{
            threshold   : 0, 
            placeholder : "../../skins/base/images/grey.gif",
            effect      : "fadeIn",
            effectspeed : "slow"
    });
});
jQuery(window).bind("load", function() {
    jQuery("div#yslider-gallery1").ycodagallery().ycodaslider();
});

Html:

<div class="ycodaslider">
    <img alt="new Mikado logo 600 3D"  src="http://maxb.net//repository/images/14.jpg" />
    <!-- [...] -->
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(document).ready(function() {
    jQuery("#yslider-frame").ycodaframe({height : 300 ,  width : 500},
        function(){
            YCodaSlider.Lazy.init("div#yslider-frame",{
                type        : "iframe",
                threshold   : 0, 
                placeholder : "../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-frame")
           .ycodaslider(
             {id: "yslider-frame", height:300,  width : 500, scroll: true}
           );
        }
     );
});

Html:

<div id="yslider-frame" class="ycodaslider">
    <a href="http://www.google.it">Google</a>
    <a href="http://maps.google.it/maps">Maps</a>
    <a href="http://images.google.it/imghp">Images</a>
    <a href="http://maxb.net/blog/">maxb.net</a>
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>        
<script src="../../plugins/frame-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/frame-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(window).bind("load", function() {
      jQuery("#yslider-feeds").ycodafeeds().ycodaslider(
        {id : "yslider-flickr", scroll : true}
      ); 
});

Html:

<div id="yslider-feeds" class="ycodaslider">
    <a href="http://feeds.feedburner.com/jquery/">1</a>
    <!-- [...] -->
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script type="text/javascript" src="http://www.google.com/jsapi?key=KEY"></script> 
<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.gfeed.pack.js" type="text/javascript"></script> 
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/feeds-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script type="text/javascript" src="http://www.google.com/jsapi?key=KEY"></script>
<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.gfeed.pack.js" type="text/javascript"></script> 
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/feeds-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(document).ready(function() {
    jQuery("#yslider-flickr").ycodaflickr({proxy : "../../../exe/feed.php"},
        function(){
            YCodaSlider.Lazy.init("div#yslider-flickr",{
                threshold   : 0, 
                placeholder : "../../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-flickr")
           .ycodagallery()
           .ycodaslider({id : "yslider-flickr"}); 
        }
    );
});

Html:

<div id="yslider-flickr" class="ycodaslider">
    <a href="URL_FEED">Title</a> 
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/flickr-ycodaslider-2.0.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/flickr-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(document).ready(function() {
    jQuery("#yslider-dilbert").ycodadilbert({proxy : "../../../exe/feed.php"},
        function(){
            YCodaSlider.Lazy.init("div#yslider-dilbert",{
                threshold   : 0, 
                placeholder : "../../../skins/base/images/grey.gif",
                effect      : "fadeIn",
                effectspeed : "slow"
           });
           jQuery("#yslider-dilbert").ycodagallery().ycodaslider(
                {id : "yslider-dilbert", width: 560, height: 250}
           ); 
        }
    );
});

Html:

<div id="yslider-dilbert" class="ycodaslider">
    <a href="http://feeds.feedburner.com/DilbertDailyStrip">Dilbert</a> 
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.js" type="text/javascript"></script>
<script src="../../plugins/dilbert-ycodaslider-2.0.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/lazy-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/dilbert-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Examples

Js

jQuery(window).bind("load", function(){
    jQuery(".ycodaslider").ycodacode().ycodaslider();
});

Html:

<div id="yslider-code" class="ycodaslider">
    <a href="../../ycodaslider-2.0.svn.js">YCodaSlider 2.0</a>
    <a href="../../plugins/gallery-ycodaslider-2.0.svn.js">YCodaGallery 2.0</a>
    <a href="../../plugins/code-ycodaslider-2.0.svn.js">YCodaCode 2.0</a>
    <a href="../../plugins/lazy-ycodaslider-2.0.svn.js">YCodaLazy 2.0</a>
    <a href="../../plugins/feeds-ycodaslider-2.0.svn.js">YCodaFeeds 2.0</a>
    <a href="../../plugins/greybox-ycodaslider-2.0.svn.js">YCodaGreyBox 2.0</a>
    <a href="../../plugins/flickr-ycodaslider-2.0.svn.js">YCodaFlickr 2.0</a>
    <a href="../../plugins/dilbert-ycodaslider-2.0.svn.js">YCodaDilbert 2.0</a>
</div>

Skin css via javascript (not in document.ready! load after ycodaslider script inclusion):

YCodaSlider.Base.css('../../skins/base/skin.css');

Basic scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>        
<script src="../../lib/chili/jquery.chili.pack.js" type="text/javascript"></script>        
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Full options scripts (use packed version in production):

<script src="../../lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery-easing-1.3.pack.js" type="text/javascript"></script>
<script src="../../lib/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="../../lib/ui/ui.pack.js" type="text/javascript"></script>
<script src="../../lib/chili/jquery.chili.pack.js" type="text/javascript"></script>        
<script src="../../ycodaslider-2.0.pack.js" type="text/javascript"></script>
<script src="../../plugins/gallery-ycodaslider-2.0.pack.js" type="text/javascript"></script>

Credits

Based on slideViewer of Gian Carlo Mingati.
Based on coda-slider of Niall Doherty
Inspired by the clever folks at http://www.panic.com/coda

Libraries

jquery v1.2.3 of John Resig jquery.com
jquery cookie (this demo) and
jquery history_remote v1.0.3 of Klaus Hartl stilbuero.de
jquery dimensions v1.2 of Paul Bakaus
jquery gfeed v1.0.2 of M. Alsup + (API GOOGLE)
jquery easing v1.3 of George McGinley Smith
jquery ui (core rev:5607, draggable rev: 5618)
jquery.chili-1.9.js of Andrea Ercolino

This Demo

Icons Nuvola
Yahoo Css Reset version: 2.5.1 GreyBox Css

YCodaSlider 2.0 YCodaGallery 2.0 YCodaCode 2.0 YCodaLazy 2.0 YCodaFeeds 2.0 YCodaFrame 2.0 YCodaFlickr 2.0 YCodaDilbert 2.0