6

I'm looking for a plugin that will allow the user to upload files, maybe 4-10 that can be used on the homepage as part of a slideshow. I can code the slideshow part myself, if necessary, but the thing I'm interested in is a way for the user to select / upload the photos. It would be excellent if they were integrated with Wordpress' media manager just like other uploads. Thanks!

  • i can recommend u this one geovid.com/flash_slideVidShow, it's great and simple – user813573 Jun 27 '11 at 8:53
  • flash is a thing of the past and this thing just looks kind of sketchy anyhow. – cwd Jun 27 '11 at 10:20
8

jQuery Cycle and Cycle Lite are very flexible and very easy to use.

Most WordPress slideshow plugins either don't do exactly what you need or they try to do everything and are overly complicated with options and features.

The solution

Build the slideshow feature into your theme template or code your own plugin.

To make it easy and intuitive for the user I would create a "Featured Content" custom post type that only supports a featured image (thumbnail) and the excerpt if you want to add a caption to each image.

Register your custom post type and for the supports argument use:

 'supports' => array('thumbnail','excerpt',)

Enqueue your scripts in functions.php

<?php

    add_action( 'init', 'c3m_get_the_js' );

    function c3m_get_the_js() {
    wp_register_script( 'jquery.cycle', get_bloginfo('template_directory'). '/path_to_your_js/jquery.cycle.lite.1.1.min.js', array('jquery'), TRUE);
    wp_enqueue_script('jquery.cycle' );
    wp_enqueue_script( 'custom', get_bloginfo('template_directory'). '/path_to_your_js/c3m_functions.js', array('jquery.cycle'), TRUE);
            }

?>

Set your "featured image" size in functions.php

add_image_size( 'featured', 747, 285, true );

Set up the the template to display your slideshow

<div id="home-slider">

        <div class="cycle-nav">
            <a id="prev2" href="#">«Prev</a> <a id="next2" href="#">Next»</a>
        </div>

        <ul id="cycle" class="pics">

            <?php
                        $i = 1;
                        global $wp_query;
                        $custom_query = array(
                            'post_type' => 'featured_content',
                            'posts_per_page' => -1
                        );
                        if ( $custom_query )
                            query_posts( $custom_query );
                        $more = 0;
                    ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <li class="cycle-item slide-<?php echo $i; ?>">

                 <?php   the_post_thumbnail('featured'); ?>
                <div class="excerpt">
                    <?php echo get_the_content('<span class="more">more &raquo;</span>'); //Use this if you want text with your images ?>
                </div>
            </li>

            <?php
                        $i++;
                        endwhile;
                        endif;
                    ?>
                    <?php wp_reset_query(); ?>

        </ul>

    </div> <!-- /home-slider -->

Add your jQuery Cycle settings to your custom.js file

jQuery.noConflict();
jQuery(document).ready(function($) {


jQuery('ul#cycle').cycle({
            timeout: 9000,
            speed: 1500,
            delay: 2000,
            prev:   '#prev2',
            next:   '#next2'
        });
});

Add some css

     #home-slider {
width:735px;
     overflow:hidden;
     height:280px; 
    float:right; 
    position:relative;
     margin-right:0; 
    display:inline-block
}

    a#prev2 {
position:absolute; 
    width:31px; 
    height:32px; 
    text-indent:-999em; 
    z-index:100; 
    background-position:0 0; 
    background-image:url(images/cycle-nav.png); 
    top:185px; 
    box-shadow:1px 1px 2px rgba(2,2,2,0.3); 
    -moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
    -webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
    }

    a#prev2:hover {
    background-position:0px -32px
    }

     a#next2 {
    position:absolute; 
    right:0px; 
    width:31px; 
    height:31px; 
    display:block; 
    z-index:100; 
    top:185px; 
    background-position:31px 0px; 
    background-image:url(images/cycle-nav.png); 
    overflow:hidden; 
    text-indent:-999em; 
    box-shadow:1px 1px 2px rgba(2,2,2,.3);  
    -moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
    -webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
    }

     a#next2:hover {
    background-position:31px -32px
    }

    ul#cycle { 
    margin:0;  
    padding:0;  
    list-style:none
    }

    ul#cycle .excerpt {
    width:700px; 
    height:82px;
    background: rgb(0, 0, 0); 
    background:rgba(0,0,0,.5); 
    position:absolute; bottom:0;
    padding:10px 20px 10px 25px; 
    overflow:hidden
    }

The UI

enter image description here

The Slider on the front end

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.