Archive   RSS   (Login)

まぁそのまんま備忘録で

Category: スポンサー広告
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category: WEB制作
Tags: SmoothGallery  Mediabox  Slimbox  XCL  
Mediabox×SmoothGallery 1
VideoboxはmootoolsというJavascriptライブラリを使用しているが、Lightboxは
prototypeを使用している。双方のライブラリのバッティングが起きて共存できない。
Slimbox+mootools とLightbox+prototypeでは Slimboxがかなり軽い。
が、Slimbox×Videoboxの場合もCSSで不具合がおこる。

SmoothGalleryも ”mootools” ライブラリ上で動作するので、”Slimbox” との共存が可能。

その為、結論としてはmootoolsで統一する為
Slimbox×Mediabox×SmoothGallery となる...........って
あれ?MediaboxあればSlimboxいらなくないか?

”Mediabox”は、YouTubeやGoogle Videoなどのオンラインムービーだけでなく、Flash、QuickTime、WMVなどのムービー形式、さらにはWebコンテンツも Lightbox風のエフェクトで表示できる。さらにCSSはSlimboxとMediaboxで共用できる。


mootoolsのバージョンをあわせ且つ出来るだけ最新に合わせる為
MooTools-1.2.4-core-yc.js.txt
mediaboxAdv-1.2.0.js
mediaboxAdvWhite.css
NonverBlaster.swf


Smooth Gallery 2.1dev
で実験してみる。
Smooth Gallery 2.1devについては次回記述

[設置フォルダ]
 │
 │
 ├ [js]
 │ ├ mootools-1.2.4-core-yc.js
 │ ├ mediaboxAdv-1.2.0.js
 │ ├ mediaboxAdvWhite.css
 │ └ NonverBlaster.swf
 │
 └ [images]
     ├ 50.gif
     └ 以下省略


1.NonverBlasterはダウンロード/解凍後、「examples」フォルダ内の「NonverBlaster.swf」のみをアップロードします。

2.mediaboxAdvBlack.cssに記述されている画像のパスを変更します。
"/images/mediabox/"のパスになっているので、上記ディレクトリ構成の場合は"../images/"となります。

3.mediaboxAdv-1.2.0.jsに記述されているNonverBlaster.swfのパスを変更します。
93行目の
NBpath: '/js/NonverBlaster.swf', // Path to NonverBlaster.swf

NBpath: '/box/js/NonverBlaster.swf', // Path to NonverBlaster.swf

http://からのURLかROOTDIRからのパスに変更。
相対パスはswfを表示したページからのパスになってしまう為不可。

4.link

<a title="タイトル" rel="lightbox[sikibetu w h]" href="URL">YouTubeでも画像でも</a>


ただし古いIEの場合mootools.jsを読み込んだ後にエラーが発生することがある。
その場合はJS関係は出来るだけ後で読み込むように可能であればHTMLの下のほうへ配置する。


一例
headの上の方

<link href="/box/js/jd.gallery.css" media="screen" type="text/css" rel="stylesheet" />
<link href="/box/js/mediaboxAdvWhite.css" media="screen" type="text/css" rel="stylesheet" />

headの下の方(</head>のすぐ上)
<script type="text/javascript" src="/box/js/mediaboxAdv-1.2.0.js"></script>
<script type="text/javascript" src="/box/js/mootools-1.2.4-core-yc.js"></script>

スポンサーサイト
03 | 04  (2010) | 05
SUN MON TUE WED THU FRI SAT
- - - - 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 -
最新コメント
最新トラックバック
プロフィール
QR

F

Author:F
 
携帯の方はこちら >>

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