仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。
皆様のお力をお貸しいただけないでしょうか。

■galleriaのプラグインを使ってカスタマイズする内容
galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。

■自分でうまくできないところ
このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。
モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。

その他に、もっと簡単にできる方法など教えていただければ助かります。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

>スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ~


『スライドショーの領域内で』だとすると、通常時がほぼ領域サイズに表示でしょうから、さらに拡大して部分拡大表示でスクロール移動のようなことがしたいのでしょうか?
でも、

>モーダルウィンドウはthick.boxを使って表示させています。
(確認していませんが)thisckboxだと、概ねwindowサイズに近い拡大ではありませんでしたっけ?
一方で、(↑)の『スライドショーの領域内』はwindowサイズより小さいのでは?

よくわかりませんが、thickbox風に拡大表示できればよいのであれば、ご提示のサイトのデモがそのようになっているので、もともとの機能に含まれているのではないかと思われます。
 http://galleria.aino.se/
右下の「PopoutImage」の機能か「fullscreen」のような動作では不足なのでしょうか?



documentation、APIなどをざっと見てみると、(英語がわからないので、拾い読み程度ですが)
 showLightbox()、hideLightbox()、.enterFullscreen()などなどのメソッドも用意されているようですし、
http://galleria.aino.se/docs/1.2/api/methods/#us …

 extend( [ options ] )などもそろっていて、拡張にも配慮してあるみたいなので、最悪の場合にはこのあたりを利用して拡張すればよさそう。
http://galleria.aino.se/docs/1.2/options/extend/
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qレベルのカスタマイズの意味について

今回のウィルス騒動で、いろいろと勉強している者です。このサイトや一般の検索をしながら、必要あらばと、独自にセキュリティ対策をしているうちに、頭の中とPCの中がぐちゃぐちゃになってしまいました。
いろいろなダイアログが出現して、てんてこまいです。
インターネットオプションのレベルのカスタマイズの設定
の個々の意味が理解できるサイトや本をご存知ありませんでしょうか。

検索が足らないというお叱りも覚悟の上、質問させていただきます。
へんぴな所に住んでいる為か
本屋さんに3件行っても目的の本がみつかりません。
winME、OE6(プレビュー非表示)
IE6(修正プログラムのダウンロード済み)、アンチウィルスソフトを起動時に毎回更新しているのですが、
それでも足りないのではないかと、試しているうちにレベルのカスタマイズの中身がぐちゃぐちゃになってしまいました。(とりあえず、自分でも手に負えなくなって、レベルのカスタマイズを既定値に戻したものの、不安です。)上記のウィルス対策で充分であれば、良いのですが…。

仮に充分であっても、上記の個々のカスタマイズの意味を知りたいです。
お手数をおかけしますが、ご存知の方がいらっしゃればと、よろしくお願いします。
(難しい言葉も、自分で調べます。)

今回のウィルス騒動で、いろいろと勉強している者です。このサイトや一般の検索をしながら、必要あらばと、独自にセキュリティ対策をしているうちに、頭の中とPCの中がぐちゃぐちゃになってしまいました。
いろいろなダイアログが出現して、てんてこまいです。
インターネットオプションのレベルのカスタマイズの設定
の個々の意味が理解できるサイトや本をご存知ありませんでしょうか。

検索が足らないというお叱りも覚悟の上、質問させていただきます。
へんぴな所に住んでいる為か
本屋さんに3件行っ...続きを読む

Aベストアンサー

とりあえず、下記サイト等如何でしょうか?

IEのセキュリティ設定を変更してセキュリティ機能を強化する (1~3)
  ↓
http://www.atmarkit.co.jp/fwin2k/win2ktips/123ie_security/123ie_security_01.html

セキュリティ強化の点だけでもアップデートの価値あり IE 6.0レビュー
  ↓
http://pcweb.mycom.co.jp/news/2001/09/26/13.html

MSIE 5.01 SP2 / 5.5 SP2 / 6 セキュリティ対応状況
  ↓
http://www.st.ryukoku.ac.jp/~kjm/security/memo/ms-ie.html

参考URL:http://www.atmarkit.co.jp/fwin2k/win2ktips/123ie_security/123ie_security_01.html

Q1ページ内に複数のjqueryのスライドショーを設置するにはどうしたらよろしいでしょうか?

http://apoc.jp/jquery-slider-howto/
コチラのサイトを参考にし、タイマーなどによるスライドはなしでクリックのみのスライドショーをしたいと思っております。
サイトの通りに作ると動きはするのですが、1ページ内に複数配置すると、サイトのslideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい、空白のスライドができてしまったり、ページ内のスライドが全部一斉に動いたりしてしまいます。

