javascript, jquery, plugins, ycodaslider
YCodaSlider 3.0 – Changelog
6 March 2009 | Comments- updated to jquery 1.3.2
- scrolltop: very important when “panels” have contents of different hights
- unstable piece of code have been delated: ycodaframe, history option
- dragging option and dependence from jQuery UI (basically unusefull) have been delated
- 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)
- jQuery(window).ycodacss ->to load the css.
- 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:
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
11 Comments
Congratulations, YCodaSlider 3.0 is for me the best slider for jquery.
I am triying to use it, but with the idea of removing and adding panels, the problem is that i don´t know how to do it (i don´t know if an array is used to control how many panels we have, i can hide the link of the navigation and the panel but the position is still there, empty space but there).
Thanks for everything.
@digitBoy
Sorry to be late.
I studied the new api of ycodaslider 4.0
//TODO
stop : function(){
},
play : function(){
},
autoplay : function(){
},
add : function(){
},
remove : function(){
},
//TODO CALLBACK
before : function(){
},
load : function(){
},
after : function(){
}
I’m going to inform you ASAP.
Your suggestions are always appreciated.
Bye, Max.
hi Massimiliano,
I like your slider very much and for months I try to design a web-site include the ycodaslider. My problem is now, how to implement two sliders on one page with a different style.
I have one slider with the main content and can nearly use your example css. But underneath I have a second slider only with thumbs and I cant manage it to give this slider the right style. The only way I found to change the name of the ycodaslider and use two but the same scripts at one site, this is nearly working, but it doesn’t satisfy me. I think there must be a possibility to do it like on your example-sites with multiple sliders, but give them a different style. Just to mention it, I’m not very used in html, css, java , etc., so my question maybe seems naive for you.
Anyway thanks for every help,
all the best Emil.
@emil
http://maxb.net/scripts/ycodaslider-3.0/demo/docs/slider/8.html
hi Max,
Thanks for this example, it was a good help for me, and I was able to set two Sliders with different styling on one site. But now there is one problem left: wile loading the Sliders in Safari, Firefox PC or Mac and IE you can see the un-styled content of the sliders. Look at this example page: (http://tinyurl.com/yz9et7u )
In my first try, when I changed the name of the second ycodaslider in the Js. , I added to the CSS of both sliders a class=”csw” for hide the loading (copied from the coda-slider), and it worked fine, the loading was very clean. Look here: (http://tinyurl.com/yg59pos )
But now adding the class=”csw” causes mistakes: like the sliders jump completely out of the window, or in a different html notification, the content of the second slider goes into the first one. I changed the name of the first slider in ycodaslider1, without any effect and tried a lot of other things in html and css, but always the same result. Do you know a way to hide the loading or how I have to implement the class=”csw” in the right way.
Thanks a lot for help,
emil
@emil
1) see this
http://maxb.net/scripts/ycodaslider-3.0/demo/docs/issues/loading.html
search in source:
@emil
… and this
http://maxb.net/scripts/ycodaslider-3.0/demo/docs/issues/loading2.html
Great, this was a very, very good help, thanks for that. It will give me a great leap forward to hopefully finish my website soon.
All the best for you,
emil
Hi,
I just realized, in your second solution,
http://maxb.net/scripts/ycodaslider-3.0/demo/docs/issues/loading2.html ,
the slider dosn’t load the panels with the jScrollPane included. Don’t know why.
best greatings to italy!
when I put the jScrollPane script like this,
$(function(){
$(‘.scroll-pane’).jScrollPane({
scrollbarWidth: 12
});
$(‘#section-scroll-1′).jScrollPane();
$(‘#section-scroll-2′).jScrollPane();
$(‘#section-scroll-3′).jScrollPane();
$(‘#section-scroll-4′).jScrollPane();
$(‘#section-scroll-5′).jScrollPane();
$(‘#section-scroll-6′).jScrollPane();
$(‘#section-scroll-7′).jScrollPane();
});
into the body tag, then the loading is complete.
Do you think this is ok?
chears emil.
@emil
check your html. some div are not close.
and jQuery fails build ycodaslider panels.
I’m working to 4.0 version. With play, stop and autoplay methods.
http://maxb.net/scripts/ycodaslider-4.0/demo/docs/slider/7.html