Categories 最近の仕事など

最近実装したスライド

by

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2011.11.11公開

mopslider　http://www.mopstudio.jp/mopSlider2descrip.html

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="ui.core-1.7.2.js"></script>
<script type="text/javascript" src="ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="mopSlider-2.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").mopSlider({'w':950, 'h':245, 'sldW':550, 'btnW':150, 'itemMgn':10, 'indi':"Auto Play", 'shuffle':'n', 'type':'paper', 'auto':'y', 'move':800, 'interval':1500});
});
</script>
スライドの表示部分：
<div id="slideContainer">
<div id="slider" class="clearfix">
<?php
	$args = array(
		'cat' => 3,
		'posts_per_page' => 10,
		'orderby' => menu_order,
		'order' => ASC,
	);
	query_posts($args);
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
～ここに表示したいコンテンツ～
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
</div>

mobilyslider　http://playground.mobily.pl/jquery/mobily-slider.html

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mobilyslider.js"></script>
<script>
$(document).ready(function(){
	$('.slider').mobilyslider({
		content: '.sliderContent',
		children: 'li',
		transition: 'horizontal',
		animationSpeed: 500,
		autoplay: true,
		autoplaySpeed: 5000,
		pauseOnHover: false,
		bullets: false,
		arrows: false,
	});
});
</script>
スライドの表示部分：
  <div id="title" class="slider clearfix">
<ul class="sliderContent">
<li class="item">
～ここにコンテンツ～
</li>
</ul>
  </div>

*Magic Fields で設定ページを作成する場合(フィールドを複製)は以下のとおり、120はページID
<?php
$images = getFieldOrder('image',1,120); 
        foreach($images as $k => $v){ ; 
        echo "<li class='item'>";
           echo get_image('image',1,$v,1,120); 
        echo "</li>";
        } ?>

jCarousel　http://sorgalla.com/jcarousel/

<link rel="stylesheet" type="text/css" href="skin.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>
	<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 10,
        wrap: 'circular',
    });
});
</script>
スライドの表示部分：
<ul id="mycarousel" class="jcarousel-skin-tango">
<?php
	$args = array(
		'cat' => 1,
		'posts_per_page' => 10,
	);
	query_posts($args);
?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
～ここにコンテンツ～
</li>
<?php endwhile; endif; ?>
</ul>
<?php wp_reset_query(); ?>
*設定部分でwrap: 'circular',とすると、ずっと左にスライドする。

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。
プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
2011.11.11公開

nekotaiyo