Выделение последних сообщений (Wordpress)

Я использую следующий код для отображения последних сообщений в Wordpress с отметкой даты и времени в бегущей строке.

<script type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var i = 0;
    $(".marquee").last().addClass("last");
    $(".marquee").each(function() {
          var $this = $(this);
          $this.css("top", i);
          i += $this.height();
          doScroll($this);
    });
});

    function doScroll($ele) {
        var top = parseInt($ele.css("top"));
        if(top < 0) { //bit arbitrary!
            var $lastEle = $(".last");
            $lastEle.removeClass("last");
            $ele.addClass("last");
            var top = (parseInt($lastEle.css("top")) + $lastEle.height());
            $ele.css("top", top);
        }
        $ele.animate({ top: (parseInt(top)-600) },
200,'linear', function() {doScroll($(this))});
    }

</script>


<div id="mholder">

<div class="marquee" style="height: auto">
<a title="<?php echo the_title() ?>" href="<?php the_permalink() ?>">
<?php echo $title_short ?></a><span><small><br/>
<?php the_time('F jS, g:i a') ?></small></span>

</div>

</div>

<style>

.marquee {
    height: 50px
    color: #ccc;
    border: none;
    position:absolute;
}

#mholder {
    height: 600px;
    width: 150px;
    border: none;
    position: absolute;
    overflow: hidden;
}

</style>

I would like to make it so only 4 out of the 14 posts are displayed at a time. The scrolling mechanism is irregular and I'd like to make it smooth and steady. Furthermore, if anyone knows how to display specific category posts, that would be helpful.


javascript wordpress php post marquee
person musclez    schedule 01.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>

<div class="newsblock">

<ul id="newgall">
<?php
//display 12 posts with title and date
$args=array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'post_category' => '123',
  'posts_per_page' => 12,
  'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {

  while ($my_query->have_posts()) : $my_query->the_post(); 
?>

    <li>
    <p>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> 
    <br/><?php the_time('F jS, g:i a') ?>
    <br/>
    </p>
    </li>

    <?php
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>
  </ul>
</div>          
<script>
        var $items = $('#newgall li'),
            i = 0;

        function slide() {
            var index = i % $items.length;
            $items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
            i += 4;
            setTimeout(slide, 400);
        };

        slide();
</script>
    </body>

Работает. Наслаждайтесь, Интернет!

person musclez    schedule 13.08.2014