Jquery 自動スライドショーの設置方法
-
サイトのTOPに自動スライドする画像を表示させたく
調べていたら下記のiqueryを見つけました。設置方法等を拝読し、試行錯誤を重ねましたが
動きません、、現在の環境は
サーバ:さくらインターネットビジネス
使用テーマ:tanzakuです
現在の導入手順としては
①Jqueryプラグインをダウンロード②解答後、展開されるファイルの【images】フォルダの中身をテーマの【images】にコピー
③同じく【js】フォルダの中身をテーマの【js】フォルダにコピー
④同じくスタイルシートの中身をテーマのスタイルシートに追記コピー
⑤スクリプトの読み込みコードをテーマの(header.php)内の<header>直下に記述
<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”js/jquery-easing-1.3.pack.js”></script>
<script type=”text/javascript” src=”js/jquery-easing-compatibility.1.2.pack.js”></script>
<script type=”text/javascript” src=”js/coda-slider.1.1.1.pack.js”></script>⑥スライドボックス設定コードを上記の続きに記述
<script type=”text/javascript”>
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;theInterval = function(cur){
clearInterval(theInt);if( typeof cur != ‘undefined’ )
curclicked = cur;
$crosslink.removeClass(“active-thumb”);
$navthumb.eq(curclicked).parent().addClass(“active-thumb”);
$(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);theInt = setInterval(function(){
$crosslink.removeClass(“active-thumb”);
$navthumb.eq(curclicked).parent().addClass(“active-thumb”);
$(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);
curclicked++;
if( 6 == curclicked )curclicked = 0;
}, 3000);
};
$(function(){
$(“#main-photo-slider”).codaSlider();
$navthumb = $(“.nav-thumb”);
$crosslink = $(“.cross-link”);
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr(‘href’).slice(1) – 1);
return false;
});
theInterval();
});
</script>⑦そして設置コードをテーマの(index.php)内 のどこに記述すればよいかわかりません、、
※あちこちに試行錯誤してみましたが、まともに表示されません。参考サイトには
コンテンツは class=”wrapper” 内に配置してください。
パネルは、<div class=”panel”>~</div> をコピペして増やしていってください。と書かれていますが、使用しているテーマのどのファイルでどこに記述すべきかわかりませn。
恐らく(index.php)内のどこかではないかと思っていますが、わかりません。
ちなみに(index.php)の記述内容は<?php get_header();
// [grid column setting]
$col_w = 290; // width of grid column
$gap_w = 35; // padding + margin-right (15+15+5)
$max_col = 2; // max column size (style div.x1 ~ xN)// * additional info *
// check also “style.css” and “header.php” if you change $col_w and $gap_w.
// – style.css:
// div.x1 ~ xN
// div.grid-item
// div.single-item
// … and maybe #sidebar2 li.widget.
// – header.php:
// gridDefWidth in javascript code.
//
// if you want to show small images in main page always, set $max_col = 1.// [grid image link setting]
$flg_img_forcelink = true; // add/overwrite a link which links to a single post (permalink).
$flg_img_extract = false; // in single post page, extract thumbnail link to an original image.
$flg_obj_fit = ‘large-fit’; // none | small-fit | large-fit … how to fit size of object tag.// * additional info *
// if you use image popup utility (like Lightbox) on main index, set $flg_img_forcelink = false;
?><?php if (is_singular()) : $is_top_single = true; /* wide column for single post */ ?>
<div id=”single-wrapper”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class(‘single-item’); ?> id=”post-<?php the_ID(); ?>”>
<h2 class=”post-title”>” rel=”bookmark”><?php the_title(); ?></h2>
<div class=”post-body”>
<?php
if ($flg_img_extract) {
$content = get_the_content();
$content = apply_filters(‘the_content’, $content);
$content = adjust_single_image($content);
echo $content;
}
else {
the_content();
}
?>
</div>
<?php wp_link_pages(‘before=<p class=”pagination” id=”post-pagination”><span class=”prefix”>’ . __(‘Pages:’) . ‘</span>’); ?>
<p class=”post-meta”>
Published on <?php the_time( get_option(‘date_format’) ); ?> <?php the_time(); ?>.
Filed under: <?php the_category(‘, ‘) ?> <?php the_tags(‘Tags: ‘, ‘, ‘); ?>
<?php edit_post_link(__(“Edit This”), ‘(‘, ‘)’); ?>
</p>
</div><?php comments_template(); ?>
<?php endwhile; else : ?>
<div class=”single-item”>
<h2>Not Found</h2>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
</div><?php endif; ?>
</div><!– /single-wrapper –>
<?php /* make a new query for grid items (in single page) */
$new_query_arg = ‘paged=’.$paged;// use this code if you want filter items by category.
/* $arr_catID = array();
foreach( get_the_category() as $cat) $arr_catID[] = $cat->cat_ID;
if ( count($arr_catID) ) $new_query_arg .= ‘&cat=’ . join(‘,’, $arr_catID);
*/query_posts($new_query_arg);
?><?php endif; /* end of if is_singular() */ ?>
<?php get_sidebar(); ?>
<div id=”grid-wrapper”>
<?php if (have_posts()) :
if ( $is_top_single ) $GLOBALS[‘more’] = false; //important
while (have_posts()) : the_post(); ?>
<?php
$content = get_the_content(‘Details »’);
$content = apply_filters(‘the_content’, $content);
list($col_class, $grid_img) = adjust_grid_image(
$content,
$col_w,
$gap_w,
$max_col,
$flg_img_forcelink,
$flg_obj_fit
);
?>
<div <?php post_class(‘grid-item ‘ . $col_class); ?> id=”post-<?php the_ID(); ?>”>
<h2 class=”post-title”>” rel=”bookmark”><?php the_title(); ?></h2>
<?php if ($grid_img) echo ‘<div class=”grid-image”>’ . $grid_img . ‘</div>’; ?>
<div class=”post-body”>
<?php
$content = preg_replace(‘/<img(?:[^>]+?)>/’, ”, $content); // remove img tags
$content = preg_replace(‘/<a([^>]+?)><\/a>/’, ”, $content); // remove empty a tags
$content = preg_replace(‘/<p([^>]*?)><\/p>/’, ”, $content); // remove empty p tags
$content = preg_replace(‘/<object(.+?)<\/object>/’, ”, $content); // remove object tags
echo $content;
?>
</div>
<p class=”post-meta”>
Published on <?php the_time( get_option(‘date_format’) ); ?> <?php the_time(); ?>.
Filed under: <?php the_category(‘, ‘) ?> <?php the_tags(‘Tags: ‘, ‘, ‘); ?>
<?php edit_post_link(__(“Edit This”), ‘(‘, ‘)’); ?>
<?php /*comments_popup_link();*/ ?>
</p>
</div><?php endwhile; else : ?>
<div class=”grid-item x1″>
<h2>Not Found</h2>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
</div><?php endif; ?>
</div><!– /grid-wrapper –>
<div class=”pagination” id=”grid-pagination”>
<?php paginate_links2($is_top_single); ?>
</div><?php /* reset the query */
wp_reset_query();
?><?php get_sidebar(‘2’); ?>
</div><!– /container –>
<?php get_footer(); ?>
とデフォルトでは記述されております。
Qこの中のどこに記述すればよいでしょうか?
Qそれとも、それ以前に他の問題があるのでしょうか?私の不勉強さ故、マナー違反等している場合は大変申し訳ございません
ご教授いただければ幸いで御座います何卒宜しくお願い致します
- トピック「Jquery 自動スライドショーの設置方法」には新たに返信することはできません。