Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
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

1 Answer 1

up vote 8 down vote accepted

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

share|improve this answer
    
excellent. Thanks! –  cwd Jun 12 '11 at 17:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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