スライドごと個別に動くよう、さらに言うと今後写真の差し替えや増減も考慮して、そのたびにjqueryを書き換えるということはしなくても良いようにしたいのですが、どのようにしたらよろしいのでしょうか?

なにとぞよろしくお願いします。

Aベストアンサー

こんにちは。

ご提示の参考サイトでは、理解しやすいようにid等を固定のものとして処理するような記述法をとっていますが、複数のセットに対して動作させようとするとそのままではうまくいきません。


例えば、
全体を一般化して、処理対象を一つのセットに対して限定できるようにしておくような記述にすることでも対応可能です。
クリックした要素はどれかのセットに紐づけられた要素なので、そこから要素のラッパーを調べて、常にそのセットに対して処理するといった要領です。

考え方がもう少し複雑になりますが、全体ををオブジェクト化しておいて、それぞれのセットに対して設定するといった方法も考えられます。(よく用いられている方法です)

上記が『何のこっちゃかさっぱりわからん!』というような場合は、同じスクリプトをコピーしておいて、変数名やidが被らないように書き換えるという方法が一番簡単だと思います。
(ただし、セット数が多くなると、その分だけスクリプトも増大します。)


>slideSetWidthという変数の値がページ内の画像すべてで総合計を出してしまい~
複数セットある場合は、要素選定などの際に、対象の範囲がそのセット内に収まるように注意する必要があります。

例えば
>slideNum = $('.slide').length;
では、文書内の全てのslideクラスを持つ要素の数を取得していますので、複数セットあれば全体をまとめた数になってしまいます。
多分、個々のセット内のslideクラスの要素数を取得したいはずなので、 例えばラッパーにidがふられていて、それをIDとするなら
 $('#ID .slide').length;
などとすることで、要素の範囲を限定可能ですね。

参考サイトのように各親要素ともslideSetのような同じクラスしかなくて、単純には区別できないというのであれば
 $('.slideSet').each(function(i){
   ~~
slideNum = $('.slide', $(this)).length;
   ~~
})
などといった記述にすることでも、それぞれのセット内のslide要素だけを対象にすることができます。

それぞれのセット内で同じクラス名を用いておいた方が、CSSの設定を共有できるなど都合の良いことも多いですが、スクリプトから要素を指定する際には、セレクタを工夫するなどして、適切に対象を選定できるようにしておくことが必要になります。
jQeryでは、CSSセレクタとほぼ同じセレクタ+αが利用可能ですので、意図する対象が指定できる方法を考えみてください。
http://api.jquery.com/category/selectors/

こんにちは。

ご提示の参考サイトでは、理解しやすいようにid等を固定のものとして処理するような記述法をとっていますが、複数のセットに対して動作させようとするとそのままではうまくいきません。


例えば、
全体を一般化して、処理対象を一つのセットに対して限定できるようにしておくような記述にすることでも対応可能です。
クリックした要素はどれかのセットに紐づけられた要素なので、そこから要素のラッパーを調べて、常にそのセットに対して処理するといった要領です。

考え方がもう少し複雑になりま...続きを読む

Q99%悪い意味だと思いますが。

これって、あまりいい意味じゃないですよね?
私が8歳年下で、しかもまだ学生だから?
社会的なことにまだまだ疎いから?
男性とお付き合いした経験が少ないから?
(本格的なお付き合いは、彼が初めて)

「彼女をカスタマイズ出来て羨ましいな〜、楽しいだろうな〜」と、私も同席した(させられた)飲み会で彼の同僚が言いました。
「あ、失礼なこと言うなよ。ホント、なんて失礼なヤツなんだよ、お前は!」と、返してくれましたが。。

「酔っ払いの言うことなんて気にするな」と彼は言いますが、私はすごく気になっています。

彼女をカスタマイズする…99%悪い意味だと思いますが、良い意味で解釈出来る可能性はありますか?
あるとしたら、どんな意味になりますか?
(結構凹んでるので、少し励まして欲しいという私の気持ちが入っています)

Aベストアンサー

あなたが素直で初心っぽく見えたので(しかも8歳年下だし)、
「自分好みの女に育てられる、なんでも言うことを聞かせられる」と
うらやましく思ったんじゃないですか?
特に「悪い意味」ではなく、ただのやっかみですよ。
なにも気にすることはありません。
「失礼だ」と怒ってくれる彼氏はいい彼氏だと思いますよ。

