YCodaSlider 2.0 - Plugins

Plugins (adapters) for YCodeSlider 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

Feeds Feed Plugin Adapter (require GOOGLE API KEY and jQuery gFeed Plugin)

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

Flickr Feed Plugin Adapter

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"}); 
        }
    );
});

Dilbert Feed Plugin Adapter

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}
           ); 
        }
    );
});

Examples

Basic example

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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

YCodaFeeds 2.0 YCodaFlickr 2.0 YCodaDilbert 2.0

Flickr

Dilbert