As shown on the example page, this script generates a progress bar automatically instead of the developer adding some html.
Depending on the settings of the script, it dynamically generates a progress bar adjusted to the number of slides in the Cycle container.
Features
- Cycle through elements
- Adjustable animation times
- Generates a navigation bar that also shows the progress
- Works in modern browsers
Implementing the script
The zip archive contains an example page to see how to get things to work, but the following steps will tell you how to make your own.First we need to upload the contents of the zip archive to your web server (or local for testing).
Create a new html page and include the following code in the <head> section:
1 2 3 4 5 6 7 8 9 | <head> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" /> <!-- Scripts --> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script> <script type='text/javascript' src='js/presentationCycle.js'></script></head> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="presentation_container" class="pc_container"> <div class="pc_item"> <div class="desc"> <h1>Description title</h1> You can put your description in here. </div> <img src="images/slide1.jpg" alt="slide1" /> </div> <!-- ... repeat the previous item --></div> |
The child elements have a class of “pc_item”, this also corresponds to the default settings in the stylesheet.
Have you uploaded all the files and images? Then you are ready to initialize the script.
Put the following below the Cycle container:
1 2 3 | <script type="text/javascript"> presentationCycle.init();</script> |
In the following section I will talk about how to configure the script to adjust the looks to your likings.
Adjusting the looks
The first thing I’ll explain is how to adjust the images that are used to generate the progress bar.The Javascript file of Presentation Cycle contains the following code regarding images the script uses (line 18):
1 2 3 4 5 6 7 8 | //progressbar optionsbarHeight: 14,barDisplacement: 20,barImgLeft: "images/pc_item_left.gif",barImgRight: "images/pc_item_right.gif",barImgCenter: "images/pc_item_center.gif",barImgBarEmpty: "images/pc_bar_empty.gif",barImgBarFull: "images/pc_bar_full.gif", |
To adjust the images you need to have two square images next to each other. Making the left part the inactive one and the right the active one.
The only requirement is that all the images have the same height, this is to position the bar the right way. Also make sure that you set the height in the script too.
barDisplacement is the combined value of padding + margin the bar has.
To change settings the following code might help; there is no need to change the Javascript file. This code is executed after the Cycle container defined.
1 2 3 4 | presentationCycle.barHeight = 10; //different from the defaultpresentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //using a different imagepresentationCycle.init(); //start the script |
1 2 3 4 5 6 7 | //slide optionsslideTimeout: 8000,containerId: "presentation_container",//cycle optionscycleFx: 'scrollHorz',cycleSpeed: 600, |
containerId is the container of the cycle elements.
cycleFx is the effect of cycle the script will be using, for all the effects visit the effect browser.
cycleSpeed is the speed of the animation.
I used <div> elements to add text to the slides, you can play around with the elements to make them fit your needs, that’s the great thing about Cycle!
For more examples on how to adjust the script you can take a look at the source of the different examples on the example page.
Good luck!
0 comments:
Post a Comment