Qjqueryでページを作りたいと思い参考サイトを見ながらサンプルで作っ

jqueryでページを作りたいと思い参考サイトを見ながらサンプルで作って何とか上手く動いたのですが、
IEだと左下に「ページにエラーが発生しました」と表示が出てしまいます。

参考サイト↓
http://www.syboos.jp/webjs/doc/images-auto-slide-by-jquery-js.html

2つエラーが表示され一つは、

ライン 16
文字 9
エラー オブジェクトを指定してください
コード 0

二つ目は、
ライン 1
文字 1
エラー 'return'ステートメントが関数の外側にあります
コード 0

http://chisapi.takeoff-agp.com/jQuery/sample02/sample03.html

サンプルなのでボタンの位置などおかしいですが^^;

あと、HTMLコードが <a class="" href="">2</a> ←こうなってしまうのは、仕方ないのでしょうか?
綺麗なHTMLではないですよね。。。

駄文で申し訳ございませんが、大変困ってるので宜しく御願い致します。

Aベストアンサー

#1です。

> 「'return' ステートメントが関数の外側にあります。」
言葉通りです…。
return は関数内でしか使えません。J
(JavaScript初心者でもいいと思いますが、せめてキーワードでGoogle検索するぐらいはした方がいいんじゃないでしょうか。)

第2回 JavaScriptの関数をマスターしよう - @IT
http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs02/ajaxjs02_01.html

おそらくデフォルトアクションをキャンセルしようとしたのでしょうけれど、サンプルコードが間違っています。
せっかく、jQueryを使っているのですし、event.preventDefault を使用した方が何かと都合がいいと思います。
http://semooh.jp/jquery/cont/doc/event/#event.preventDefault

> <a class="" href="">2</a>
可能なら、画像のURLをhref属性値に指定してください。
JS無効環境下でも読めるようにすると親切だと思います。

#1です。

> 「'return' ステートメントが関数の外側にあります。」
言葉通りです…。
return は関数内でしか使えません。J
(JavaScript初心者でもいいと思いますが、せめてキーワードでGoogle検索するぐらいはした方がいいんじゃないでしょうか。)

第2回 JavaScriptの関数をマスターしよう - @IT
http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs02/ajaxjs02_01.html

おそらくデフォルトアクションをキャンセルしようとしたのでしょうけれど、サンプルコードが間違っています。
せっかく、jQueryを使ってい...続きを読む

Q彼女をカスタマイズ…??

これって、あまりいい意味じゃないですよね?
私が8歳年下で、しかもまだ学生だから?
社会的なことにまだまだ疎いから?
男性とお付き合いした経験が少ないから?
(本格的なお付き合いは、彼が初めて)

「彼女をカスタマイズ出来て羨ましいな〜、楽しいだろうな〜」と、私も同席した(させられた)飲み会で彼の同僚が言いました。
「あ、失礼なこと言うなよ。ホント、なんて失礼なヤツなんだよ、お前は!」と、返してくれましたが。。

彼女をカスタマイズ…具体的にどんなことを言っていると思いますか?

Aベストアンサー

ゲーム脳な同僚さんだったんでしょうかね。

ゲームであれば例えば自分のキャラの外見を好みに変えたり、あとはなんでしょうロボット系であればロボットの装備やらを変えたりとかすることをカスタマイズと言うので若い女の子であれば自分好みに育てられるんだろうなぁ、と色々な意味で失礼だと思います。

QjQueryスライドショーの設定

http://slidesjs.com/
Slides, A Slideshow Plugin for jQuery

ここのjqueryを使って、左右の矢印(← →)をクリックすると
div要素が順番に入れ替わっていくというものを導入しました。

そこで、例えばdivが3つあったとして、
1が表示されているときに→を押すと、当然2に行きますが
3が表示されているときに→を押すと、スクロール自体は右にスクロールしているのに
1が表示されてループしてしまいます。

そこで、3が表示されているときは、→をクリックしても1に行かない、
そもそも→はクリックできず、←しかクリックできない状態にしたいのです。
矢印は消えなくていいです。
うまくストップさせることはできないでしょうか

Aベストアンサー

こんにちは。

矢印を消すタイプであれば比較的簡単に実装できました。
下記ディレクトリにslides.jquery.jsがありますので参考にしてみてください。

動作設定にautoRepeatを追加しました。
これをfalseで指定すると今回の改造した動作になります。
完全なテストはしていないのでバグがあったら申し訳ございません。

