Presentation Cycle: Cycle with a progressbar

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

In this article I’ll explain how to implement this on your web page and give you some tips on how to adjust the looks of the cycle elements and progress bar.

Presentation Cycle: Cycle with a progressbar

Download Get the goods Example See it in action!

Download the source code here:
http://www.gayadesign.com/scripts/presentationCycle/presentationCycle.zip

View the example here:
http://www.gayadesign.com/scripts/presentationCycle/

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:

<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>

It's time to create the container that will contain the html elements for the Cycle:

<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 container of the cycle elements has a default id of "#presentation_container". This corresponds to the default settings of the script and the stylesheet.

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:

<script type="text/javascript">
presentationCycle.init();
</script>

This is all you need to do to get the default look going!

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):

//progressbar options
barHeight: 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",

The bar height is defined in pixels, this is required for the script to work properly. The height is the same as the images that are contained in the images folder. As you can see the images are sprites. I've included the active and inactive version of the image in one image to reduce loading time and it makes the script work better.

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.

presentationCycle.barHeight = 10; //different from the default
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //using a different image

presentationCycle.init(); //start the script

To adjust the settings of the cycle you can adjust the following settings:

//slide options
slideTimeout: 8000,
containerId: "presentation_container",

//cycle options
cycleFx: 'scrollHorz',
cycleSpeed: 600,

slideTimeout is the time it takes for a slide to go to the next one.
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!

Liked this article? Sharing is caring!

105 Comments on this subject

  1. Gaya said:

    @Andy: thanks dude!

    @marco: maybe you’ll find a use someday ;) thanks for the comment

    @hackmaskate: thanks buddy, glad you liked it :)

    @Umut: Thanks dude, and thanks for the post on Webresourcesdepot!

    @Yoosuf: Thanks Yoosuf, and thanks for letting me know about the mention on umut’s blog

    @Pim: I didn’t take it down because I thought it looked cool haha. Thanks dude.

  2. LuK said:

    hey, nice plugin!

    wanted to ask if it would be possible to add something like a mouseout event handler, so when somebody hovers over the slider-containing-div the loading stops and the user can interact with the navigation and when he leaves the div area it circles again through the items…now when you once used the navigation it stops and doesn’t continue…would be very nice =)!

    keep up the good work!

  3. Neeko said:

    Hi Gaya !

    Great slider, neat effect.
    I’m using it for a website i’m creating, and it looks really good !
    Thanks a lot !

    Just would like to know if it would be possible to have a play/stop function in it, because once you click a step on the progress bar it stops the whole animation :/

    Anyway, stunning job !

  4. Drazen Mokic said:

    Hey, i really like it!

    Just one thing, i don`t know if this is a feature or a bug :D If you click on the “next” point the progress bar does not continue for me. I stays there where the click event was and stops the progress.

  5. Sam said:

    Great slideshow Gaya. Great job !

    Just one thing : I want to change colors of the slide bar >>> Do you have your working files to change easily colors ?

  6. Jim Wurster said:

    This is really a nice slider and will be using it for an “under construction” web page for a site I’m building. Since I wanted to use larger photos, I needed to make some adjustments. One was to remove the background png image and replace it with CSS as below. This makes it a little more flexible.
    .pc_container {
    width: 600px;
    height: 360px; /*jimw was 200px*/
    padding: 15px 1px 47px 1px;
    /* background-image: url(‘../images/pc_bg.png’);*/
    margin: 0px auto;
    background-color:#000000;
    z-index: 9999; /* keep the bar on top */
    /* CSS3 */
    -moz-border-radius-topleft: 8px;
    -khtml-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    -khtml-border-radius-bottomleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px;
    -khtml-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    -khtml-border-radius-bottomright: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */
    -khtml-box-shadow: 0px 1px 10px #666;
    -webkit-box-shadow: 0px 1px 10px #666;
    /* CSS3 end */
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    }

  7. majid said:

    hello and thank you for your nice scipt.
    when i click on a certain slide it shows that and stops animation.
    how can i change the script to prevent this.
    i need your help.
    thanks again and good luck.

  8. majid said:

    hello and thank you for your nice script.
    when i click on a certain slide it shows that and stops animation.
    how can i change the script to prevent this.
    i need your help.
    thanks again and good luck.

  9. majid said:

    hello every one.
    i read all comment. some of you had a same problem.
    when you click on a certain slide , it stops animation.
    if you don’t like this, you can delete line 167 and 169 of presentation cycle.
    //presentationCycle.disableAnimation = true;
    //$(‘#’ + presentationCycle.containerId).cycle(‘pause’);

  10. hc said:

    I’ve get a problem in IE8, when I try to load this. It gives me a problem saying:

    “Invalid argument” on line 4618 in jquery.js, which contains:

    style[ name ] = value;

    Im using the newest jquery version and everything works perfect in Firefox. I use youtools carousel beside this script, which is built in mootools, but I have fixed the conflict problem. Therefore it works perfect in Firefox.

    Please help me… I’ve tried a lot of things to fix this problem, but without success ):

    Best Regards and many thanks.

  11. b@z said:

    I’ve a problem with the background of the containers pc_item and pc_container (just in Internet Explorer).
    I need a transparent background since I’ve positioned some DIV one over another.
    But unfortunately (I can’t understand why) it takes the white background even if I try to set background-color:transparent.

    someone could give me an help? It will be really appreciated!

    Bye!!

    PS: really nice job!

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>