- ベストアンサー
jQuery GalleryViewスライドショー
http://spaceforaname.com/gallery-customized.html このスライドショーを使いたくて色々と試していますが（ローカル環境・IE8） １） オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。 ２） カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。 ３） 画面上部の矢印ボタン（←・→・↓）が表示されません。 ４） JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。 XP-Pro SP3,Dreamweaver8で製作しております。 どなたかお助けください。
- sterlingfellow
- お礼率80% (4/5)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE8を使ってhttp://spaceforaname.com/gallery-customized.htmlを ローカルに取り込んでみます。 ページを表示して「ファイル」 > 「名前を付けて保存」 ファイル名 - gallery-customized.html ファイルの種類 - Webページ、完全 エンコード - UTF-8 作成されたgallery-customized.htmlは元のソースから書き換えられているので 「ソースの表示」でエディタに表示された元のソースを gallery-customized.htmlに上書き保存。（文字コード注意） 次にフォルダを作成。 [js] [jquery-galleryview-1.1] [themes] [img] [gallery] jsフォルダの中にjquery-galleryview-1.1フォルダといった感じ。 gallery-customized.filesフォルダ内のファイルを所定のフォルダへ移動。 gallery-customized.html style.css [js] jquery-1.3.2.min.js jquery.easing.1.3.js [jquery-galleryview-1.1] jquery.galleryview-1.1.js jquery.timers-1.1.2.js [themes] [img] [gallery] 01.jpg ～ frame2-08.jpg これでファイルの移動は完了。 足りない画像は表示画像を直接保存しても良いですけど ページテキストの... theme (download here) and ...からも落とせます。 解凍してできたcustomフォルダごとthemesフォルダへ移動。 ------------------------------------------ gallery-customized.html style.css [js] jquery-1.3.2.min.js jquery.easing.1.3.js [jquery-galleryview-1.1] jquery.galleryview-1.1.js jquery.timers-1.1.2.js [themes] [custom] next.png ～ prev.png [img] border.png（http://spaceforaname.com/img/border.png） [gallery] 01.jpg ～ frame2-08.jpg ------------------------------------------ 最終的にこんな構成になればOKです。 旧バージョンの構成ですが、とりあえず確実に動くものをローカルに置く。 そこから自身の好みに仕上げていくようにすれば良いんじゃないでしょうか。 因みに、jquery.galleryview-2+.jsに差し替えても動きません。 旧バージョンとのhtml互換はないようです。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
まず必要なライブラリーをそろえます。 現在リリース版最新バージョンは2.1.1みたいです↓ http://plugins.jquery.com/node/13726 からzipをダウンロードしてサーバーにアップします。 ※themesのサブディレクトリーとその中身も忘れずに、アップしておきます。 デフォルトのCSSもね。 次に、jQuery本体と、その他jQueryプラグインも入手します。 zipの中にも入ってますが、最新版を持ってきたほうが良い場合があります。 ・jQuery本体（現在1.4.4があります。） ※min型式のでよいでしょう ↓ http://code.jquery.com/jquery-1.4.4.min.js ・jquery.timers.js(1.2) ↓ ※jquery.timers-1.2.jsとしてアップしておきます。 ↓ http://plugins.jquery.com/files/jquery.timers-1.2.js.txt ・jqueryt.easing（1.3）↓ http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js ※新しいブラウザーだといらないと思うけど念のため 全部「galleryview-2.1」フォルダーの中に揃ったら、<head></head>の中に <link type="text/css" rel="stylesheet" href="galleryview-2.1/galleryview.css" /> <script type="text/javascript" src="galleryview-2.1/jquery-1.4.4.min.js" charaset="UTF-8"></script> <script type="text/javascript" src="galleryview-2.1/jquery.easing.1.3.js" charaset="UTF-8"></script> <script type="text/javascript" src="galleryview-2.1/jquery.timers-1.2.js" charaset="UTF-8"></script> <script type="text/javascript" src="galleryview-2.1/jquery.galleryview-2.1-pack.js" charaset="UTF-8"></script> と書く そして、次に自分のSCRIPTを書く <script type="text/javascript"> $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100, }); </script> ここで、カストマイズオプションを指定する。 ※本体HTMLのマークアップも間違えないように！ オーバーレイ部分に表示されるテキストの位置、大きさの設定 ＝＞ overlay_height:70, // nteger (pixels) overlay_font_size:"1em", // any font size value (px,em,pt,%) overlay_position:"top", //‘top’ | ‘bottom’ で指定する。 カーソルを画像に持っていった時にスライドショーがストップする ＝＞ pause_on_hover:true, // true | false で指定する。 画面上部の矢印ボタン（←・→・↓）が表示されません。 ＝＞ themesディレクトリーの準備を忘れてるんじゃないかと思います。あるいはパス指定が違ってるのか．．。自分のオリジナルの矢印画像にしたかったら、同じファイル名で置き換えます。 詳しくは↓ http://spaceforaname.com/galleryview を隅々までよく読むことです。 それか、ここにあなたのSCRIPTとHTMLマークアップ部分を載せてみてはどうでしょうか？
お礼
yyr446 様 早速のご回答ありがとうございます。文字数制限に引っかかってしまいましたのでgalleryview-2.1フォルダ内容とコードの記述内容は補足欄に入れます。ブラウザ(IE8)でチェックすると画面に何も表示されずに画像の高さの合計分縦にスクロール出来る状態となってしまいます。
補足
themes フォルダ galleryview.css ファイル jquery.easing.1.3.js ファイル jquery-1.4.4.min.js ファイル jquery.galleryview-2.1.js ファイル jquery.galleryview-2.1-pack.js ファイル jquery.timers-1.2.js ファイル loader.gif ファイル
お礼
my--様 ありがとうございました。相対パス、jquery.galleryview-1.1.js内のコードの書き替えでなんとか思った通りに動かせるようになりました。