こんな感じで指定します。
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 1000,
pause: 2500,
hoverPause: true,
// 指定しないとtrueで指定したのと同じ
autoRepeat: false
});
});


==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7376425/

QDELLのノートパソコンのカスタマイズの(PLOT1077)とは?

メーカーは、DELLのノートパソコンのカスタマイズで
下記のパッケージ特別価格の(PLOT1077)は、何(どんな物・意味)ですか?
パッケージ特別価格
パッケージ価格51,145円(税込み)OFF(PLOT1077)

Aベストアンサー

デル内部で確認するときのパッケージ価格の管理番号

Qjqueryスライドショーをストップする方法

お世話になります。
こちらのサイトを参考にスライドショーを作っているのですが、
ループしないで、最後の画像まできたら、ストップする記述を教えて下さい。
どうぞ宜しくお願い致しますm(==)m

http://www.greenwich.co.jp/blog-archives/p/1903


最後の部分
case 7: //flgが7の場合
//7枚目から8枚目に切り替え
$("#img7").fadeOut(1500);
$("#img8").fadeIn(700);
break;
}

flg++;
if(flg>7){
flg=7; //flgが8を越えたら0に戻る
}

Aベストアンサー

あまり優れたサンプルとは言えないですね。
時間があったので少し書き換えてみましたがどうでしょう。
簡単に書きましたが、サンプルと比較して以下の利点があります。


・htmlの各img要素にidを付与する必要がない。
・画像の枚数によってJavaScriptを編集する必要がない。
・サンプルより少しだけ高速に動作
・JavaScriptの記述がシンプル
・リピート再生するかどうかを変数で設定可能


<script type="text/javascript">
$(function(){
//画像リスト
var $img = $("img","#stage");
//カウンター初期値
var no = 0;
//カウンター最大値
var maxNo = $img.length - 1;
//画像切替間隔(ミリ秒で指定)
var interval = 3500;
//フェードイン・アウトの処理時間(ミリ秒で指定)
var fadetime = 2000;
//リピート再生するかどうか(true or false)
var repeatFlg = false;
//実行部
var timer = setInterval(function(){
if(no != maxNo){
$img.eq(no).fadeOut(fadetime);
$img.eq(no+1).fadeIn(fadetime);
no++;
}else{
if(repeatFlg){
$img.eq(no).fadeOut(fadetime);
$img.eq(0).fadeIn(fadetime);
no = 0;
}else{
clearInterval(timer);
}
}
},interval);
});
</script>

あまり優れたサンプルとは言えないですね。
時間があったので少し書き換えてみましたがどうでしょう。
簡単に書きましたが、サンプルと比較して以下の利点があります。


・htmlの各img要素にidを付与する必要がない。
・画像の枚数によってJavaScriptを編集する必要がない。
・サンプルより少しだけ高速に動作
・JavaScriptの記述がシンプル
・リピート再生するかどうかを変数で設定可能


<script type="text/javascript">
$(function(){
//画像リスト
var $img = $("img","#stage");
...続きを読む

Qwordのツールバーをカスタマイズしても元に戻ってしまいます

wordでツールバーのカスタマイズ(ボタンを増やしたり削ったり)
をしているの次回起動時(windowsの次回起動という意味)には
デフォルトに戻ってしまっております。
[ちなみにWinXP・word2003です]

どうしてでしょうか?
ご存じの方いらっしゃいましたらアドバイスいただけると幸いです。

Aベストアンサー

Adobe Acrobat がインストールされていませんか?
もしもそうなら、最新のバージョンにして下さい。

[WD2003]
ツールバーやスタイル 定型句をカスタマイズしても
変更内容が保存されない
http://support.microsoft.com/default.aspx?scid=kb;ja;897680

QjQuery スライドギャラリーのカスタマイズ

よろしくお願いいたします。

http://slidesjs.com/examples/standard/
こちらのプラグインをカスタマイズして使用しています。

一番目の画像が表示されている時のみ、
prevボタンを非表示にしたいのですが、可能でしょうか?
jsファイルの書き加えが必要になってしまうのでしょうか・・?

もし可能でしたら、どのようにすれば良いかお教えいただけたら幸いです。
どうぞよろしくお願いいたします。

Aベストアンサー

こんにちは。

前にこのプラグインをいじったものを回答したことがあります。

http://oshiete.goo.ne.jp/qa/7376425.html

少し違うかもしれませんが、見てみてください。
補足で頂いても結構です。


人気Q&Aランキング

おすすめ情報