2013年02月21日

2013 02.21 Thu


画像リンクをクリックするとページ内に拡大ポップアップするjqueryプラグイン「fancybox」を導入しました。

futuristic-makeup-look.jpg makeupujapanese.jpg nisinokana.jpg

広告のリンクは普通に飛びます。

設定するにあたって、こちらのサイトがとても参考になりました。
レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」



その際に、
<a class="fancybox" href="/img.jpg"><img src="/img_s.jpg"></a>
のように、
a(アンカー)タグにclass属性"fancybox"を追加しないと動作しません。

過去の記事のタグまで手動で追加するのも面倒なので、
スクリプトで自動で挿入することにしました。


document.getelementbyId('content')で、範囲を指定したら、範囲が多すぎてモッサリ。
document.getelementsbyClassName('text')では上手く動きませんでした。

検索すると、getelementsbyClassName は、
IEでの動作が怪しかったり、別途プラグインが必要だったりで、
どうもScriptとしては動作保障が不十分なようでした。
firefoxでも思うように動かない・・・。


jqueryでClass指定すれば簡単でした。

$('.text');
$('a').addClass('fancybox');

たったこれだけで実現。
ちなみにid指定は$('#id');、タグ指定は$('tag');


jquery、超便利です。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re

■ この記事へのトラックバック

Scriptで独自属性を追加、置換変更する方法 [jquery]
Excerpt: クラス属性を追加する場合、addClassが使えます $('.text'); $('a').addClass('fancybox'); でも、class=にしか使えないので、独自属性などは「at..
Weblog: 勝手にブログカスタマイズ
Tracked: 2013-02-25 17:37
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.