- ベストアンサー
jquery-galleryviewのカスタマイズ・・・
jquery-galleryviewをカスタマイズして自分のページに使用したいのですが、JavaScriptの知識に乏しく、どこをいじれば良いのかわかりません。 http://www.spaceforaname.com/jquery/galleryview 画像のサイズなどは変更できたのですが、 ・pointer ・next ・prev この画像だけがどこで変更させるのかが分からず困っています。 画像を置き換えても、サイズが固定されているようで、小さな画像に置き換えてもデフォルトの大きさに引き伸ばされます。 解説サイトやおわかりになる方、是非アドバイスお願いします＞＜
- goaldast
- お礼率46% (97/210)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jquery.galleryview-2.0.jsのソースを見ると ・pointerのサイズについては、 $.fn.galleryView.defaults = {} の中に、pointer_size: 8,とありこれが縦横のサイズですから $('#photos').galleryView({ ----------- pointer_size: 4, ----------- }); で指定できると思われます。ただ使用方法にガイドされてないので、 かえちゃ不具合があるのかも知れません。 ・nextと・prevについては、どこにもサイズの指定らしき部分は みつから無かったので、themesの中のnext.gif,prev.gifの画像を 置き換えるか、ソース中の//Add navigation buttons以下の部分を 書き換えればよいのでしょうが、改造してうまくいくのか、不具合が 出ないかの保障はまったくありません。 この手のライブラリーは素直に使うのが一番だと...
関連するQ&A
- GalleryViewのカスタマイズについて
GalleryViewのカスタマイズについて jqueryのプラグイン、GalleryViewを使っています。 http://spaceforaname.com/galleryview デモ http://spaceforaname.com/gallery-light.html 現状はデモ通りに使用していますが、左端にクリックしたサムネイルがきたときだけ、そのimgにclassを 付加させたいと思っています。しかしうまくいかず困ってます。 最新版はver2のようですが、仕様が変わっており、また作者による解説もないためデモと同じver1.1使用しています。 ご教授ください。よろしくお願いします。
- ベストアンサー
- JavaScript
- 「jQuery GalleryView - by Jack Ander
「jQuery GalleryView - by Jack Anderson」を使ってみたいのですが、IE8で見た場合、画面が切り替わる際、文字部分が潰れてしまうのが、気になってます。修正する方法がもしあれば、誰か教えてください。 ▼jQuery GalleryView - by Jack Anderson http://spaceforaname.com/gallery-light.html
- ベストアンサー
- JavaScript
- jqueryについて質問させて下さい。
jqueryについて質問させて下さい。 galleryviewというjqueryをサイトに入れたいと思っています。 ↓こちらのサイトです。 http://www.spaceforaname.com/jquery/galleryview/gallery-light.html こちらですが、IEでみるとスライドが変わる際に説明文が前のものと次のものとが重なってしまって困っています。 重ならないようにするにはどのように設定すればよろしいでしょうか？ jquery初心者のため、ほとんど知識がありません。教えて頂ければ大変ありがたいです。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- jQuery版のlightbox.jsのカスタマイズについて質問です。
jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- galleryviewのjavascriptについ
下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GalleryView - Default Demo</title> <!-- First, add jQuery (and jQuery UI if using custom easing or animation --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Second, add the Timer and Easing plugins --> <script type="text/javascript" src="../js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script> <!-- Third, add the GalleryView Javascript and CSS files --> <script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script> <link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" /> <!-- Lastly, call the galleryView() function on your unordered list(s) --> <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script> </head> <body> <ul id="myGallery"> <li><a href="http://ariacompany-since2010.com/shop/products/list.php?category_id=47"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" /> </ul> <p>Please view the source of this page if you are having difficulties setting up GalleryView.</p> </body> </html>
- 締切済み
- JavaScript
- jQuery スライド（カルーセル）のカスタマイズ
jQuery スライド（カルーセル）のカスタマイズで困っています。 http://slidesjs.com/ こちらのサイトのJqueryライブラリを使って、 常時3つ表示のスライドギャラリー（カルーセル）を作成したいと思っています。 サンプルの中に3つ表示のタイプが含まれているのですが、（/Slides/examples/Carousel/) スライドも3つ同時に動きます。この部分を1つずつ動かしたいと思いカスタマイズしていますが、 うまくいきません。 要件としては、下記です。 ・同時に3つ表示させたい ・スライドは１つずつ動かしたい ・きれいにループさせたい（最後と最初のアイテムをスムースに接続） ・「Prev」「Next」「pagination」はそのまま活かしたい ・「pagination」のボタンは現状、1つに対して3つのアイテムがスライドするが、１つに対して1つにしたい。 別のライブラリをベースにしたほうがよいでしょうか。 何分素人なので、どなたかご教授くださいませ。よろしくお願いします。
- 締切済み
- JavaScript
- jqueryによる画像切り替えのカスタマイズ
jqueryによる画像切り替えのカスタマイズについて こちらのサイト（http://blog.net-king.com/）で、プラグインをダウンロードし、 設置・動作確認と基本的なことは完了しました。 オプションでの設定以外のことについてカスタマイズを試みたのですが、 知識不足で上手くいかず、お知恵を拝借できればと思い投稿いたしました。 実装したいカスタマイズ内容ですが、 そのままの状態だとページを開いたときにデフォルトで表示されるのは menu1の青い画像であるphoto01.jpgになっていますが こちらを任意の画像での表示にしたいのです。 （その際メニューの順番は変更なしでお願いします！） 何かご不明点等があれば補足をさせていただきます。 もしお分かりになる方がいらっしゃいましたらご教授いただければ幸いです。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery スライドギャラリーのカスタマイズ
よろしくお願いいたします。 http://slidesjs.com/examples/standard/ こちらのプラグインをカスタマイズして使用しています。 一番目の画像が表示されている時のみ、 prevボタンを非表示にしたいのですが、可能でしょうか？ jsファイルの書き加えが必要になってしまうのでしょうか・・？ もし可能でしたら、どのようにすれば良いかお教えいただけたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery bxSlider 画像に変更
jQueryのスライダー「bxSlider」矢印画像を追加してテキストを画像に変更したい ＝＝＝＝＝＝＝＝＝＝＝ コード ＝＝＝＝＝＝＝＝＝＝＝ <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#bx-pager' }); }); </script> ＝＝＝＝＝＝＝＝＝＝＝ html ＝＝＝＝＝＝＝＝＝＝＝ <ul class="bxslider"> <li><a href=""><img src="http://xxx.com/image/01.png" /></a></li> <li><a href=""><img src="http://xxx.com/image/02.png /></a></li> </ul> ＝＝＝＝＝＝＝＝＝＝＝ 表示画面 ＝＝＝＝＝＝＝＝＝＝＝ スライド画像の下に、 PrevNextのテキストリンクがでてきます。 ＝＝＝＝＝＝＝＝＝＝＝ 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝ 本体サイトの用に スライド画像の左右に矢印画像を入れたい PrevNextのテキスト文字を消して●●●の画像に変更したいです。 本体サイト http://bxslider.com/ jquery.bxslider.cssの97行目辺りを変更してみましたが、変わりません。 カスタマイズをご存知の方がおられましたらご教授ください。 /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(http://xxx.com/images/pre.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(http://xxx.com/images/next.png) no-repeat -43px -32px; }
- 締切済み
- JavaScript
- 同HTML内で複数のjQueryを設置する方法
複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございます＾＾ なんとかうまくいきました！ やはりこの手のものはご指摘いただきました通り、そのまま使うのが良いのかもしれませんねｗ
補足
あと1点だけ、すいません＞＜ themesの▲カーソルは画像なので良いのですが、サムネイルを囲むborderのカラーはどこから変えればよいのでしょうか・・ 探したのでうが、borderを#FFFFFFやwhiteと指定している箇所が 見つかりませんでした。 分かるようでしたら是非ご回答お願いいたします。