最近の記事
(02/02)ブログ更新の終了について
(01/22)Picasaでテンプレートを使う 〜 操作方法を動画で解説
(01/13)ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置
(01/07)画像を使ったクールなスライド・メニュー 〜 imageMenu
(01/03)iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2
(01/03)イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用
(12/31)iPhone/iPodのカバーフロー表示をサイトやブログでも 続き
(12/30)iPhone/iPodのカバーフロー表示をブログでも 〜 ImageFlowをブログで使うには
(07/03)たった1行のスクリプトでできること 〜 IEのJavascript高速化 / IE判定
(07/02)Seesaaブログカスタマイズ 記事ページング機能 / ソーシャルブックマーク機能
(07/02)ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい 〜 dpSyntaxHighlighter
(06/25)Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる
(06/25)クールなズームアップを手軽に実現 〜 FancyZoom 1.1
(06/21)Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS
(06/15)記事の中でHTMLタグを表示したい
(06/15)パンくずリストをつける
(06/12)Slimbox / Lightbox のキャプションにリンクを貼るには
(06/10)slimbox1.52 reflection1.3 バージョンアップへ対応
(05/31)mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決
(05/28)Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト
2008年05月31日

mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決 この記事をはてなブックマークする |

Evernoteにクリップする

mooslide_logo.jpg リンクをクリックすると、ボックスがスライドしてきて内容をを表示できる”mooSlideBox

 LightBoxの一種ながら、LightBox/Slimboxとはまた違ったエフェクトでとてもクールです。

 ”mooSlideBox 3”では画面下からのスライドアップだけだったようですが、この5月に”mooSlideBox 3.2”が登場して画面上部からのスライドダウンも加わりました。 それぞれ上記リンクにあるデモで確認してみてください。

 さっそく私も”mooSlideBox 3.2”を設置してみることに。ところが・・なかなかうまくいきません。

 サイトのからダウンロードした”mooSlide2.js”をアップし、HTMLでmooSlide2の呼び出しと、Top、Bottom表示用に2つのリンクを記述してから、指示通りの方法でボックスを起動してみるのですが・・・・

  •  現象1 ボックスを呼び出す前に、最初からボックスの内容(文字)が画面に重なって表示されてしまう。
  •  現象2 リンクをクリックすると、Bottomからのボックスは表示されるが、Topについてはうまく表示されない。※実際は画面を下にスクロールしてみるとボックスは表示されているのですが、画面上からのスライド表示にはならない。

