• autoplay
• clicknplay (ycodagallery)

AUTOPLAY GALLERY + LAZYLOAD

jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(document).ready(function() {
	jQuery("#panel-gallery")
    .ycodagallery()
    .ycodalazy();
});
jQuery(window).bind("load", function() {
    jQuery("#panel-gallery")
    .ycodaslider({
    	navigator: false,
    	arrows : false
    });

    setInterval(function(){
    	jQuery("#panel-gallery").ycodaslider("right");
    }, 2000);
});

AUTOPLAY SLIDER

jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(window).bind("load", function() {
    jQuery("div.ycodaslider")
    .ycodaslider({arrows: false, navigator: false});

    setInterval(function(){
    	jQuery("div.ycodaslider").ycodaslider("right");
    }, 2000);
});

CLICK’N'PLAY

jQuery(window).ycodacss('ycodaslider-3.0.css');
jQuery(window).bind("load", function() {
    jQuery("#panel-gallery")
    .ycodagallery()
    .ycodaslider({navigator: false, arrows: false});

    jQuery("#panel-gallery").find("img").wrap('<a href="#">');
    jQuery("#panel-gallery").find("a").click(function(){
    	jQuery("#panel-gallery").ycodaslider("right");
    	return false;
    });
});

• plugins in 2.0 (gallery, lazyload, feeds, code) now have been unified in a single file (easier to use. only 5KB the packed version. 9 KB the minified version)
  • jQuery(window).ycodacss ->to load the css.
    
  • jQuery(selector).ycodaslider -> to start up the component.
  • jQuery(selector).ycodagallery -> prepares a list of images. To be used “in chain” with ycodaslider.
  • jQuery(selector).ycodalazy -> starts up the lazyload on the list of images. To be used “in chain” with ycodagallery in event ready.  Launch ycodaslider on the event load.
  • jQuery(selector).ycodacode -> prepares a list of links to sources, to be used “in chain” with ycodaslider. (optional jQuery Chili 2.2)
    
  • jQuery(selector).ycodafeeds -> prepares a list of links to rss sources,  to be used “in chain” with ycodaslider. (needs  jQuery gFeeds e API google)

• I only kept separate the plugin fickr, which is just an example of how you can link ycodaslider
  • jQuery(selector).ycodaflickr -> example of external component. (see also ycodagallery, ycodacode e ycodafeeds to write plugins for ycodaslider)

• jquery easing is no longer essential: jquery 1.3 has the swing effect as a default animation. Simply set at 0 the parameter easeTime if you don’t  want to have animation.
• default keyboards shorcuts  are now the two arrows left & right (keyboard codes are the same in all platforms)

