薄まる自分
PCやら育児やら、徒然についてメモります。
<< June 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
 
日本最大級の靴のネット通販 ロコンド.jp ブログパーツ track feed 薄まる自分
RECOMMEND
RECOMMEND
プログラミングGroovy
プログラミングGroovy (JUGEMレビュー »)
関谷 和愛 上原 潤二 須江 信洋 中野 靖治
RECENT COMMENT
RECENT TRACKBACK
カウンタ
ブログパーツUL5
JUGEM PLUS
MOBILE
qrcode
PROFILE
PR
無料ブログ作成サービス JUGEM
 
スポンサーサイト

一定期間更新がないため広告を表示しています

- | | - | - | - | - |
jugem でもLightboxとやらが使えるようになったとか?
jugem でも Lightboxが使えるようになったとか! Lightbox ってなんだ?と思いつつ使ってみた。

下記の画像をクリックすると、画像がにゅーんとポップアップします。


 

これをどうしたと言われると、それまでなんだけど、これを便利だと感じる人はどんな人なんですかねえ。
画面を遷移さえることなく拡大したい人とかかな。

←ランキングに参加しているので、よかったらクリックしてください。

下記に簡単に導入メモを記述します。

ブログの管理画面→デザイン→HTML・CSS編集を開き、HTML編集フォームの中で、
<head></head> の中に、下記のコードをペーストする。
すでにjquery などを利用している場合には重複をはぶく。

<!-- light box start -->
<link rel="stylesheet" href="http://js.jugem.jp/Lightbox/2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/builder.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script>
<!-- light box end -->


そして、記事を書くときに、まずは画像を貼り付けて、画像のURLをメモった上で、下記のようにリンクをはり直す。赤い部分に自分の画像のURLに書き換える。青い部分は画像をどのように表示したいかで適当に設定する。

<a href="http://img-cdn.jg.jugem.jp/fc7/19749/20090302_534659.jpg" rel="lightbox"><img src="http://img-cdn.jg.jugem.jp/fc7/19749/20090302_534659.jpg" alt="" class="pict" border="0" height="64"></a>

この例では、小さな画像にリンクをはっているが、別に画像じゃなくても問題ないです。

以上、よかったら遊んでみてください。

HTML・CSS編集はおかしくならないように事前にバックアップとっておいたほうがよいかもです。


↓の評価ボタンを押してランキングをチェック!
素晴らしい すごい とても良い 良い
スポンサーサイト
- | 00:36 | - | - | - | - |
ベネッセの幼児向け英語教材 ワールドワイドキッズ
コメント
from: エイジ   2009/03/07 11:26 PM
LightBoxの設定をしたら、IEでアクセスできなくなってしまっていたので、戻しました^^

上記は今は動作しません。

もうちょっと検証しながら使います。
コメントする









 
トラックバック
この記事のトラックバックURL
http://aeg.jugem.jp/trackback/63
 

(C) 2017 ブログ JUGEM Some Rights Reserved.