web-dev-qa-db-fra.com

Quel plugin puis-je utiliser pour créer une liste/un diaporama des images en vedette?

Je cherche un plugin qui permettra à l'utilisateur de télécharger des fichiers, peut-être 4 à 10, pouvant être utilisés sur la page d'accueil dans le cadre d'un diaporama. Je peux coder moi-même la partie diaporama, mais ce qui m'intéresse, c'est de permettre à l'utilisateur de sélectionner/télécharger les photos. Ce serait excellent si elles étaient intégrées au gestionnaire de médias de Wordpress, tout comme les autres téléchargements. Merci!

pluginsmediapost-thumbnailsuploadsslideshow
6
cwd

jQuery Cycle et Cycle Lite sont très flexibles et très faciles à utiliser.

La plupart des plugins de diaporama WordPress ne font pas exactement ce dont vous avez besoin ou essaient de tout faire et sont trop compliqués d'options et de fonctionnalités.

La solution

Créez la fonction de diaporama dans votre modèle de thème ou codez votre propre plugin.

Pour rendre cela facile et intuitif pour l'utilisateur, je créerais un type de message personnalisé "Contenu vedette" qui ne prend en charge qu'une image sélectionnée (miniature) et l'extrait si vous souhaitez ajouter une légende à chaque image.

Enregistrez votre type de message personnalisé et pour l'utilisation de l'argument supports:

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

Mettez vos scripts en file d'attente dans 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);
            }

?>

Définissez la taille de votre "image sélectionnée" dans functions.php

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

Configurer le modèle pour afficher votre diaporama

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

Ajoutez vos paramètres de cycle jQuery à votre fichier custom.js

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


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

Ajouter des 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
    }

L'interface utilisateur

enter image description here

Le curseur sur le devant

enter image description here

8
Chris_O