といった症状が起きてしまいます。

 v3.2ではボックスの呼び出しが”var px =”というようにJavaScriptで呼び出しとなっていて、以前のv3とは記述方法も随分と違っています。私のような初心者にはv3.2の設置は敷居が高いようです。

 誰かネットに書いてくれているだろうとググってみたのですが、v3の設置方法について書かれたサイトはあっても、まだv3.2は今月にアップされたばかりなので、どなたも書かれてなくて、そうなると自力で解決するしかありません。

 随分と時間がかかり、現象1については1日がかりで、現象2は2日目の今朝になってトイレで閃いて(笑)解決し、ようやく表示できるようになりました。♪

 左サイドバーの「mooSlide3.2デモ」にある下記のリンクをクリックしてみてください。 消したいときはボックスの上で再度クリックしてください。

 mooSlide Top   |  mooSlide Bottom

 特に現象2については、mooSlide2.jsの内容が違っていて、修正が必要でした。公式サイトからダウンロードしたものをそのまま使ってもうまく動作しないので注意が必要です。同じような悩みを抱えてここを訪れた方のために、参考まで注意点をFAQとして書いておきます。但し初心者が書いたものですのでそのつもりでお読みください。

 <FAQ>

 Q: ボックスを呼び出す前に、ボックスの内容(文字)が画面に表示されてしまうのですが。

 A: 表示させたいボックスの内容をdivとClassで指定して記述する際に、必ずstyle="visibility: hidden; opacity: 0 などの記述を加えておく。

    ※公式サイトの記述を見ると、ボックス内容は<div id="test" class="mooSlide">や
     <div id="test2" class="mooSlide">いうようにdiv指定で記述されています。ところが、
     単にHTMLにdiv指定で表示したいボックスの内容を記述するだけでは、(当然でしょ
     うが)呼び出し以前にそのまま画面に表示されてしまいます。ブラウザでサイトのソー
     スを表示させてみても確かに<div id="test" class="mooSlide">とだけなっているのに
     なぜその内容が表示されないのかが不思議でした。そこでページ全体をファイルに落
     として調べてみると、<div id="test" class="mooSlide">が実は、<div style="visibility:
     hidden; opacity: 0; z-index: 5000; position: absolute; top: 301px; height: 233px; width:
     983px; left: 0pt;" id="test2" class="mooSlide">となっていて、
     スタイルに visibility: hidden; opacity: 0などの属性が書かれているのがわかりました。
    (なぜブラウザでソース表示させたときはソース部分まで不可視になるのかはわかりま
    せんが・・・) つまり、ボックスの内容は最初から(重ねて)表示しているが、hidden属性
    になっていてるので不可視になっていて、ボックスが呼び出されたときにスクリプトによ
    って属性を visibility: hiddenからvisibility: visibleに書き換えて、見えるようにしているの
    ですね。

 Q:  From Bottomは表示されるが、From Topからが表示されない。

 A: サイトからダウンロードしたmooSlide2.jsの記述に誤りがあります。
    85行目からの if(this.from == "bottom"){    
                 end = top - this.height;
                 }else{
                 end = document.getScrollTop().toInt() - this.height; 
              end以下の部分を

               end = window.getScrollTop() - this.height; に修正する。

     ※公式サイトでは外部スクリプトファイルを使わず、HTML中にJavaScriptが記述して
       あります。こちらとダウンロードしたmooSlide2.jsを比較してみると、上記の部分が異
       なっていました。道理でサイトのデモはちゃんと動くのに、外部ファイルだと動かな
       い訳です。(5/31時点。今後修正されているかもしれません)

 Q: mooSlide2.jsの記述はどこに書いたら良いですか。

 A: headタグ内で、mootoolsの記述以降であれば動きます。
    (記述例)  <head>
                           <script type="text/javascript" src="js/mootools.js"></script>
                           <script type="text/ecmascript" language="javascript"
                             
src="js/mooSlide2.js"></script>

     ※私はv3は試していないのですが、v3のmooSlideX.jsの場合は、headタグ内ではなく、
       bodyタグの終わりの方に書かないと動かないと解説してあるサイトもあるようです
       が、v3.2の場合はheadタグ内でmootoolsの記述の後にあれば動きました。これなら
       HTMLもわかりやすくてよいですね。

 Q: Seesaaブログでの設置アドバイスがありますか。

 A: Seesaaブログでは、「自由形式」のコンテンツを作成することができます。
    mooSlideの表示内容は目的や季節などに応じて内容が入れ替えとなることが予想される
    ので、表示したいボックスの内容は、本体のHTMLではなく、コンテンツ(自由形式)の
    HTMLとして記述しておくと効率的です。
    なお、前述の通り、mooSlide2の読み込みについては、これもコンテンツのHTMLに記述し
    てもいいでしょうが、HTML全体の見通しをよくするには本体のHTMLに記述しておいた
    方が良いと思います。
    公式サイトのデモを事例に、コンテンツのHTMLとして記述するのは以下の部分です。

<p><a href="#" id="toggle">Toggle slider 1</a> | <a href="#" id="toggle2">Toggle
     slider 2</a></p>
<div style="visibility: hidden; opacity: 0; z-index: 5000; position: absolute; top: 163px;
 height: 250px; width: 983px; left: 0pt;" id="test" class="mooSlide">

<p><img src="img/Slider_1_CubaLibre.jpg" alt="Cuba Libre - Die freie Entfaltung von
     Rum">
</p>
<h1>moo<span class="style1">Slide</span> v2.0 revamp</h1>
<p>This is a sample of the new and revamped mooSlide. You can define not only
   one slider, but more, as it uses js classes. You can define:</p>
<ul>
    <li>The slider DIV</li>
    <li>The slide in speed</li>
    <li>The fade out speed</li>
    <li>Remove on click yes / no</li>
    <li>The final opacity</li>
    <li>The height of the slider container</li>
    <li>The type of effect used ( see the mootools transitions effects )</li>
    <li>The toggler element ( i.e. a link )</li>
</ul>
<div style="clear: both;"></div>  </div>  

<div style="visibility: hidden; opacity: 0; z-index: 5000; position: absolute;
 top: 301px; height: 233px; width: 983px; left: 0pt;" id="test2" class="mooSlide"> 
<p><img src="img/Slider_1_CubaLibre.jpg" alt="Cuba Libre - Die freie Entfaltung
     von  Rum"></p>
<h1>multiple moo<span class="style1">Slides</span> on a page</h1>
<p>Here you can see that it's possible to call several sliders on one page,
     just define a new class instance and tell the script which div to use,
     which handler to use to toggle, and you're all set. The release takes
     mootools 1.11 as framework, this little class, and not more. Download ?
     Here </p>
<h4 class="style1">Implementation:</h4>
<p>var px =new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, effect:"linear",
     toggler:'toggle', content:'test', height:250, removeOnClick: true,
     opacity:'1', effects:Fx.Transitions.Bounce.easeOut });</p>
<div style="clear: both;"></div></div>
<script language="javascript" type="text/ecmascript">
  var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, 
               toggler:'toggle', content:'test', height:250, removeOnClick: true,
               opacity:'1', effects:Fx.Transitions.Bounce.easeOut, from:'top' });
  var p = new mooSlide2({ slideSpeed: 1100, fadeSpeed: 500, 
              toggler:'toggle2', content:'test2', height:233, removeOnClick: true,
              opacity:'1', effects:Fx.Transitions.Bounce.easeOut , from:'bottom'});
</script>


posted by 飛梅 at 17:28 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。