12月
23
2012
jQuery”AWKWARD SHOWCASE”コンテンツスライドショーをwordpressで使うTIPS
わからな過ぎて苦しみまくったので、出来た内に書き残しとく！
jQueryのプラグイン使いたいのが沢山あったんですが、重おもになるので、避けてましたが、新しくコンテンツ作るのに、
どうしても避けれないので、勉強！
jQuery”AWKWARD SHOWCASE”コンテンツスライドショーをwordpressで使うTIPS
したい事はこの2点！
：wordpressでjQueryで使う
：AWKWARD SHOWCASE SLIDER(コンテンツスライダー)を使う
（コンテンツや動画もスライド出来て、tooltipも使えると言う優れもの！）
(もうこのkidsの顔も見飽きて参りました。)
：google apiをお借りして、
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| wp_deregister_script('jquery'); /*WP既存のjQueryを読み込まない*/ | |
| wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');/*googleのjQueryを読み込む*/ | |
| ?> |
参考サイト ：WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 ： WordPressでjQueryが動かないという人へ – WordPressにイメージスライダーを付けてみよう
テンプレート内にawshowcaseのフォルダを作り、ａｗｋｗａｒｄ ｓｈｏｗｃａｓｅからダウンロード。 jquery.aw-showcase.js style.css images をアップロード。
header.php内の読み込み
<?php wp_head(); ?>より上に記載
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php wp_enqueue_script('awShowcase',get_bloginfo('template_url') . '/awshowcase/jquery.aw-showcase.js', array('jquery'), '1.0'); ?> | |
| ?php wp_enqueue_style('awShowcase', get_bloginfo('template_url') . '/awshowcase/style.css'); ?> |
jQueryの呼び出し（$→jQueryに変更）
<?php wp_head(); ?>より下に記載
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript"> | |
| jQuery(function(){ | |
| jQuery("#showcase").awShowcase( | |
| { | |
| content_width: 800, | |
| content_height: 500, | |
| fit_to_parent: true, | |
| auto: false, | |
| interval: 3000, | |
| continuous: false, | |
| loading: true, | |
| tooltip_width: 200, | |
| tooltip_icon_width: 32, | |
| tooltip_icon_height: 32, | |
| tooltip_offsetx: 18, | |
| tooltip_offsety: 0, | |
| arrows: true, | |
| buttons: true, | |
| btn_numbers: true, | |
| keybord_keys: true, | |
| mousetrace: false, /* Trace x and y coordinates for the mouse */ | |
| pauseonover: true, | |
| stoponclick: true, | |
| transition: 'hslide', /* hslide/vslide/fade */ | |
| transition_speed: 500, | |
| transition_delay: 300, | |
| show_caption: 'onhover', /* onload/onhover/show */ | |
| thumbnails: false, | |
| thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */ | |
| thumbnails_direction: 'horizontal', /* vertical/horizontal */ | |
| thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ | |
| dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ | |
| speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */ | |
| viewline: true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */ | |
| }); | |
| }); | |
| </script> |
テンプレートに記載
（私はslider.phpを別に作り、表示させたいテンプレートに get_template_part(‘slider’); で、記載しました。）
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="showcase" class="showcase" style="width: 800px; "> | |
| <div class="showcase-slide"> | |
| <div class="showcase-content"> | |
| <div class="showcase-content-wrapper"> | |
| <img src="画像URL>/*画像コンテンツ*/ | |
| </div> | |
| </div> | |
| </div> | |
が<div class=”showcase-slide”>~</div>1コンテンツ分。スライドさせるコンテンツが増える毎に↑増やしていく。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Markup example for jQuery("#showcase").awShowcase(); | |
| <div id="showcase" class="showcase"> | |
| <!-- Each child div in #showcase represents a slide --> | |
| <div class="showcase-slide"> | |
| <!-- Put the slide content in a div with the class .showcase-content --> | |
| <div class="showcase-content"> | |
| <!-- If the slide contains multiple elements you should wrap | |
| them in a div with the class .showcase-content-wrapper. | |
| We usually wrap even if there is only one element, because it looks better. :-) --> | |
| <div class="showcase-content-wrapper"> | |
| <img src="images/01.jpg" alt="01" /> | |
| </div> | |
| </div> | |
| <!-- Put the caption content in a div with the class .showcase-caption --> | |
| <div class="showcase-caption"> | |
| The Caption | |
| </div> | |
| <!-- Put the tooltips in a div with the class .showcase-tooltips. --> | |
| <div class="showcase-tooltips"> | |
| <!-- Each anchor in .showcase-tooltips represents a tooltip. | |
| The coords attribute represents the position of the tooltip. --> | |
| <a href="http://www.awkward.se" coords="634,130"> | |
| <!-- The content of the anchor-tag is displayed in the tooltip. --> | |
| This is a tooltip that displays the anchor html in a nice way. | |
| </a> | |
| <a href="http://www.awkward.se" coords="356, 172"> | |
| <!-- You can add multiple elements to the | |
| anchor-tag which are display in the tooltip. --> | |
| <img src="images/glasses.png" /> | |
| <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;"> | |
| White Glasses: 500$ | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="showcase-slide"> | |
| <div class="showcase-content"> | |
| <div class="showcase-content-wrapper"> | |
| Content... | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
キャプション・ツールチップの記載
がっつ！全く動かないんですねーコレ！半日悩みましたわ。
wordpress＆awkwardの組み合わせで使ってる方少な過ぎる！情報がナイ！
動かない原因はと言いますと、jquery.aw-showcase.jsを見てみると、
jQueryと$が一緒こたに書かれているんです。泣。そりゃ動かんわ。
と言うことで、ソース一覧のhttps://bitbucket.org/awkwardgroup/awkward-showcase/srcの下から3つ目の
|
40.3 KB
|
Replaced all “$” with “jQuery”.
|
をダウンロード。自分のサイトのjQuery.at-showcase.jsに上書きです。
（ただ、jQueryの最新版を使っていますが、FIREFOXでしか確認していないので、IEは動いていない可能性大です。）
参考サイト：
コンテンツのスライダー機能を持つjQueryプラグイン「Awkward Showcase」と実装メモ
Awkward Showcase(サイト下にコメントが500件位載っています)
Awkward showcaseの使い方（google キャッシュ）
awkward showcaseを使っているサイトを集めてみました。めちゃめちゃ参考にさせていただきました。
（勝手にLINK貼りましたので、不都合あれば、サイト主さんは仰って下さい。）
めっちゃ時間費やしましたが、使う人の為なれば幸いです。
PS:見てはイケナイ物を見てしまった！awkward showcaseを使ったテーマが売ってる・・・。$40やって。
- Did you like this article?
-
- 0
-
- 0
categotry: ハンドメイド・DIY
▲TOP
Maybe you like!!
- << PREVIOUS:connecting dots ｜A Hundred Birds Orchestra@なんばHATCH:NEXT>>
Comment
【コメントの投稿について】
Furaha clothingでは、「Disqus」のコメントを使っています。
ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
自分のプロフィールでコメント出来ます。アカウントの無い方もメールアドレスでコメント出来ます。
（入力したアドレスはコメントには表示されません。）