検索結果

2015-03-23

WordPress

jQuery Colorboxのプラグインをよく使っているのですが、
ブログ記事など1つの投稿に対して複数の画像をアップするとうまくグループ化されますが、
一覧ページや固定ページに、各投稿の画像を読み込んでグループ化したい場合も
投稿IDでグループ化する仕組みになっているためうまくいきません。

プラグインを直接変更するのはあまりオススメではないのですが、
「jquery-colorbox-frontend.php」を編集することで対応できました。
関数 wpPostThumbnailClassFilter 内で投稿IDをクラス名にセットしているのをやめます。
(4行目がもとのソース、5行目が変更後)

function wpPostThumbnailClassFilter($attribute) {
global $post;
// すべて「colorbox-0000」にしてグループ化
// $attribute['class'] .= ' colorbox-' . $post->ID . ' ';
$attribute['class'] .= ' colorbox-0000 ';
return $attribute;
}

2015-01-20

[jQuery] iPhoneでスクロールイベント

レスポンシブのサイト制作で、
スクロールさせるとイラストやコンテンツが表示されるようなjQueryを書こうとしたのですが、
iPhoneの場合、スクロールイベントが起こるのは指を離してスクロールが終了した後になり、
PCと違って表示がかなり遅れてしまうことが判明。

iscroll.jsを使う方法もあるようだったのですが、ブラウザに負荷がかかるっぽい感じだったので、
scrollイベントではなく、touchmoveイベントを使うことで対応しました。

参考サイト
http://qiita.com/zaru/items/82d61ac90394885fb486

2013-10-15

Google

縦にスクロールさせることでサイトが1ページで成り立っているものが最近多いですが、
jQueryで#を使ってページ内リンクで遷移させたりすると、
アナリティクスには全体のhtmlファイルしか記録されません。
そこで_trackPageviewを使って、計測できるようにしました。

続きを読む »

2013-08-30

jQueryのカルーセルスライダーはいろいろ種類がありますが、
最近ではレスポンシブ対応、スマホ対応のものもかなり増えてきました。

そういう中で何を選ぶか、というのもかなり難しいところなのですが、
Elastislideというプラグインを使った案件で、気になった点があったので変更しました。

続きを読む »

2013-05-08

以前にも記事を書いた、スマホなどでいい感じのフォトギャラリーができる「PhotoSwipe」。
これまでは単純に写真を見せるだけの使い方をしていたのですが、
その写真に対してリンクをつけてECサイトに飛ばしたいという要望がありました。

PhotoSwipeでは写真をクリックすると、上下のメニューが表示されるので、
キャプションのところにリンクURLを載せたらいいかと安易に考えたものの、
HTMLタグもすべてテキストで表示されてしまうんですね。
うーん、困りました。。

続きを読む »

2012-10-26

jQuery
Google Analyticsの情報をエクセルで管理していたのですが、
複数のアカウント情報をパッと見たいときに面倒だったりするので、
jQueryのプラグインを使用して、ブラウザで見れるようにしてみました。

グラフ描画のプラグインは「jqPlot」以外にも「”jQuery Visualize」など、
いくつか種類があるようなのですが、グラフのリサイズ機能が気に入ったので、
「jqPlot」を採用してみました。

下記のサイトにかなり細かく各オプションのリファレンスも載っているので、
かなり役に立ちました!

参考サイト
http://alphasis.info/jquery-plugins/jqplot/

2012-08-21

PhotoSwipe

仕事でスマホサイトを作る割合がかなり高くなってきたのですが、
自分が担当するサイトでは画像を拡大表示するようなことが多いので、
スマホサイトらしく、拡大したらグループ化されたものはスワイプして
見れるようにしたいと思い、いろいろプラグインを見ていましたが、
現時点では、PhotoSwipeがベスト!と思いました。

PhotoSwipe
http://www.photoswipe.com

オプションもいろいろあるので、いろいろ融通も効くのも重要なところ。
画像がキレイなサイトならこのプラグインを使って見せるだけでも
結構インパクトがありますね!

2012-07-17


このブログでは画像の拡大表示にずっとlightbox2とうプラグインを使っていたのですが、
他の仕事などではjQuery Colorboxを気に入って使用していたので、
ようやくこちらに変更しました。

ColorboxもWordPressに限らず有名な画像拡大などを行うプラグインです。
このColorboxのプラグインがWordPressでもあります。

続きを読む »

2012-07-04

jQuery
クライアントの仕事でAwkward Showcaseというプラグインをよく使っているのですが、
ie9で確認したところ、うまく動作していないことが発覚。
互換モードにするとレイアウトがおかしくはなるものの動いていました。

ほかのサイトではうまく動いているものもあるのにな、と調べていると
jQueryのバージョンが古かったのが問題でした。

続きを読む »

2012-06-15

jQuery
主にページトップなどで使うことの多いスムーススクロール。
ページトップだけでなく、どこのページ内リンクにもスムーススクロールするには
プラグイン的なものもありますが、他のものとの相性がよくなかったりしたので、
普通にコードを書くことにしました。

<script type=”text/javascript”>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 800;// ミリ秒
// アンカーの値取得
var href= $(this).attr(“href”);
// 移動先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? ‘body’ : ‘html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
</script>

こういうよく使うjQueryを集めたライブラリみたいなものも最近はよくありますよね。
(最近でもないですかね、、)
自分でもそういうのを作っておくと便利かも。


参考サイト
http://www.coolwebwindow.com/weblife_column/coolweb/000301.php

2012-06-12

jQuery
ナビゲーションの開閉メニューあたりでクッキーを使いたいと思い、
jQueryで何かあったような、と調べてみると予想通りにありました。
jquery.cookie.js そのままズバリなプラグインです。

続きを読む »

2012-06-10

jQuery
fancybox(v2.0.6)のiframe機能を使って、あるHTMLページを表示させようとしたところ、
コンテンツの高さをheightで指定しているにもかかわらず、100pxくらいの小さい高さしか
表示されない現象が起こりました。

指定するページをYahooとかの外部サイトにすると問題なく表示されるのに、
自分のサイトのページだといくらやっても狭い表示に。。

続きを読む »

2012-05-14

画像の一覧をページが表示されたときに、順番にフェードしながら表示するjQuery。
あんまりやりすぎるとくどくなったりもするのですが、
イメージを打ち出したいポートレート系のサイトなどではいい感じになると思います。

続きを読む »

2012-04-25

ブラウザいっぱいに画像を使うといったサイトはよくあると思うのですが、
縦幅をブラウザにあわせようと思うと、画像以外の部分の幅は
ブラウザサイズを変えるたびに可変になります。

単純にパーセントで幅が指定できれば問題ないのかもしれませんが、
jQueryを使って結構簡単に実現できるのでメモです。

続きを読む »

2012-04-23

ページが表示されたら一瞬遅れで、ポップアップのようなレイヤーを表示するjQueryです。
ポップアップを出すのはイヤがられることもありますが、
ちょっと興味を引かせたり、どうしても見てほしい案内を出すときには
やっぱり便利ではないかなと思います。

続きを読む »