jQuery banner slideshow (6 posts)

  1. zanfardinom
    Posted 5 years ago #

    How do I create a banner slide show (images that rotate every 5 secs) using jQuery and WordPress? Also, is it possible to pull images from a folder...instead of hand coding each image? I have a folder for each season (Winter, Fall, Summer, Spring). So, code will check to see if it is winter and if so pull only the images form the Winter folder.

    Any examples or tutorials on how to do this. I have done this using PHP and Flash, but for some reason when I moved my site over to WordPress it does not work. The flash object loads, but not the images.


  2. equalmark
    Posted 5 years ago #

    There are lots of plugins that will create the effect that you are looking for. One such plugin that I have had experience with is the "Featured Content Gallery" plugin which works well.

    I have also used the "Featured Content Glider" script with some success.

  3. zanfardinom
    Posted 5 years ago #

    Thanks, equalmark!

    I have seen the plugins for WordPress, but not this one. Will this give me the ability to ready images from a folder based on current season? If so, how would I do that?


  4. zanfardinom
    Posted 5 years ago #

    Hey equalmark!

    I just watched the tutorial and this is a great plugin, but it would be a lot of work to maintain...correct me if I am wrong. I would have to have a page or post for every image.

    All I need is a banner slide show showing 5 images, with 5 second transition, for the winter season. Then, when spring arrives it shows 10 images.

    I did this using Flash for my site, but when I merged everything over to WordPress the player show and the pictures do not.


  5. crayoncrisis
    Posted 5 years ago #

    I've used the EasySlider from Css Globe to slide all the images attached to a Page, by using the function wp_get_attachment_image in a Page template.

    No idea if this is the best way to go, and not sure about your seasons - but it worked for me on this site. The images are not inserted in any post or Page, but you do have to make sure that they are attached.

  6. zanfardinom
    Posted 5 years ago #

    Hi crayoncrisis,

    Thanks for the post.

    Here's what I did to solve my problem. I used php to get the current season, thus pointing me to the right location. Then, I use PHP to read all contents of the folder (excluding the . and ..). Lastely, I use jQuery (I found a simple script online at http://jonraasch.com/blog/a-simple-jquery-slideshow) with some CSS for the slideshow. I inserted the HTML into my header.php file. You can find the jQuery and CSS at the URL above.

    Thought I would share...thank you all for your time and help.


    <div id="photo">
    // Gets current season
    $y = date("Y");
    if (time() < mktime(0, 0, 0, 3, 21, $y)) { $season = "winter"; }
    elseif (time() < mktime(0, 0, 0, 6, 21, $y)) { $season = "spring"; }
    elseif (time() < mktime(0, 0, 0, 9, 22, $y)) { $season = "summer"; }
    elseif (time() < mktime(0, 0, 0, 12, 22, $y)) { $season = "fall"; }
    else { $season = "winter"; }
    // Reads contents of folder based on season, then displays each item
    // Make sure first image file name is banner_01.jpg
    $folder = dir ("wp-content/themes/clt_v1/styles/images/" . $season . "/"); ?>
    <img src="<?php bloginfo('template_url'); ?>/styles/images/<?php echo $season ?>/banner_01.jpg" alt="Congaree Land Trust <?php echo ucfirst($season); ?> images" class="active" />
    while ($folderEntry = $folder->read()) {
    if ($folderEntry == '.' || $folderEntry == '..' || $folderEntry == 'banner_01.jpg') {
    // Does nothing...skips '.', '..' and 'banner_01.jpg' result
    } else { ?>
    <img src="<?php bloginfo('template_url'); ?>/styles/images/<?php echo $season ?>/<?php echo $folderEntry ?>" alt="Congaree Land Trust <?php echo ucfirst($season); ?> images" />
    $folder->close(); ?>
    </div><!-- End photo -->

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.