サポート » 使い方全般 » jQuery(AnythingSlider)を動かすには?

  • 解決済 tar2323

    (@tar2323)


    質問です。
    wordpressにAnythingSliderを設置しようと考えてますが、上手く動作しません。
    各所で調べた通りにはやっているのですが、細かいところが解らず、そこが原因かも知れないので質問させてもらうことになりました。
    どなたか解りましたらよろしくお願いします。

    テーマはデフォルトを弄っています。

    まず
    jquery.anythingslider.js と jquery.easing.1.2.js
    を使用テーマの内にjsフォルダを作って置きました。
    cssも同様です。

    header.php
    <?php wp_head(); ?>の上に

    <?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.2.js', array('jquery')); ?>
    <?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.js'); ?>
    <?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/slider.css'); ?>

    と記述。

    それからhead内に

    <script type="text/javascript">
    function formatText(index, panel) {
    return index + "";
    };
    
    jQuery(function () {
    
    jQuery('.anythingSlider').anythingSlider({
    easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
    autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
    delay: 3000, // How long between slide transitions in AutoPlay mode
    startStopped: true, // If autoPlay is on, this can force it to start stopped
    animationTime: 400, // How long the slide transition takes
    hashTags: false, // Should links change the hashtag in the URL?
    buildNavigation: false, // If true, builds and list of anchor links to link to each slide
    pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
    startText: "Go", // Start text
    stopText: "Stop", // Stop text
    navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
    });
    
    jQuery("#slide-jump").click(function(){
    jQuery('.anythingSlider').anythingSlider(6);
    });
    
    });
    </script>

    と記述しました。

    <?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.2.js', array('jquery')); ?>に倣って、外部読み込みも試してみましたが、その場合の’easing’にあたる部分をどう記述していいか解りませんでした。

    それから使用テンプレートのcontents部分に

    <div class="anythingSlider">
    <div class="wrapper">
    <ul>
    <li>
    <img src="<?php bloginfo('template_url'); ?>/images/01.jpg" alt="" />
    </li>
    <li>
    <img src="<?php bloginfo('template_url'); ?>/images/02.jpg" alt="" />
    </li>
    </ul>
    </div>
    </div> <!-- END AnythingSlider -->

    を記述。

    としましたが、画像が縦に並ぶだけになってしまっています。
    使用テンプレートをデフォルトに戻してpage.php内に記述をしても同じ結果でした。

    またスクリプトでは $をjqueryと記述するとの説明も見たのですが、
    jquery.anythingslider内の全ての表記を変えるのでしょうか?
    一括置き換えなどもしてみたのですが、結果は同じでした。

    ブラウザはfirefox、chromeで確認済みです。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは。

    これで解決するか分かりませんが、気になるところを上げておきます。

    まず、jQueryが読み込まれてないのではないでしょうか?
    下記のように書いて見てください。

    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.2.js', array('jquery')); ?>
    <?php wp_enqueue_script('anythingSlider', get_bloginfo('template_url') . '/js/jquery.anythingslider.js'); ?>
    <?php wp_enqueue_style('slider-css', get_bloginfo('template_url') . '/css/slider.css'); ?>

    下記は、ページの後半、つまりフッター付近で書き出されるようにした方が良いかもしれません。順序が大事ですので。

    <script type="text/javascript">
    function formatText(index, panel) {
    return index + "";
    };
    
    jQuery(function () {
    
    jQuery('.anythingSlider').anythingSlider({
    easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
    autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
    delay: 3000, // How long between slide transitions in AutoPlay mode
    startStopped: true, // If autoPlay is on, this can force it to start stopped
    animationTime: 400, // How long the slide transition takes
    hashTags: false, // Should links change the hashtag in the URL?
    buildNavigation: false, // If true, builds and list of anchor links to link to each slide
    pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
    startText: "Go", // Start text
    stopText: "Stop", // Stop text
    navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
    });
    
    jQuery("#slide-jump").click(function(){
    jQuery('.anythingSlider').anythingSlider(6);
    });
    
    });
    </script>

    動かない場合は、まず、意図した通りにタグが書き出されているかソースをチェックして下さい。
    それから、ブラウザのエラー表示を有効にした上で、Javaスクリプトのエラーもチェックしましょう。
    例えば、Chromeは、Javaコンソールがあるので、Javaスクリプトのエラーチェックに何かと便利です。

    トピック投稿者 tar2323

    (@tar2323)

    遅くなりましたが、返信ありがとうございます。
    <?php wp_enqueue_script(‘jquery’); ?>については、最初からインストールされている、というのを勘違いしていました。
    また、下のタグも下の方に書きこむ事で、無事にスライドはするようになりました。

    が、liごとにページが変わらず、
    画像が縦に並んだままスライドします(しかも画像中途半端な位置に置かれたまま)。

    contents部分には

    <div class="anythingSlider">
    <div class="wrapper">
    <ul>
    <li>
    <img src="<?php bloginfo('template_url'); ?>/images/01.jpg" width="500" alt="" />
    </li>
    <li>
    <img src="<?php bloginfo('template_url'); ?>/images/02.jpg" width="500" alt="" />
    </li>
    </ul>
    </div>
    </div> <!-- END AnythingSlider -->

    CSSもひとまずダウンロード時に同梱されていた

    /*
    	AnythingSlider v1.7+ Default (base) theme
    	By Chris Coyier: http://css-tricks.com
    	with major improvements by Doug Neiner: http://pixelgraphics.us/
    	based on work by Remy Sharp: http://jqueryfordesigners.com/
    */
    
    /*****************************
      SET DEFAULT DIMENSIONS HERE
     *****************************/
    /* change the ID to match your slider */
    #slider {
    	width: 500px;
    	height: 300px;
    	list-style: none;
    	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    	overflow-y: auto;
    	overflow-x: hidden;
    }
    /* Opera width restriction */
    .anythingBase { max-width: 32766px; }
    
    /*****************
      SET COLORS HERE
     *****************/
    /**** Default state (no keyboard focus) ****/
    /* slider window - top & bottom borders, default state */
    div.anythingSlider .anythingWindow {
    	border-top: 3px solid #777;
    	border-bottom: 3px solid #777;
    }
    /* Navigation buttons, default state */
    div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
    	background: #777;
    	color: #000;
    }
    /* start-stop button, stopped, default state */
    div.anythingSlider .start-stop {
    	background-color: #040;
    	color: #fff;
    }
    /* start-stop button, playing, default state */
    div.anythingSlider .start-stop.playing {
    	background-color: #800;
    }
    /* start-stop button, default hovered text color (when visible) */
    div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
    	color: #ddd;
    }
    
    /**** Active State (slider has keyboard focus) ****/
    /* slider window - top & bottom borders, active state */
    div.anythingSlider.activeSlider .anythingWindow {
    	border-color: #7C9127;
    }
    /* Navigation buttons, active state */
    div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
    	background-color: #7C9127;
    }
    /* start-stop button, stopped, active state */
    div.anythingSlider .start-stop {
    	background-color: #080;
    	color: #fff;
    }
    /* start-stop button, playing, active state */
    div.anythingSlider .start-stop.playing {
    	background-color: #d00;
    }
    /* start-stop button, active slider hovered text color (when visible) */
    div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
    	color: #fff;
    }
    
    /***********************
      COMMON SLIDER STYLING
     ***********************/
    /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
    div.anythingSlider {
    	display: block;
    	margin: 0 auto;
    	overflow: visible !important; /* needed for Opera and Safari */
    	position: relative;
    	padding: 0 45px 28px 45px;
    }
    /* anythingSlider viewport window */
    div.anythingSlider .anythingWindow {
    	overflow: hidden;
    	position: relative;
    	width: 100%;
    	height: 100%;
    }
    /* anythingSlider base (original element) */
    .anythingBase {
    	background: transparent;
    	list-style: none;
    	position: absolute;
    	overflow: visible !important;
    	top: 0;
    	left: 0;
    	margin: 0;
    	padding: 0;
    }
    /* all panels inside the slider */
    .anythingBase .panel {
    	background: transparent;
    	display: block;
    	overflow: hidden;
    	float: left;
    	padding: 0;
    	margin: 0;
    }
    .anythingBase .panel.vertical {
    	float: none;
    }
    
    /* Navigation Arrows */
    div.anythingSlider .arrow {
    	top: 50%;
    	position: absolute;
    	display: block;
    }
    div.anythingSlider .arrow a {
    	display: block;
    	height: 140px;
    	margin: -70px 0 0 0; /* half height of image */
    	width: 45px;
    	text-align: center;
    	outline: 0;
    	background: url(../images/default.png) no-repeat;
    }
    /* hide text, target the span so IE7 doesn't text-indent the link */
    div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
    /* back arrow */
    div.anythingSlider .back { left: 0; }
    div.anythingSlider .back a { background-position: left top; }
    div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
    div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
    /* forward arrow */
    div.anythingSlider .forward { right: 0; }
    div.anythingSlider .forward a { background-position: right top; }
    div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
    div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
    
    /* Navigation Links */
    div.anythingSlider .anythingControls { outline: 0; display: none; }
    div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
    div.anythingSlider .anythingControls ul li { display: inline; }
    div.anythingSlider .anythingControls ul a {
    	font: 11px/18px Georgia, Serif;
    	display: inline-block;
    	text-decoration: none;
    	padding: 2px 8px;
    	height: 18px;
    	margin: 0 5px 0 0;
    	background-image: url(../images/default.png);
    	background-position: center -288px ;
    	background-repeat: repeat-x;
    	text-align: center;
    	outline: 0;
    	border-radius: 0 0 5px 5px;
    	-moz-border-radius: 0 0 5px 5px;
    	-webkit-border-radius: 0 0 5px 5px;
    }
    div.anythingSlider .anythingControls ul a:hover {
    	background-image: none;
    }
    /* Navigation size window */
    div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
    
    /* slider autoplay right-to-left, reverse order of nav links to look better */
    div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
    div.anythingSlider.rtl .anythingControls ul { float: left; }    /* move nav link group to left */
    div.anythingSlider.rtl .anythingWindow {
    	direction: ltr;
    	unicode-bidi: bidi-override;
    }
    /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
    
    /* Autoplay Start/Stop button */
    div.anythingSlider .start-stop {
    	background-image: url(../images/default.png);
    	background-position: center -288px;
    	background-repeat: repeat-x;
    	padding: 2px 5px;
    	width: 40px;
    	text-align: center;
    	text-decoration: none;
    	float: right;
    	z-index: 100;
    	outline: 0;
    	border-radius: 0 0 5px 5px;
    	-moz-border-radius: 0 0 5px 5px;
    	-webkit-border-radius: 0 0 5px 5px;
    }
    /* hide cell shading on hover - makes the button appear to come forward */
    div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
    
    /* probably not necessary, but added just in case */
    div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
    	transition-duration: 0;
    	-o-transition-duration: 0;
    	-moz-transition-duration: 0;
    	-webkit-transition-duration: 0;
    }

    にしております。

    スライドはするので、javaスクリプトは動作していて、CSSの設定がおかしいのかと思い、色々試行錯誤中ですが、画像が縦並びと言う現象自体は変わりませんので、もしお気づきの点がありましたらご指摘頂ければ幸いです。

    トピック投稿者 tar2323

    (@tar2323)

    追記です。
    javaコンソールを確認してもエラーは出ていません。

    • が上手く表示されてない(●が出た縦並びのまま表示される)ので、headerに
      style type="text/css">
      .anythingSlider {
      width:580px; /* 画像の幅 + 80px */
      height:287px; /* 画像の高さ + 6px */
      position:relative;
      margin:0 auto;
      }
      .anythingSlider .wrapper {
      width:500px; /* 画像の幅 */
      height:287px; /* 画像の高さ + 6px */
      overflow:hidden;
      margin:0 40px; padding:0;
      position:absolute;
      top:0; left:0;
      }
      
      .anythingSlider .wrapper ul {
      width:99999px;
      list-style:none;
      position:absolute;
      top:0; left:0;
      background:#dbca9e;
      border-top:3px solid #e0a213;
      border-bottom:3px solid #e0a213;
      margin:0;  padding:0;
      }
      
      .anythingSlider ul li {
      display:block;
      float:left;
      list-style:none;
      width:500px; height:281px; /* 画像サイズ */
      margin:0; padding:0;
      			}
      </style>

      を書き込みますと

    • 要素が全て重なって表示されるようになりました。

      スライドはするものの、スライド内の要素がうまい位置に表示されず、1ページ目と2ページ目にまたがるように表示されたりします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「jQuery(AnythingSlider)を動かすには?」には新たに返信することはできません。