Podobné články jako jednoduché slideshow

V rubrice: Tipy & Triky | Obtížnost:

Možností výpisu podobných článků je opravdu mnoho. V dnešním tipu si ukážeme efektní slideshow pomocí Javascriptu.

Jak vypisovat podobné články už jsem jednou psal zde, ale nyní ukážeme efektnější verzi, která bude využívat javascript, respektive jeho framework jQuery. Pod článkem se zobrazí pouze jeden obrázek s odkazem a ten bude přecházet do dalších. Kolik už záleží na vás.

Výsledek pak vypadá nějak takto:

A teď, co je k tomu třeba udělat. Předně do souboru šablony functions.php vložit následující kód. Ten obsahuje jak php funkci pro vypisování, tak css styl i javascript kód vykonávající animaci.

<?php

function relatedSlide($ID, $pocet) {
    $posttags = get_the_tags($ID);
    if ($posttags) {
        foreach ($posttags as $posttag) {
            $tags[] = $posttag->term_id;
        }
    }
    $not = array($ID);
    $loop = 0;
    $my_query3 = new WP_Query(array('tag__in' => $tags, 'posts_per_page' => $pocet, 'orderby' => 'rand', 'post__not_in' => $not));
    if ($my_query3->have_posts()) {
        echo "<div id='relat'>";
        while ($my_query3->have_posts()) {
            $my_query3->the_post();
            echo "<div class='podobny podobny" . $loop . "'>";
            echo "<h4><a href='" . get_permalink() . "'>" . get_the_title() . "</a></h4>";
            ?>
            <a href='<?php the_permalink(); ?>'>
            <?php if (has_post_thumbnail()) the_post_thumbnail(array(250, 300), array('class' => 'alignleft')); ?>
            </a>
            <p><?php the_excerpt() ?></p>
            <?php
            echo "</div>";
            $loop++;
        }
        echo "<div style='clear: both'></div>";
        echo "</div>";
        ?>
        <style>
            #relat {padding: 20px 0; margin: 0 auto; position: relative; min-height: 240px}
            .podobny {display: none}
            .podobny0 {display: block}
            .podobny h4 {position: absolute; background: white; padding: 5px; opacity: 0.9; width: 240px}
            #relat p {padding: 0; margin: 0; position: relative;z-index: 2; width: 270px; float: right}
            #relat a {position: relative; z-index: 10}
        </style>
        <script>

            function flash(){
                jQuery('#relat .podobny:visible').fadeOut(1000, function(){
                    jQuery('#relat .podobny'+i).fadeIn(1000);
                });
                i++;
                if(i==slidu) i = 0;
            }

            jQuery(document).ready(function($){
                slidu = jQuery('#relat .podobny').size();
                i = 1;
                slide = setInterval("flash()", 4000);
            })
        </script>
        <?php
    }
    wp_reset_postdata();
}

wp_enqueue_script('jquery');
?>

Nyní si nalezněte vhodné místo v šabloně (obvykle se nalézá někde v souboru single.php)  a vložte toto:

relatedSlide($post->ID, 10);

Druhý parametr (10) znamená, kolik článků se vypíše.

V rubrice: Tipy & Triky | Obtížnost:

Komentáře

  1. Tak v tomto případě u mě nastala pravděpodobně kolize javascriptů. Nefunguje zároveň s lightboxem.

    1. Podívej se do javascriptové konzole, ta by měla vypsat chybu, která nastala.

Comments are closed.