The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Slinky Slider
Overview
Slinky Slider loads a user defined number of HTML files into "panels". The panels are stacked up horizontally inside a nominated container. Once the panels have been loaded, all bar one are collapsed to a clipped small size. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panel content can be full HTML, flash or other media, or just plain image references.
Usage
The plugin works configuration free, and will load 5 HTML files by default with the names panel1.html, panel2.html etc
$("#mydiv").slinkySlider();You can configure the plugin with the use of optional settings:
$("#mydiv").slinkySlider({
numberofpanels: 3,
smallsize: 20,
transition: 1000,
doauto: true,
autotimer: 8000,
panelspacing: 3,
panelname : "panel"
});You can choose to pass in all, any or no settings.
Add the following stylesheet rule to complete installation:
.panelwrappers {
overflow: hidden;
}Slinky Slider will automatically calculate the correct width for the opened panel in order to completely fill the containing element. You can manually calculate this value by taking the width of the containing element and subtracting (n-1)*(smallsize+panelspacing) where n is the number of panels you are showing.
Optional Settings
numberofpanels (integer)
This specifies the number of HTML files to load. Each HTML file should be named ending with a number in the range 1 - n where n is the value of numberofpanels.
(default value: 5)
smallsize (integer)
This specifies the width in pixels that the panels should be collapsed down to.
(default value: 20)
transition (integer)
This specifies the time in milliseconds for the animation between open panels.
(default value: 1000)
doauto (boolean)
Set this to true to enable automatic cycling through the panels until a mouseover is detected. Set to false to disable automatic cycling.
(default value: true)
autotimer (integer)
This specifies the time in milliseconds between automatic transitions.
(default value: 8000)
panelspacing (integer)
This specifies the margin in pixels between panels. Margin is only applied to the right hand edge of each panel, so this will not affect the rest of the layout on your page.
(default value: 3)
panelname (string)
This specifies the filenames to be loaded. The filenames take the format [panelname][n].html where panelname is as specified by this parameter, and n is in the range 1 - numberofpanels.
(default value: "panel")
Issues/Support
Please report issues or support requests via the jQuery issues log.
Notes for usage
Sometime the browser can't quite keep up with the animation, forcing the last panel momentarily off the canvas of the containing element. To fix this issue you can wrap your nominated container inside another container with overflow set to hidden. Increase the size of your nominated container by 1 or 2 pixels to allow leeway for the browser.
It is essential that you add the following stylesheet rule to your CSS to avoid display issues relating to the panelspacing attribute:
.panelwrappers {
overflow: hidden;
}Changelog
- 21/06/2009: Released v1.0.1
- 19/01/2009: Released v1.0
