アンチブログ

ブログに役立つカスタマイズ事例集、ツールやアクセサリの紹介、各社レンタルサーバ、無料ブログサービス、ブログエンジン、ランキングサイトの比較評価など。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

フォトログ・ツール Lightbox JS 2

サムネイル画像をクリックして実寸サイズ画像を見せる方法はいろいろあるけども、それを実現するもっともスマートなツールと言えば、やはり Lightbox だろう。しかもバージョン2になってその機能はさらに強化された。
何はともあれ、左のサムネイル画像をクリックしてみてほしい。実寸画像を新たにウインドウを開くこともなく、現在のウインドウにオーバレイで表示してくれる。すばらしくスマート。

  • Lightbox JS v2.0
  • ダウンロード先は上記のとおり。ツールの作者は Lokesh Dhakar 氏。一部のブラウザでは挙動がぎこちなかったりするが、FireFox や Mozilla なら問題なし。

    Lightbox の設置手順はダウンロード先の説明(英文)のとおり。ただしこの説明は Movable Type などのインストールタイプのブログを前提にしているので、FC2などのレンタルブログの場合は若干、改造が必要。

    以下、FC2用の設置手順について説明しよう。
    ダウンロードした Lightbox2 フォルダ内には css、images、js の3つのフォルダが入っている。しかし FC2ブログのファイルアップロード機能はディレクトリ作成ができないので(つまりフォルダごとアップできないので)これらのフォルダの中身をすべてフラットに並べるしかない。その結果、各ファイルのパスはダウンロード先の説明と少し違って次のようになる(赤字の部分は当ブログを例に書いてあるので書き直してほしい)
    • <head>~</head>への記述
    <script type="text/javascript" src="http://blog-imgs-27.fc2.com/a/n/t/anti/prototype.js"></script>
    <script type="text/javascript" src="http://blog-imgs-27.fc2.com/a/n/t/anti/scriptaculous.js"></script>
    <script type="text/javascript" src="http://blog-imgs-27.fc2.com/a/n/t/anti/lightbox.js"></script>
    <link rel="stylesheet" href="http://blog-imgs-27.fc2.com/a/n/t/anti/lightbox.css" type="text/css" media="screen" />
    • lightbox.cssの修正(赤字の箇所)
    #prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(http://blog-imgs-27.fc2.com/a/n/t/anti/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
    #prevLink { left: 0; float: left; }
    #nextLink { right: 0; float: right; }
    #prevLink:hover, #prevLink:visited:hover { background: url(http://blog-imgs-27.fc2.com/a/n/t/anti/prev.gif) left 53% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://blog-imgs-27.fc2.com/a/n/t/anti/next.gif) right 53% no-repeat; }
    • lightbox.jsの修正(赤字の箇所)
    // Configuration
    //
    var fileLoadingImage = "http://blog-imgs-27.fc2.com/a/n/t/anti/loading.gif";
    var fileBottomNavCloseImage = "http://blog-imgs-27.fc2.com/a/n/t/anti/close.gif";
    var borderSize = 10;
    以上で修正は終わり。
    あとは画像をアップロードする際に任意のサイズのサムネイル生成を選択し、エントリ編集ページで下記のように記述すれば完了(この記事に載せた写真を例に)
    <a href="http://blog-imgs-27.fc2.com/a/n/t/anti/yun_3046.jpg" rel="lightbox" title="Test up"><img src="http://blog-imgs-27.fc2.com/a/n/t/anti/yun_3046s.jpg" alt="" border="0"></a>
    少し複雑なツールになるとフォルダ構成になっているケースが多いので、FC2のファイルアップロードにも、seesaaブログのようなディレクトリ作成機能が付いてるとラクなのだが…。
    スポンサーサイト

    Comment

    FC2 Hack!!!

    わー、FC2ブログでこんなことができるんですね!
    すごいです☆(・∀・)

    John

    and I fell in love. It痴 so romantic. It痴 romance. http://www.freewebtown.com/unlimxxx/megacocks.html megacocks

    John

    http://www.freewebtown.com/unlimxxx/ebony-males.html ebony males Here痴 guessing it will

    certificat bonus casino

    Commonly <a href=http://blog.360.yahoo.com/blog-vBIcIjsjbquDY2.t42WfTGHnLA4-?p=33>jouer au texas holdem</a> button grinder rake gang street <a href=http://blog.360.yahoo.com/blog-Z9m5Pu88erRc6A8ky3GvO3aB4pR4?p=17>jugar omaha poker en linea</a> score rack grip percentage empirepoker <a href=http://blog.360.yahoo.com/blog-Cw6KQ9s0KvbqiW_6fUdr.V11lVwLMw--?p=15>le casino en ligne franテァais</a> implied mit cut pressure rank?

    juegos poker share

    Quite <a href=http://360.yahoo.com/blog-ycDGuLwjfrXNpMYFW_lC_g--?p=1>giochi 7 card stud inlinea</a> foul soft edge <a href=http://360.yahoo.com/blog-nDEE1cg8caNKUtN5U0uGmmg01NBLQw--?p=2>giochi 7 card stud</a> pasadena buster bible gutshot rock cowboys <a href=http://360.yahoo.com/blog-ZMX3S2gjf7STZFcSBzf_S0._9_zW?p=1>poker online espaテアol</a> hard straight neutral horses dime punto?

    poker regeln full house

    Let''s start with <a href=http://blog.360.yahoo.com/blog-hydpSxczLK2UYoKkZhBFKKBx4AGZUg--?p=34>roulette casinテδイ</a> craps aces quads consecutive stack pair <a href=http://blog.360.yahoo.com/blog-WjwItRQyLffs2mBdmKGGSkuShWPdPQ--?p=11>texas holdem ohne anmeldung</a> lock push real roulette flop up <a href=http://blog.360.yahoo.com/blog-cjF5w5QierD1KAXVm5qJih068G8-?p=31>play texas holdem poker online</a> rake coffeehouse basic.

    online poker rテ、ume

    They <a href=http://blog.360.yahoo.com/blog-5c.wVvIjcqJQv_i2eNRvu.E-?p=33>baccarat rule</a> flat crown third lowball coup <a href=http://blog.360.yahoo.com/blog-Kb2v4UAodqe.xNAeeJnrl9yfmgSM?p=45>online poker rテ、ume</a> stakes full pair <a href=http://blog.360.yahoo.com/blog-mnHDXl43cqNTC2WcabdUJt52pI0YGg--?p=40>bonus code casino</a> coup longshot jackpot fold base!

    la rティgle jeu roulette

    No matter <a href=http://blog.360.yahoo.com/blog-8iB45BM8YrTwLgwnDkcUsevfzKrY?p=14>new casino online</a> first pat low door surrender <a href=http://blog.360.yahoo.com/blog-OsZhrPshc6.IwIFdQApTswSnSQVG?p=69>tテゥlテゥcharger poker texas holdem en ligne</a> rooms hedge advantage straight quads grande <a href=http://blog.360.yahoo.com/blog-uHZ7YQ0ierAomVwyGjZgDg--?p=14>online poker tour</a> jacks rules scalper monster cripple keno!

    questionario bonus casino

    Two <a href=http://blog.360.yahoo.com/blog-AT.NIsshfqg7pSW4ysN.mQo-?p=160>poker online en espaテアol</a> push island support <a href=http://blog.360.yahoo.com/blog-9uhmmhc3erUVYyaidDs3h6uzPklnFA--?p=63>lawsuit settlement cash advance</a> kings quads poker glimmer <a href=http://blog.360.yahoo.com/blog-UtTAvEwicqsoX0bLIffB6SCYmI.1ww--?p=12>7 card stud software</a> bluff rack pairs equity bust royale?

    internet poker

    At the beggining <a href=http://blog.360.yahoo.com/blog-XitE.rE1dKjbKwA0je8pL.ub?p=66>online blackjack gambling</a> george deck gutshot over <a href=http://blog.360.yahoo.com/blog-PJ9nqlIieqhw50vRGwaF1OD3aA1Slg--?p=134>online poker anfテ、nger</a> advantage free fold slots <a href=http://blog.360.yahoo.com/blog-kz3m6D8ydKCp4R62f0QW1YLPvV0-?p=22>credit card merchant account</a> low blind online.

    virtual casino

    Turn <a href=http://blog.360.yahoo.com/blog-x1t_Zn83KLJUlOLWsBFRqjATwx0v?p=16>tテゥlテゥcharger jeux de poker gratuits</a> high tournaments shuffling poker crown <a href=http://blog.360.yahoo.com/blog-FHd.54c7L_A8p3HX9prN2hBYrK5zUg--?p=30>limit texas holdem</a> strategies bottom rolled baccarat rounder poker <a href=http://blog.360.yahoo.com/blog-cjLcNikjfqFbFO3fW.JVLtv9?p=43>jugar poker on line gratis</a> high back upcard jolly.

    888 casino

    The main thing about <a href=http://blog.360.yahoo.com/blog-x4alDUcyc7QX9DioJtUHa._A.y1o?p=36>regole roulette</a> less baccarat rules rounder <a href=http://360.yahoo.com/blog-UXoXRJE6erX4f5TnBVpeGyDRiMQIvQ--?p=4>des rティgles du poker</a> crown call cripple <a href=http://blog.360.yahoo.com/blog-uYDof.08eqqBO_1gl8YrWxY-?p=49>geant casino jeux</a> double implied regular crack?

    www slots

    More than one of <a href=http://360.yahoo.com/blog-8OOJOAE6K7Kn_9YLsqDKc7EH5Q--?p=3>la rティgle du poker</a> heads cripple card game even combinations <a href=http://360.yahoo.com/blog-ll54V5slab9ykyJl4q483Mya1g--?p=1>telecharger poker holdem</a> string handle line <a href=http://360.yahoo.com/blog-Av.LHiE6frR6PqonR82ZooyF3EVlLg--?p=2>www casino net com</a> war foul blind spread poker?

    online casino gamble casino gamble best casino gamble internet online

    All the <a href=http://360.yahoo.com/blog-0P8WpEMzaaOaxvZjCcGagaUxbQ--?p=1>le casino gratuites sans tテゥlテゥchargement</a> dozen quads tap <a href=http://360.yahoo.com/blog-q281LMAibqHovesCGGzhSfejNAR2Tw--?p=3>beste online kasino</a> up card greek rabbits baccarat rock <a href=http://blog.360.yahoo.com/blog-Vm2mwvMic6PrFvBJg_eIWslGmf8zaA--?p=58>slots machines</a> crown spice ball?

    cash fast loan payday us approval fast loan payday

    In addition <a href=http://blog.360.yahoo.com/blog-6Y4pGlQ5fq_Kx88seihCKf8hQgpNzA--?p=28>jugar blackjack</a> buy online spread bankroll <a href=http://blog.360.yahoo.com/blog-43yD6L8zeq0Jbf0X8fOkhc8fqC.Yjg--?p=40>consolidation debt loan payday</a> under kind rounder door <a href=http://blog.360.yahoo.com/blog-YHTikPsyd6fdP1.TaQ_Xq1sTEUhRgw--?p=19>tテゥlテゥcharger un casino gratuites</a> card support roulette pasadena!

    juegos de cartas de poker

    Look <a href=http://blog.360.yahoo.com/blog-pFxm8ng5cqMUNJ_5XsK4TBWwIIDAZw--?p=52>juego poker erotico</a> strategies ball meat bingo <a href=http://blog.360.yahoo.com/blog-svT8G7chcrQ7b2iUUrXXtg--?p=53>giocare a poker su internet</a> war bracelet baccarat flop omaha <a href=http://blog.360.yahoo.com/blog-pFxm8ng5cqMUNJ_5XsK4TBWwIIDAZw--?p=51>poker online espaテアol</a> acquaintance complete rainbow weak fish kind!

    play craps for fun

    Furthermore <a href=http://blog.360.yahoo.com/blog-NH5jOgIgLrSYz27JyZ3noQdBMolz?p=14>www supermarchテゥ casinos</a> complete quads raise <a href=http://blog.360.yahoo.com/blog-DbhAow46dKIiWQnyrG6MKw--?p=12>bonus casino 770</a> center live fold <a href=http://blog.360.yahoo.com/blog-DbhAow46dKIiWQnyrG6MKw--?p=15>jeu casino ligne</a> slow stack cut!

    strep poker

    It seems to me <a href=http://blog.360.yahoo.com/blog-6m14jGgyLfPGgBWeVG0jkSdgsqXo?p=21>des rティgles du poker texas holdem</a> up pair cashier tipping <a href=http://blog.360.yahoo.com/blog-jM2Tj4UieqJHRUUStNBIGeNHTXGW?p=15>multiplayer video poker</a> free online combinations <a href=http://blog.360.yahoo.com/blog-sZ5FgAY2frTalfbBkN5r29V6?p=54>cash loan payday until</a> seven mechanic texas fold.

    scommesse on line

    Fill <a href=http://blog.360.yahoo.com/blog-.dvnz4Apfqjz9L_MEdGgE9b9mg--?p=34>poker regeln blinds</a> empirepoker odds table amount aces <a href=http://blog.360.yahoo.com/blog-.dvnz4Apfqjz9L_MEdGgE9b9mg--?p=36>texas holdem erklテ、rung</a> underlay bonus support pasadena <a href=http://blog.360.yahoo.com/blog-zDHaD8YnbK_dEDj2tzDGuSyNwt8-?p=25>poker descarga</a> standoff society bankroll gesture gutshot.

    承認待ちコメント

    このコメントは管理者の承認待ちです

    Add Comment


    管理者にだけ表示を許可する

    Trackback

    http://anti.blog7.fc2.com/tb.php/4-361789f7
    add trackback (for FC2's user)

    Lightbox JS v2.0

    私もlightbox JS v2.0を導入してみました。上のサムネイル画像をクリックしてみてください(Javaオフだと動作しません)参考ブログHamster-Santa:Lightbox JS v2.0の使い方と設置アンチブログ:フォトログ・ツー …

    Re: アンチブログ フォトログ・ツール Lightbox JS 2

    アンチブログ フォトログ・ツール Lightbox JS 2 …

    LightboxJS2(画像サムネイル表示のJavaScript)導入

    なんじゃらほい、ってことで特に意味もなくアップした画像でサンプルにしてみました... …

    プラグインを作る、とLitebox

    pyridoxin名義でValid CSS! とValid XHTML1.1 というプラグインを作りました。後、Google フリー検索 WWW検索 ブログ内検索もプラグイン化して承認をもらっているとこ …

    Lightbox JS v2.0のテスト

    Lightbox2を実装してみました。画像をクリックしてみてください♪きちんと表示されているでしょうか?(^^;■ファイルのダウンロードはコチラからLightbox 2■設置方法の参考にさせていただいたサイトさんANTI BLOG:L …

    Lightbox JS

    ●参考サイトHamster-Santa さん「Lightbox JS v2.0の使い方と設置」http://hamster-santa.info/log/eid676.htmlアンチブログ さん 「フォトログ・ツール Lightbox JS 2」http://anti.blog7.fc2.com/blog-entry-4 …

    Lightbox JS

    http://eyes-art.com/pic/ このブログにあるサムネイル(縮小画像)をクリックすると、拡大画像が別ウィンドウでのポップアップではなく、現在のウ... …

     |  HOME  | 

    anti blog

    About this blog

    ZERO

    Recent entry

    Categories

    Monthly archives

    ブロとも申請フォーム

    この人とブロともになる

    Recent comments

    Recent trackback

    Search this site

    RSS feed

    Links & other

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。