![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_01.png?e8efa67)
http://spaceforaname.com/gallery-customized.html
このスライドショーを使いたくて色々と試していますが(ローカル環境・IE8)
1) オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。
2) カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。
3) 画面上部の矢印ボタン(←・→・↓)が表示されません。
4) JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。
XP-Pro SP3,Dreamweaver8で製作しております。
どなたかお助けください。
No.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互換はないようです。
my--様
ありがとうございました。相対パス、jquery.galleryview-1.1.js内のコードの書き替えでなんとか思った通りに動かせるようになりました。
No.1
- 回答日時:
まず必要なライブラリーをそろえます。
現在リリース版最新バージョンは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. …
・jqueryt.easing(1.3)↓
http://gsgd.co.uk/sandbox/jquery/easing/jquery.e …
※新しいブラウザーだといらないと思うけど念のため
全部「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マークアップ部分を載せてみてはどうでしょうか?
この回答への補足
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 ファイル
yyr446 様
早速のご回答ありがとうございます。文字数制限に引っかかってしまいましたのでgalleryview-2.1フォルダ内容とコードの記述内容は補足欄に入れます。ブラウザ(IE8)でチェックすると画面に何も表示されずに画像の高さの合計分縦にスクロール出来る状態となってしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- Windows 10 Windows10のロック画面でスライドショーのフォルダー追加ができません 4 2023/06/07 13:05
- ノートパソコン パソコンでスライドショーの画面に時計を表示させたい。 5 2022/09/22 15:00
- 画像編集・動画編集・音楽編集 AfterEffectでのシャターの挙動がおかしい 1 2023/05/07 00:38
- ノートパソコン デュアルディスプレイの拡張と複製の違い。この場合はどっち?」 6 2022/09/20 16:54
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- Windows 10 Windows11タスクバーやエクスプローラー、スタートメニュー 動画全画面時にカーソルが見えない 1 2022/04/08 00:03
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQuery GalleryViewスライドショー
-
jqueryでつぶやきを自動スライ...
-
crossSlideがうまく機能しない...
-
CrossSlideのスライドショーが...
-
<a href="#" …>の意味を教えて...
-
mailto + 変数名
-
インラインフレームをドラッグ...
-
twitter widgetが表示されない
-
初心者javascript ウィンドウサ...
-
javascriptとApacheの設定
-
HTMLでサブフレームから親のス...
-
bodyにidをつける理由は何ですか?
-
ページを訪問者にたった一度だ...
-
フレームを跨ぐドロップダウン...
-
HTMLアプリでインラインフレー...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptのエラー ( 関数の...
-
リンク移動先のURLを取得
-
小窓を表示する時に、必ず右上...
-
【javascript クロスブラウザ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
ebayの返信で『 Message may no...
-
DreamWeaverでJS
-
document.lastChild.appendChil...
-
パソコンでホームページを作成...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
jQueryのloadメソッドをする際...
-
フォントサイズを変更するボタ...
-
同一HTML内に複数のjQueryを作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報