top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1320

GreyBox:画像の拡大ライブラリ(javascript)、ずっと、thickboxだったんだけど、ちと浮気。エレガントなGreyBoxに惑わされる ・・・ 【javascriptライブラリ】

 2010-04-14
 もうお馴染みの、javascriptによる
 ・画像のアップ表示

 色々な方法あるけれど,私はずっと、
 ・thickbox
  一筋だった。
  ・Lightbox JS v2.0 VS ThickBox 3.1 ・・・ 【JavaScript】
    (それがどうしたって?)


 別に、
 ただ「不満無かった・・・」ということなんだけど。
 某、顧客サイトで
 (気になってた、)"エレガントさ" を感じる
 ・GreyBox に横目を使ってしまった。


Orangoo Labs - GreyBox
Orangoo Labs - GreyBox※引用転載
 ・It's only 22 KB!(軽い!)
 ・It does not conflict
   with pop-up blockers
 ・It's super easy

 ・・・簡単・軽快そうで。



 このブログでも、併用しよかな。

  追記に  ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  画像の拡大ライブラリ「GreyBox」に惑わされる の巻
             :javascriptライブラリ

************************************************


 問答無用で,早速・・・

 ■ダウンロード
  ※Download GreyBox v5.54


 ■実装
  □greybox のフォルダごとアップロード
   ・解凍されたものにはたくさんのファイルがあるが、
    greybox のフォルダごと、javascriptフォルダに
    アップロードする。


  □<head> ~ </head> 内で、組み込み。


   1:最初に、
     greyboxのjavascriptフォルダへの
     パスの設定。
<script type="text/javascript">
var GB_ROOT_DIR = "/js/greybox/";
</script>

 

   2:次に
     javascriptファイルと
     cssファイルの組み込み。
<script type="text/javascript" src="/js/greybox/AJS.js"></script>
<script type="text/javascript" src="/js/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/js/greybox/gb_scripts.js"></script>
<link href="/js/greybox/gb_styles.css" rel="stylesheet" type="text/css" />

   ●注意●
    ここで、エラーが出る。


    他のライブラリとコンフリクトおこしているようで
    他のライブラリとコンフリクトおこしているようで
    こういう時は、
    (慌てず騒がず)いつものように、回避方法。
<script type="text/javascript"> 
jQuery.noConflict(); var $ = jQuery;
</script>
 これを直後に入れてやる。

  □利用ソース
   <a href> の rel属性 を利用して
   実現する方法だ。


   ※サンプルは、このブログでは無く
    開発倉庫サイト「創ったmetaboy」に用意してます。
    創ったmetaboy
    (このブログは、・・・thickbox でいいかな。)

  □画像への利用


   ◇シンプル利用 「単一画像表示」
<a href="http://www.metaboy.net/imgdata/imgsamp_space01.jpg" title="宇宙の日の出01" rel="gb_image[]">宇宙の日の出01</a>

   ◇グループ利用 「複数画像表示」
<a href="http://www.metaboy.net/imgdata/imgsamp_space02.jpg" rel="gb_imageset[nice_pics]" title="宇宙の日の出02">宇宙の日の出02</a> | 
<a href="http://www.metaboy.net/imgdata/imgsamp_space03.jpg" rel="gb_imageset[nice_pics]" title="宇宙の日の出03">宇宙の日の出03</a>

  □HTMLファイルへの利用


   ◇シンプル利用 「単一URL表示」
<a href="http://www.google.co.jp" rel="gb_page[500, 500]" title="単純に表示">単純に表示</a> | 
<a href="http://www.google.co.jp" rel="gb_page_center[500, 500]" title="センターに表示">センターに表示</a>
<a href="http://www.google.co.jp" rel="gb_page_fs[]" title="フルスクリーン">フルスクリーン</a>

   ◇グループ利用 「複数URL表示」
<a href="http://www.google.co.jp/" rel="gb_pageset[search_sites]" title="Google">Google</a> | 
<a href="http://search.yahoo.co.jp/" rel="gb_pageset[search_sites]" title="Yahoo">Yahoo</a> |
<a href="http://www.bing.com/?cc=jp" rel="gb_pageset[search_sites]" title="bing">bing</a>

 ■リファレンス
  ・通常の使い方
  ・なんか色々出来そうですね


 ■習作サンプル
  ・greybox利用した、画像拡大ポップアップ習作サンプル


 ちなみに
 「宇宙の日の出」は
 前にご紹介させていただいた、
 (・宇宙の日の出:今月も50本。ぎりぎり滑り込み。最後は、大好きな宇宙の壁紙リストを紹介、20点・・・ 【壁紙】
 > 20 Incredible Sunrise Wallpapers Caught in Space
   のものを利用させていただきました。
   改めて、感謝!

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1320-fb5eef3a
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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