YCodaFrame 2.0 - A plugin 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

Basic usage:

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

Example

Examples

• Explanation of lazyload pattern and iframe.
• Simple Lazyload.
• Without lazyload (BUG) explanation.
• Without lazyload (BUG).

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>