• I made a API using jquery UI style:
  • jQuery(selector).ycodaslider(“right”); -> invoke event right. ycodaslider will move right.
  • jQuery(selector).ycodaslider(“left”); -> invoke event left. ycodaslider will move left.
  • jQuery(selector).ycodaslider(“go”, N); -> invoke event go where N is the number of the panel to visualize (starting from 0)
  • jQuery(“#id”).ycodaslider(“currrent”); -> returns the panel active
  • jQuery(“#id”).ycodaslider(“count”); -> returns the number of panels
  • jQuery(“#id”).ycodaslider(“width”); -> returns the width of the component
• complete code refactory
• possibility of tracking click with janalytics plugin to have the statistics (google analytics)
• a single css (easy to customize – the design of the demo has a minimalist design)
• easier to use

• tested on the following browser:
  • firefox 3 (linux/windows xp)
  • internet explorer 6/7
  • chrome (windows xp)
  • safari 3.2.2/safari 4Beta (windows xp)
  • opera 9.6 (windows xp)

• known bugs
  • IE6: the last panel sometimes literally fall under the second last, leaving empty the last card

• All examples:
  • EFFECTS
    
  • API
  • SHORTCUTS
  • CHINABILITY
  • DIMENSIONS
  • NO MENU & ARROWS
  • GALLERY
  • LAZYLOAD
  • LAZYLOAD EXPLANATION
  • FEED RSS
  • CODE
  • EXTERNAL PLUGIN “FLICKR”
  • DEMO SITE
    

if  you have any suggestions, if you find a bug or you use the plugin, please leave a comment here.
PS: Carlo… spero vada bene

UPDATE 2008-03-09 :

• Autoplay & play on click
  • AUTOPLAY LAZYLOAD
    
  • AUTOPLAY SLIDER
    
  • PLAY ON CLICK
    

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

BENCHMARK:

PRIMA

METODI:

PRIMA

Benchmark 1
Benchmark 2
YCodaSlider 2.0rc2 – SVN – rev 121

YCodaSlider 2.0rc2 out.
DEMO SITE

DOPO:

Dal lavoro sui metodi ho capito cosa rende lento il plugin. Ho meglio più che lento, cosa inficia maggiormente sul tempo di esecuzione di YCodaSlider 2.0:

Benchmark

Il metodo nav() impiega circa 130ms per essere eseguito (firefox 2.0).

    nav    :   function(el){
        var jViewer = jQuery("div.yslider-viewer",el);
        jViewer.before('<div class="yslider-navl"><a href="#">Left</a></div>');
        jViewer.after('<div class="yslider-navr"><a href="#">Right</a></div>');
        jViewer.before('<div class="yslider-nav"><ul><\/ul></div>');
        var jNav = jQuery("div.yslider-nav ul",el);
        var jPanels = jQuery("div.yslider-panel",el);
        jPanels.each(function(n) {
            var lp = jQuery("div.yslider-panelwrapper",this).attr("title") || (n+1);
            if(el.ycodaslider.options.history){
                 jQuery('<li><a href="#' + (n + 1) + '">' + lp + '</a></li>').appendTo(jNav);
            }else{
                jQuery('<li><a href="#">' + lp + '</a></li>').appendTo(jNav).click(function(){
                   return false;
                });
            }
        });
        //setto la larghezza del menu qui.
        jNav.find("li").each(function(nr){
            el.ycodaslider.nw += jQuery(this).width();
        });
        if(el.ycodaslider.options.width)
            jNav.parent().css({"width" : el.ycodaslider.options.width});
        else
            jNav.parent().css("width" , el.ycodaslider.nw);

    }

Commentando questo ottengo un centinaio di ms di risparmio

//questo costa 100ms!
jNav.find("li").each(function(nr){
    el.ycodaslider.nw += jQuery(this).width();
});

Innanzitutto non c’è bisogno di calcolare la larghezza dei tag LI per avere una corretta larghezza del contenitore.
In ogni caso il metodo width applicato ad un elemento che non ha una larghezza impostata da css è notevolmente lento.
Penso che calcoli il numero di caratteri per il font per ottenere una larghezza in pixels.

Non usare il metodo width se non è settata la proprietà css width.

Ora il metodo viene eseguito in 12ms.

Benchmark

el.ycodaslider.nw = el.ycodaslider.pc * 2;

el.ycodaslider.nw = el.ycodaslider.pw;//el.ycodaslider.pc * 2 ?

Veniva calcolata la larghezza del navigatore moltiplicando per due il numero dei pannelli. Perchè?
Non lo so. Refuso.

In realtà la larghezza del navigartore è uguale alla larghezza del pannello.

Correggendo questo valore ho modificato il metodo nav al fondo con questo:

if(el.ycodaslider.options.width){
      jNav.parent().css({"width" : el.ycodaslider.options.width});
}else{
     jNav.parent().css("width" , el.ycodaslider.nw );
}

Ecco il benchmark aggiornato con il metodo nav e il metodo count corretti.

Benchmark

Notare come il lunghissimo metodo bindings non pesi niente. Grazie alle clousure infatti praticamente il codice viene attaccato all’handler e verrà valutato solo al bind dell’evento.

Ma per questo bisogna ringraziare jQuery e John Resig.

Modificando il plugin benchmark, ho trovato un sistema accettabile per adattare il plugin creato al calcolo del “peso” dei metodi di un plugin. Qui la verisione usata: svn

metodi

Ecco il risultato:

Il widget non è nascosto. E’ visibile. Ho capito che lavorare su elementi nascosti è sviante.. E’ vero ci impiega meno, ma se utilizzi i metodi width() e height() questi forniranno dati sbagliati e di fondo il codice sbaglia nellìeseguire le funzioni.

I risultati mi sembrano attendibili. Ogni metodo ha un suo peso.

I test sono stati effettuati su firefox 2.0 con firebug attivo.
Con firefox 3.0 gli stessi test sono nettamente più veloci (evviva!)

Nav è il primo metodo da rifattorizzare.

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

UPDATES:
2008-05-24 – RC2 : refactory ycodaslider code. add sidebars option. fix nav width bug. cut pre-loading code and yslider-toggle css class

2008-05-19 – fix ie6 bugs in demo site (css properties, png/gif replace, padding, tag pre+code) and moz-user-select in galleries. TODO: keycodes abstraction layer for different platforms.

Questo plugin ci tenevo a pubblicarlo.
E’ una copia di questo.
Fatto a mano. Ragionando sulle animazioni.
E fatto tempo… fa. Nel frattempo, ma come sempre, alcune tecniche non le avrei più utilizzate.

Non conoscevo questo plugin ne tantomeno questo.

Sicuramente è più stabile del mio.
Lo pubblico solamente perchè ho fatto parecchia fatica a scriverlo.
Se dovete usare uno slider usate i due plugin segnalati sopra. Il mio è legato ad un progetto. Ha troppa presentazione schiantata nel codice.

• Download

Depends

• jQuery 1.2.3
• Easing

Demo basilare

$(document).ready(function(){
    $(".ui_ycodaslider_container").YCodaSlider(
        {
         height      : '630px',
         heightcont  : '680px',
         width       : '770px',
         test        : 0
        }
    );
});

Real World 1

$(document).ready(function(){
    $(".ui_ycodaslider_container").YCodaSlider(
			{
			css	: '/js/lib/jquery-1.2.1/plugins/ycodaslider/css/ycodaslider.css',
			cssprint: '/js/lib/jquery-1.2.1/plugins/ycodaslider/css/ycodaslider.print.css',
			skin	: '/js/lib/jquery-1.2.1/plugins/ycodaslider/css/skins/storiaindustria/skin.css',
			height	: '630px',
			heightcont : '680px',
			width	: '763px',
			textprev : '<img src="/scuola_didattica/im/freccia_gialla_sx.jpg" alt="precedente" />',
			textnext : '<img src="/scuola_didattica/im/freccia_gialla_dx.jpg" alt="successivo" />'
			}
		);
});