Simple content switcher jquery code#
If your confused, just read the code sample in either the multiple frame.html file or the code snip below and it should clear things up. Then it's simply a matter of adding the set class name to the buttons and content blocks. Simply put, when the page loads, we specify which panels we want to use on the page, and we assign the set name we want to assign to the panel. Setup for a multi panel switcher is similiar to the basic 1 panel switcher, how ever an additional set class must be assigned to the buttons and the hidden content blocks.Ĭonsider this set class as identifying which panel we want the buttons and content blocks to target. Most of the standard HTML markup and styling has been removed to help reduce confusion.
Simple content switcher jquery how to#
The file multiple frame.html located in code samples directory, contains the basic code to help understand how to use this plugin with multiple panels. Along with one additional initialization string per panel your using Using multiple panels on a single page is also possible, its very similiar to using a single panel although you need to specify an additional class and parameter on the initialization string. You might notice the initialization string says jcps.fader, this fades the content in and out, but if you would prefer to slide the content in and out change this string to say jcps.slider instead This is purely optional, but not everyone wants a blank page to load. What is that extra show class on the content1-content div? If you wish to have some content display as the default content in the panel when the page loads, simply add the show class to the end of the div class list. The actual content you want to switch in and out of the panel, this is hidden The panel you wish to use to display the content The switcher buttons, basic anchor tags, with the switcher class Initialize the Content Switcher, specify the speed (in milliseconds) of the transition and the panel ID you wish the content to appear in Your head section, embedding JS and CSS files When it all comes together it looks like: This must be wrapped in a jQuery $(document).ready blockĮg jcps.fader(300, '#switcher-demo-panel')
The switcher buttons, typically a simple tag, with a unique ID of your choice, and the switcher class applied.There are 4 main components to a simple page like this, those are: The most basic use is a single panel, like what this page is. The file basic frame.html located in the code samples directory contains the basic code to help understand how to use this plugin. (4Kb), it doesnt attempt to perform every action under the sun like some other plugins, its clean and simply to the point, it switches content around with a few additional features and thats it. The jQuery Content Panel Switcher is extemely lightweight. There are two types of transition effects you can pick from, a fader and a slider. Unlike tabbed or folding style content swicthers, the panels and swicther buttons can be located anywhere on the page, any size or shape. Setup is very simple, just create your content, create the panel you wish to switch the content in and out of, create your buttons then assign the appropriate classes and ID's. You can have single or multiple content switching panels on a single pageĬontent panels can be either span or div elements, and the buttons used to switch the content can be just about anything, so long as they have the right clases assigned. The same shold be made for one of my other images.The jQuery Content Panel Switcher is a simple, very lightweight jQuery plugin that allows smooth transitioning of content in and out of panels located anywhere on the page. And after another 4 seconds, I'd switch back again. This means that after 4 seconds, I'd like to change the image called /media/1618/5_1.jpg with another image. Two of the above images should be switched automatically after a certain amount of time (every 3-4 sec.). I need to create a very simple image switcher that changes my images automatically.
0 kommentar(er)
