- 締切済み
Jqueryのアレンジの仕方
http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html こちらのサイトを利用してJqueryを使ってみましたが、 http://www.dalia.co.jp/index.html 1) このように、両サイドに半透明で画像を表示されるにはどうしたらいいのでしょうか？ 2) 左右の矢印は大きなブルーの矢印になっていますが、矢印の画像を変更（アレンジ）するにはどうしたらいいのでしょうか？ １）と２）のどちらでもいいので、ご存知の方よろしくお願い致します。
- JAZZ-NY
- お礼率72% (152/209)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- cashmereRX
- ベストアンサー率26% (12/46)
こんにちは。 基本的に質問されている項目は使用されているjqueryプラグインなどのパラメータによる対応ではなく、CSSによる対応が必要になります。 参考にされているサイトのやり方を確認したみたところ以下のようなやり方で実装されていました。 1) divタグを二つ用意しそれぞれにmask_lとmask_rという二つのclassを対応させ、そのclassに半透明の画像などを指定することで、一部を半透明画像にしています。 2) 矢印に関しては、プラグインで使用されているデフォルトのCSSを書き換えており、bx-nextとbx-prevを変更したい画像などに変更しているようです。 どちらに対しても言えることは、画像に関しては、パラメーターで変更できるものではありませんので、ご自身で作成する必要があるかと思います。 Chromeのディベロッパーツール等でサイトのCSSやHTMLを確認できますので、そちらでどのように書かれているのかを確認し真似をしてみながらご自身のやりたいデザインを実現されると良いかと思います。 参考になれば幸いです。
jQueryプラグインのbxSliderを使用していますね。 bxSlider自体は簡単に導入できるので公式のサンプルを見るとして、 レスポンシブにするためのCSS知識は最低限必要です。 １）２）共にCSS知識が必要ですが、 ページに読み込んでいるCSSファイルがそのものなので、 それをいじって確認した方が良いと思いますよ。 bxSlider http://bxslider.com/ bxSliderパラメータ http://www.trust.or.jp/Public/Blog.aspx?ArticleNo=23
お礼
お礼が遅くなりました。 参考にさせて頂きました。
補足
sdgh8s5thbさん ご返事ありがとうございます。 http://www.trust.or.jp/Public/Blog.aspx?ArticleNo=23 こちらを拝見させて頂きましたが、１）２）とも具体的にどうすればいいのか分かりません。 １）はどのパラメータを使えばいいのか？です。 また、矢印のカスタマイズもありましたが、どうやって画像を入れ変えればいいのか分かりません。 お分かりだったらお教え下さいませ。 よろしくお願い致します。
関連するQ&A
- アレンジの仕方、教えて下さい。
先日、jQuery(JavaScript)を教えて頂きました。 ヘッダー画像の下の丸い点をクリックすると画像が変わり、また左右の矢印でも変えられる。 画像はスライドがフェードで入れ替わる、というものです。 こちらのサイトのものを使わせて頂きました。 http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html 今回は、画像下の丸い点などを入れずにフェードでの入れ替えを考えておりますが、上のサイトにはサンプルがありませんでした。 （example3を使って、下の丸を表示させないカタチにしたいです。） アレンジの仕方や、また他のプラグンがございましたら、ご存知の方、よろしくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- JQueryのスライドショーを停止させたい
サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止（ループさせない）ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか？ http://vegas.jaysalvat.com/ （SLIDE SHOWを利用しています。） よろしくおねがいします。
- ベストアンサー
- JavaScript
- jQuery、カルーセルの改造について
どなたか教えていただけませんでしょうか。 jQueryのカルーセルを設置したのですが （こちらのカルーセルです→http://jqueryfordesigners.com/jquery-infinite-carousel/） 左右の矢印にマウスを置いただけでスクロールしてくれるような改造は難しいでしょうか？ マウスを置くとスクロールが開始されて、離すと止まる。 クリックすると手動に切り替わる ……ような雰囲気が理想です。 宜しくお願いします！
- ベストアンサー
- JavaScript
- jqueryのスライダー カスタムについて
http://zxcvbnmnbvcxz.com/jquery-簡単かつ高性能なスライダー【bxslider】の設置-divス/ こちらのスライダーを使用して、 「next」と「back」を画像にしたいのですが、 どこを書き換えらできますでしょうか。 html内に記述がないので多分以下のjsだと思うのですが。。 http://preview.spawn.jp/demonstration/js/jquery.bxSlider.min.js 詳しい方、どうぞよろしくお願いしあます。
- ベストアンサー
- JavaScript
- jquery-galleryviewのカスタマイズ・・・
jquery-galleryviewをカスタマイズして自分のページに使用したいのですが、JavaScriptの知識に乏しく、どこをいじれば良いのかわかりません。 http://www.spaceforaname.com/jquery/galleryview 画像のサイズなどは変更できたのですが、 ・pointer ・next ・prev この画像だけがどこで変更させるのかが分からず困っています。 画像を置き換えても、サイズが固定されているようで、小さな画像に置き換えてもデフォルトの大きさに引き伸ばされます。 解説サイトやおわかりになる方、是非アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
- jQueryでふたつの動作をさせたいのですが？
jQueryでふたつの動作をさせたいのですが、適用のしかたがわかりません。 詳しい方、教えてください。 ■その１：ページのトップに戻す http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html この動作単独では動きました。 ■その2：マウスオーバーで画像を変更 http://www.webcreatorbox.com/tech/jquery-tips20/ その１で、プラグインのscrolltopcontrol.jsで指示する矢印画像：scrollup.gif に、 その2のマウスオーバーをかけたいのです。 その2のマウスオーバーは、<body>内に実存する画像に対応するようになっていて、 scrolltopcontrol.js内に書かれている画像に、指示すにはどうしたら良いのかわかりません。 また、この方法ではできないのなら、「その１：ページのトップに戻す」を生かして、そのボタンに マウスオーバーをかける他の方法を教えてください。
- ベストアンサー
- JavaScript
- jQueryの記述についてご指摘ください。
jQuery初心者で大変恐縮ですが、質問させていただきました。 「mLivre」というプラグインを使用しております。（下記URLを参照ください） ※参考サイト 雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre http://coliss.com/articles/build-websites/operation/javascript/jque... このプラグインは本をめくるように画像を表示してくれるプラグインです。 レスポンシブでも動くようにしたいと思い、コードを記述してみました。 画像自体はレスポンシブになりましたが、プラグインの動作が少しおかしくなってしまいました。 リサイズすると、めくる様な動作をしてくれますが、画像が切り替わらなくなってしまいました。 原因は、リサイズ時に画像の枚数のカウントがおかしくなっているせいだと思いますが、 どう変えればいいのかわからずに困っております。 「mLivre.js」自体はいじっておりません。 スクリプト実行部分に記述を追記いたしました。 下記にコードを記述いたしましたので、もしよろしければご指摘いただければと 思います。 よろしくお願いいたします。 ------------コード--------------- jQuery(document).ready(function() { var imgW; var imgH; var winW; var scaleW; var setW; var setH; setSize(); //リサイズしたら実行 jQuery(window).resize(function(){ setSize(); }); function setSize() { //元の画像サイズ指定 imgW = 500; imgH = 375; //横幅に合わせて縦幅の調整 winW = jQuery( '#page' ).width(); scaleW = winW / imgW; setW = winW; setH = imgH * scaleW; //要素の画像サイズ jQuery("#slide img").width(setW); jQuery("#slide img").height(setH); //実行部分 jQuery('#slide').mLivre({ width:setW, height:setH, dossier:'http:/画像のURL/images... }); } });
- ベストアンサー
- 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
- こんな動きができるJqueryを探しています。
お客さまより、こんな動きができないか？と言われていろいろ探していたんですが、 全然見つからないので、こちらで質問させていただきます。 こちらのサイトの様な動きができるJqueryプラグインはありませんか？ ↓↓↓↓ ---- 摂南大学様サイト http://www.setsunan.ac.jp/ ---- 左右の画像は透明にならなくてもかまいません。（むしろならないほうがいいです） メインの画像が１枚だけ切り替わるスライダーは沢山あるみたいなんですが、 この様に、左右の画像が表示され、なおかつ下のまるい図の色が変わるものが見つからずに、 とても困っています。 どなたか教えていただけませんか？
- ベストアンサー
- JavaScript
- Jqueryスライドが動きません。教えてください
WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
お礼
お礼が遅くなりました。 参考にさせて頂きました。