jQuery lightBox plugin on TypePad
今回は自分のブログに lightbox 風な写真表示を TypePad に設置する方法をご紹介します。
前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わずに lightbox 風な写真表示を実現します。
まずはこちらのページから jQuery ライブラリをウィジェットとしてブログに登録してください。
次に lightbox 風なプラグインを導入しましょう。
最初にこちらのページにアクセスして最新版をダウンロードしてください。（私は ０．５ でした）
ダウンロードしましたら解凍してください。
解凍しましたら js、css、gif などを TypePad にアップロードします。アップロードはコントロールパネルのファイルマネージャから行います。
私は『ホーム』ディレクトリの直下に js、images、css というディレクトリを準備し、そこへアップロードしました。以下に私がアップロードしたパスとファイルをご紹介します。
http://comewalk.typepad.jp/js/jquery.lightbox-0.5.js
http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css
http://comewalk.typepad.jp/images/lightbox-ico-loading.gif
http://comewalk.typepad.jp/images/lightbox-btn-close.gif
http://comewalk.typepad.jp/images/lightbox-btn-prev.gif
http://comewalk.typepad.jp/images/lightbox-btn-next.gif
http://comewalk.typepad.jp/images/lightbox-blank.gif
さてあとは以下の javascript を TypeList に貼付けます。私のドメイン部分を太字にしておきましたが、ファイルのパスを含めて皆さんの環境に合うように適宜読み替えてください。
毎度のお願いですが、TypeList の「メモ」または「リンク」のメモ欄に貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）
<script type="text/javascript" src="http://comewalk.typepad.jp/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css" media="screen">
<script type="text/javascript">
$(function() {
$('.entry-body a[href$=".jpg"] > img').filter(function() {
var href = $(this).parent().attr('href').replace('/.shared/image.html?', '');
$(this).parent().attr('onclick', '');
$(this).parent().attr('href', href);
return true;
}).parent().lightBox({
imageLoading: 'http://comewalk.typepad.jp/images/lightbox-ico-loading.gif',
imageBtnClose: 'http://comewalk.typepad.jp/images/lightbox-btn-close.gif',
imageBtnPrev: 'http://comewalk.typepad.jp/images/lightbox-btn-prev.gif',
imageBtnNext: 'http://comewalk.typepad.jp/images/lightbox-btn-next.gif',
imageBlank: 'http://comewalk.typepad.jp/images/lightbox-blank.gif'
});
});
</script>
これで完了です。ブログの写真をクリックすると lightbox 風に写真が表示されたと思います。
「写真をクリックしたけど表示されない」という方、もしかして、その写真はもともとクリックして画像を表示するタイプではなく、単に画像だけを表示していませんか？
HTML 構造の観点から具体的に言うと、<a><img /></a>という構造のときに lightbox 風な表示になります。<img />のみでは lightbox 風な表示にはなりません。クリックした先の画像ファイルを次のページに遷移しないで、その場で表示するのが lightbox 風な表示になります。その点にご注意ください。
TypePad では WYSIWYG エディタで「画像の挿入」を利用して、「カスタム設定」を開くと、「ポップアップウインドウ」というチェックボックスがありますので、そこにチェックを入れて、画像を記事に挿入したときが lightbox 風な表示をするためのポイントです。
TypePad では「ポップアップウインドウ」指定で画像を挿入すると、a タグの onclick を利用して新しいウインドウを開きます。これを無効かしないと、lightbox 風に表示しつつ、ウインドウも開いてしまうので、$(this).parent().attr('click', '') として onclick の処理を消しました。
また「ポップアップウインドウ」指定の場合、/.shared/images?画像のパス という形で a タグの href 属性を作ります。これだと jpg ではなく、html を表示してしまい、この jQuery lightBox plugin とは相性がよろしくありません。そこで、/.shared/image.html? を削除して、再度 href 属性を指定するために、$(this).parent().attr('href', href) ということをしています。
サンプルなどでは $('#gallery a').lightBox(); こんな感じで lightBox メソッドには引数がないケースがありますが、私のコードには引数があります。このプラグインのサイトに Extend というページがあり、引数に渡せるパラメータが記載されています。
特に画像関係のパスについて指定が無い場合のデフォルト値は images/lightbox-blink.gif などといった指定になります。そうすると TypePad のようにアーカイブを階層で表現する構成ではデフォルト値は適さないので、上記のコードのように引数で画像のパスを渡すようにしています。その他、私はちょっとだけアレンジしていて、
overlayOpacity: 0.6,
を指定して、透過度を若干変更しています。
それから jQuery で有用だと感じたのは filter(function(){}) の記法です。return true; となればその変更が適用されるというもので、filter というよりは callback を埋め込むという感じです。メソッドチェーンを切らすことなく出来るのはとてもいい感じです。
WEB+DB PRESS Vol.41
jQuery のメソッドチェーンの楽しさと CSS セレクタの便利さに触れると jQuery はやめられなくなります。気持ちいいと思いますのでみなさんも何かアイデアを jQuery を使って実現してみてはいかがでしょうか？
ブログに写真を貼るのが楽しくなると思います。どうぞご利用ください
下の画像をクリックすると lightbox 風に表示されますのでお試しください
seealso:
- jQuery lightBox plugin
- jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
- ブログで使っているprototype.js を jQuery へ移行（スライドショー, ハイライトなど）
- WEB+DB PRESS Vol.41
Appreciating the dedication you put into your blog and in depth information you offer. It's good to come across a blog every once in a while that isn't the same outdated rehashed material. Great read! I've bookmarked your site and I'm including your RSS feeds to my Google account.
Posted by: http://abc123.com | 22 January 2014 at 03:48 PM
I do not know if it's just me or if perhaps everyone else encountering problems with your site. It looks like some of the written text in your posts are running off the screen. Can someone else please comment and let me know if this is happening to them too? This could be a problem with my web browser because I've had this happen previously. Kudos
Posted by: How To Drop Weight Fast | 22 January 2014 at 07:29 PM
Quality posts is the crucial to be a focus for the people to visit the site, that's what this site is providing.
Posted by: dogs a to z | 22 January 2014 at 08:11 PM
laserdrucker test My brother recommended I may like this website. He was once totally right. This publish truly made my day. You can not imagine just how a lot time I had spent for this information! Thanks! laserdrucker test
Posted by: laserdrucker test | 23 January 2014 at 02:08 PM
Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why waste your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?
Posted by: แทงบอลออนไลน์ | 23 January 2014 at 04:45 PM
laptop test Heya i'm for the primary time here. I came across this board and I find It truly useful & it helped me out much. I am hoping to present something again and aid others such as you aided me.notebook test
Posted by: notebook test | 23 January 2014 at 10:26 PM
kuechenmaschinen test I do not drop a lot of comments, however i did a few searching and wound up here blog.comewalk.com : jQuery lightBox plugin on TypePad. And I actually do have some questions for you if it's allright. Is it simply me or does it give the impression like a few of these remarks appear like coming from brain dead visitors? :-P And, if you are writing on additional online social sites, I would like to follow anything fresh you have to post. Could you list of every one of your communal sites like your linkedin profile, Facebook page or twitter feed? kuechenmaschine test
Posted by: kuechenmaschine | 24 January 2014 at 02:26 AM
Ahaa, its pleasant discussion about this article at this place at this web site, I have read all that, so at this time me also commenting at this place.
Posted by: Vimax | 24 January 2014 at 06:36 AM
This is a topic that is close to my heart... Many thanks! Exactly where are your contact details though?
Posted by: Comment Pirater un Compte Facebook | 24 January 2014 at 08:46 AM
Hey! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no backup. Do you have any methods to stop hackers?
Posted by: sbobet | 05 February 2014 at 11:38 AM
I have noticed that of all kinds of insurance, medical health insurance is the most debatable because of the discord between the insurance policy company's duty to remain adrift and the buyer's need to have insurance policy. Insurance companies' profits on well being plans are certainly low, as a result some companies struggle to earn profits. Thanks for the concepts you share through this blog.
Posted by: book of ra | 05 February 2014 at 04:24 PM
robot multifonction
Posted by: egazing.biz | 06 February 2014 at 07:38 AM
Hey there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no back up. Do you have any solutions to protect against hackers?
Posted by: Jurassic Park Builder Hack | 19 February 2014 at 10:17 PM
Horoscope du jour gemeau horoscope novembre verseau
Posted by: voyance gratuite en ligne | 20 February 2014 at 08:11 AM
I'm curious to find out what blog system you have been utilizing? I'm having some small security issues with my latest site and I would like to find something more risk-free. Do you have any suggestions?
Posted by: garciniacambogiareviews1.pw | 22 February 2014 at 10:24 PM
I am really happy to read this weblog posts which contains plenty of seful facts, thanks forr providing these information.
Posted by: buying instagram followers | 06 March 2014 at 12:08 PM
I'm really enjoying the design and layout of your blog. It's a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a designer to create your theme? Great work!
Posted by: เรียนตัดเสื้อ | 07 March 2014 at 12:13 AM
Can I simply say what a comfort to uncover someone that really knows what they are talking about over the internet. You definitely realize how to bring an issue to light and make it important. A lot more people must read this and understand this side of the story. I can't believe you aren't more popular given that you definitely have the gift.
Posted by: sbobet | 11 March 2014 at 03:05 AM
Remember, there are lots of auditions for Disney channel shows, if you do not land the part, just keep hoping. However, there are some types of the proper way to do things. An excellent explosion or two never hurts sometimes.
Posted by: watch star-crossed online | 19 April 2014 at 05:28 AM
Hmm it seems like your site ate my first comment (it was extremely long) so I guess I'll just sum it up what I wrote and say, I'm thoroughly enjoying your blog. I as well am an aspiring blog writer but I'm still new to the whole thing. Do you have any suggestions for beginner blog writers? I'd definitely appreciate it.
Posted by: Pet Rescue Saga Hacked | 21 April 2014 at 09:15 AM
Supports Apple iphone four, Apple iphone 3GS, Apple iphone 3G and Iphone 2G operating up to four.two.one Firmware. Its lengthy battery life ensures that it doesn't die in the midst of that important call.
Posted by: best ipad apps | 23 April 2014 at 06:57 AM
Of program, you will either get less cash or have to deal with individuals coming to your home with Craigslist. If it did, how would you love to discover out how to jailbreak ipad? Yes! Jailbreak is a easy and safe as well.
Posted by: http://3mario.com | 23 April 2014 at 11:17 AM
http://www.segwayrometours.com/shop/Coach-womens-shoes-black.html However, ѕtarting iո 1986 the shharp stop by marginal taxatioո rate on top 1 percent accompanies the dramatic start their income share.MercedesBenz Fashion Week, control event of contemporary Ύork FasҺioon Week, is among the four major worldwidde fazshion events. http://www.segwayrometours.com/shop/Coach-running-shoes-for-women.html
Posted by: http://www.segwayrometours.com/shop/Coach-womens-shoes-black.html | 23 April 2014 at 10:12 PM
The casting staff will be helped by this to be in contact with you in case of something. The first came out in 1989 and the next came out in 2004. Contestants perform songs in front of a panel of celebrity judges.
Posted by: http://ecopunch.com | 24 April 2014 at 06:59 AM
Dating her these times and she is almost interested in you. Right here's wishing you the very best in your attempt. I haven't noticed you Forever!! (massive kiss) Wow, you've really changed! (I'm not Laura) What?
Posted by: Hye | 24 April 2014 at 03:35 PM