スライダー時のメイン画像をサムネイルとリンクしランダム表示したい

  • 解決済 ymg24city

    (@ymg24city)


    11年、 6ヶ月前

    初めまして。
    現在下記のjQueryスライダーを使用してサイトを製作しているのですが、
    メインの画像とサムネイル画像をリンクしランダム表示をしたいと考えています。


    参考スライダー

    現在の下記の状態だとメイン画像にランダム、とサムネイル画像にランダムを指定しているので別々にランダムなり、うまく表示できません。

    例えば
    メイン画像ＡとサムネイルＡ
    メイン画像ＢとサムネイルＢ
    メイン画像ＣとサムネイルＣ
    は固定し、
    メイン画像ＢとサムネイルＢ
    メイン画像ＣとサムネイルＣ
    メイン画像ＡとサムネイルＡ
    といった感じにランダム表示出来ないか悩んでいます。
    アドバイスなどご教授いただければと思います。
    宜しくお願い致します。

    <div id="jslidernews1" class="lof-slidecontent" style="width:650px; height:300px;">
<!--	<div class="preload"><div></div></div>
-->    		 <!-- MAIN CONTENT -->
              <div class="main-slider-content" style="width:650px; height:300px;">
                <ul class="sliders-wrap-inner">
        <?php query_posts('post_type=>bnr&posts_per_page=35&orderby=rand'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <li><a href="<?php the_field('link'); ?>">
                    	<?php
							$attachment_id = get_field('bnr',$post->ID);
							echo wp_get_attachment_image( $attachment_id, array(650,300));
						?>
                    </a></li>
        <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>
                  </ul>
              </div>
 		   <!-- END MAIN CONTENT -->
           <!-- NAVIGATOR -->
           	<div class="navigator-content">
                  <div class="button-next">Next</div>
                  <div class="navigator-wrapper">
                        <ul class="navigator-wrap-inner">
        <?php query_posts('post_type=>bnr&posts_per_page=35&orderby=rand'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                           <li><?php
							$attachment_id = get_field('bnrthumbnail',$post->ID);
							echo wp_get_attachment_image( $attachment_id, array(75,25));
						?></li>
        <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>
                        </ul>
                  </div>
                  <div  class="button-previous">Previous</div>
             </div>
          <!----------------- END OF NAVIGATOR --------------------->
          <!-- BUTTON PLAY-STOP -->
          <div class="button-control"><span></span></div>
           <!-- END OF BUTTON PLAY-STOP -->
 </div>
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター Takuro Hishikawa

    (@hissy)

    11年、 6ヶ月前

    そんなときは query_posts で２回ランダム取得するのではなく、 get_posts を使って一時的に変数に格納して再利用しましょう。

    ※下記コード例は未検証

    <?php
$args = array( 'post_type' => 'bnr', 'posts_per_page' => 35, 'orderby' => 'rand' );
$the_posts = get_posts( $args );
?>
<ul class="sliders-wrap-inner">
<?php
foreach( $the_posts as $post ) {
    setup_postdata($post);
    ?>
    <li>
    	<a href="<?php the_field('link'); ?>">
	    <?php
		$attachment_id = get_field('bnr',$post->ID);
		echo wp_get_attachment_image( $attachment_id, array(650,300));
		?>
		</a>
	</li>
    <?php
}
?>
</ul>
<ul class="navigator-wrap-inner">
<?php
foreach( $the_posts as $post ) {
    setup_postdata($post);
    ?>
    <li>
    	<a href="<?php the_field('link'); ?>">
	    <?php
		$attachment_id = get_field('bnrthumbnail',$post->ID);
		echo wp_get_attachment_image( $attachment_id, array(75,25));
		?>
		</a>
	</li>
    <?php
}
?>
</ul>
<?php wp_reset_postdata(); ?>
    トピック投稿者 ymg24city

    (@ymg24city)

    11年、 6ヶ月前

    hissy様
    ご返答ありがとうございます。

    早速試してみたところ、見事に動作してくれました。
    コードまで記述して頂き、わかりやすく説明して頂きましてありがとうございます。

    まだまだ勉強不足ですが、また頑張りたいと思います。

    今回はありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「スライダー時のメイン画像をサムネイルとリンクしランダム表示したい」には新たに返信することはできません。