cwd
  • 0
Учитель

Какой плагин можно использовать для создания списка/слайд-шоу избранных изображений?

  • 0

Я ищу плагин, который позволит пользователю загружать файлы, может быть, 4-10, которые можно использовать на главной странице как часть слайд-шоу. Я могу сам кодировать часть слайд-шоу, если это необходимо, но меня интересует способ, которым пользователь может выбирать/загружать фотографии. Было бы отлично, если бы они были интегрированы с медиа-менеджером WordPress, как и другие загрузки. Спасибо!

Share
  1. я могу порекомендовать вам этот geovid.com/flash_slideVidShow, он отличный и простой

    • 0
  2. jQuery Cycle и Cycle Lite очень гибкие и простые в использовании.

    Большинство плагинов для слайд-шоу WordPress либо не делают именно то, что вам нужно, либо пытаются делать все и слишком сложны с параметрами и функциями.

    Решение

    Встройте функцию слайд-шоу в свой шаблон темы или создайте свой собственный плагин.

    Чтобы сделать его простым и интуитивно понятным для пользователя, я бы создал настраиваемый тип сообщения «Избранный контент», который поддерживает только избранное изображение (миниатюру) и отрывок, если вы хотите добавить подпись к каждому изображению.

    Зарегистрируйте свой пользовательский тип сообщения и для аргумента поддержки используйте:

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

    Поместите свои скрипты в 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);
                }
    
    ?>
    

    Установите размер «избранного изображения» в functions.php

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

    Настройте шаблон для отображения слайд-шоу

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

    Добавьте настройки цикла jQuery в файл custom.js.

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

    Добавьте немного 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
        }
    

    Пользовательский интерфейс

    введите описание изображения здесь

    Слайдер на переднем конце

    введите описание изображения здесь

    • 0

Оставить ответ

You must login to add an answer.