だるまブログ

jQueryのプラグインでレスポンシブ対応のbxsliderというプラグインがあります。

商用利用もOKなMITライセンスで、スマホやタブレットのスワイプにも対応したイケてるやつです。

※作者はFAQの下の方で「ビール奢ってね！」って言ってます。トップページの「Buy me a beer」から奢ってあげましょう！

機能も豊富で便利なのですが、一つイケてないのが

ページャーやPrev、Next（デフォルトだと三角のイメージが量端に出ます）を押すとオートアニメーションが止まる。

という点です。

jquery.bxslider.jsのソース見ると、

var clickPagerBind = function(e) ・・・ ページャーを押した時のファンクション

var clickNextBind = function(e) ・・・ Next押した時のファンクション

var clickPrevBind = function(e) ・・・ Prev押した時のファンクション

のそれぞれで

if (slider.settings.auto) el.stopAuto();

と、オートのアニメーションをストップしてます。

なんで、上記、3つのファンクションでif (slider.settings.auto) el.stopAuto();をコメントすれば、止まらなくなります。

コールバックファンクションもあるので、静止時間時間過ぎたら、startAutoするってのでも実現できるのですが、タイマー仕掛けたりメンドウなので、 el.stopAuto()をコメントすることにしました。

ミニマイズでやりたいけど、ソース追うのが面倒なので、ナシってことで。

※タイマーとコールバックで実現されてる方もいらっしゃいます。
自動再生させているはずのスライダーが止まっちゃうんです！！（bxSlider使用）

2 Comments »

EC-CUBEのプラグインWpPostのSEO対策をしていて2回ほど躓いたので、書いておきます。

EC-CUBEのプラグイン作成ではSmartyのテンプレートをフックして、内容を変更できます。

1. prefilter・・・Smrtyテンプレートコンパイル前※コンパイル時のみ
2. outputfilter・・・Smrtyテンプレートコンパイル後※テンプレート出力時に毎回

prefilterでtitleタグを変更するために

$objTransform->select(‘title’)->replaceElement(file_get_contents($template_dir . ‘plg_hoge_add.tpl’));

とすると、「テンプレートの操作に失敗しました。title が存在しません」となります。

悩んだのですが、解決しないためEC-CUBEのフォーラムで質問したら、titleではエラーするようです。
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=13941&forum=17&post_id=62557

上記リンクにあるようにjQueryで<title>～</title>の中身を入れ替えるようにしました。

 $('title').text('Smartyのtagとか');

やれやれと思っていたら、ChromeやFireFoxは問題無いのですが、IEでエラーが出ます！

色々悩んだところ、どうも$('title').text('Smartyのtagとか');が影響しているようなので、調べてみると、大正解のページを見つけました。

jQueryでタイトルタグが書き換えられない

なので、

document.title = "Smartyのtagとか";

とすることで、解決！

やっと思い通りの動きをするようになりました。

No comments »

30分ほど悩んだので、備忘録として書いておきます。

WordPressで

<?php echo category_description( $category_id ); ?>

でカテゴリの説明が取得できますが、

<p>カテゴリ説明のテキスト</p>

と返ってきます。

<p>~</p>が余計なので、

$var = strip_tags(category_description());

としたのですが、この値をSmartyで利用しようとするとエラーが出ました。

色々調べたら改行が残っていたので、

$var = str_replace(array(“\r\n”,”\r”,”\n”), ”, $var);

と、改行を削除することで解決しました。

No comments »

忘れがちなので、メモしときます。

WordPressでwp_list_comments()を使うと、コメントリストのHTMLが取得できますが、

‘format’ => ‘html5′

とすると、コメントごとに

<artcle id=”div-comment-XX”>
中身・・・
</article>

というHTMLになります。
http://codex.wordpress.org/Function_Reference/wp_list_comments

このid:div-comment-XXに対し、jQueryで

$(“#div-comment-XX”).css(“display”,”none”);

とかすると、<article>がHTML5の要素のため、IE8では動きません。
※IE9未確認

解決策1.

‘format’ => ‘xhtml’

として、HTML5のタグは使わない。

解決策2.

ブラウザ判定して、IE10未満の場合
<article>～～</article>を<div>～～</div>
に置換する。

今回レスポンシブな作業なので、解決策2で対応しました。

No comments »