• 締切済み

jQueryリサイズ処理と記述でご指摘ください。

jQueryプラグインで、「mLivre」というプラグインを使っております。 ※mLivre:[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 「mLivre」は画像をめくるように表示してくれるプラグインです。 このプラグインをレスポンシブにしたいと思い、リサイズ命令でブラウザサイズに合わせて 大きさを変えていきたいと思っております。 現時点で画像の表示自体はリサイズ出来ておりますが、 ページをめくる動作でアニメーションの表示が上手くいきません。 一番初めの数値(ページを開いた時点での数値)を記憶しているのか、 一番初めに表示されていた場所から画像がめくられてしまいます。 (説明が下手で申し訳ございません) 素人で恐縮ですが、私の記述で間違っているところがあり 私自身、間違いに気付けない状態です。 下記にコードを記述いたしました。 ご指摘いただければと思います。 ---------「mLivre」呼び出し部---------- jQuery(function() { var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; setSize(); jQuery('#slide').mLivre({ pageDefault:0, over:true, loader:true, eventLoad:null, eventOpen:null, width:setWi, height:setHi, dossier:'http://URL/images/slide/', //画像 }); function setSize() { //画像サイズ指定 imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); } }); ------「mLivre」コア部---------- //11行目はじまり (function(jQuery) { jQuery.fn.mLivre = function(options,num) { switch (options) { //switch部 略 // break; } //↓追加したリサイズ部 jQuery(window).resize(function(){ var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); opts.width = setWi; opts.height = setHi; jQuery(".mLivre").width(setWi); //プラグインの大きさ jQuery(".mLivre").height(setHi); }); }); //↓元々の記述、変更していません var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); //省略 })(jQuery); var mLivre={ //ここからが処理部(アニメーション)だと思います。(変更していません) progress:false, //省略 }); } }

  • tsyok
  • お礼率90% (29/32)

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

styleのzoomとかを使ったらどうなりますか?

関連するQ&A

  • 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... }); } });

  • jquery cycleで画像リサイズ

    jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください!!

  • jqueryのロールオーバーについて

    jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか? ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか? 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);

  • jQueryの関数内の変数について教えてください

    jQueryで外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「mLivre」を実行し、リサイズ処理をした時に もう一度「mLivre」を実行しております。 「var mLivre」内にある数値を、「jQuery(window).resize」の中の 「 jQuery.fn.mLivre」の中にある変数に代入しようと思っております。 私のやりたいことは、「mLivre」というプラグイン(下記※参考サイト)を レスポンシブにしたいと思っております。 「mLivre」は画像を本の様にめくってくれるスクリプトです。 下記のコードの流れで、ブラウザサイズに合わせて表示の大きさを 変えることができましたが、リサイズするごとに初期化され ページが1ページ目からになってしまうので、 リサイズ後も変わらないページで表示させたいと思っております。 ※参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 全くの初心者で大変恐縮しておりますが、 ご享受いただけたらと思います。 また、記述についてもご指摘いらだけたら幸いです。 宜しくお願いいたします。 -------ソースコード---------- //実行外部ファイル jQuery('#slide').mLivre({ }); //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 } jQuery.fn.mLivre = function(options,num) { //この中の変数に代入したい }; jQuery('#slide').mLivre({  //リサイズ後の実行部 }) ; }); })(jQuery); var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 }

  • jQuery でスライドショーをストップ

    jQueryを使い、トップページを背景となる写真3枚を全画面で フェードイン→フェードアウトという風にループしています。 3枚目の写真でそのまま静止させたいのですが、どのようにしたら3枚目の写真でストップするのでしょうか? 以下のもののファイルを書き換える必要があると思いますのでソースを記述しました。 fadechanger.js fitter.js HTMLページのソースとfadechanger.js、fitter.js どちらのファイルのソースを書き換えればよいのでしょうか? 初めてjQueryを使ってみたので全くの初心者です。 どうぞよろしくお願いします。 HTMLページのソース <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/fitter.js"></script> <script src="js/fadechanger.js"></script> <script src="js/imgloader.js"></script> <script src="js/transition.js"></script> <script> $(function() { // オプションの一括指定 var options = { imglist: [ "photo/0.jpg", "photo/1.jpg", "photo/2.jpg", ], width: 1000, height: 1100, minWidth: 600, minHeight: 660, callback: function() { var self = this; // ローディング表示を終了 $("#loading").hide(); // 末尾の要素をフェードイン self.find("img").eq(-1).fadeIn(function() { // フェード切り替え開始 self.fadechanger({ selector: "img" }); }); // fitter起動 self.fitter(options); } } // loader $("#imgContainer").imgloader(options); // transition $("#header a").transition(); }); </script> fadechanger.jsのソース (function($) { /** * fadechanger */ $.fn.fadechanger = function(options) { var self = this, defaults = { speed: 3000, wait: 3000, selector: "" }, config = $.extend({}, defaults, options); self.find(config.selector).show(); (function() { var arg = arguments; self.find(config.selector).eq(-1).delay(config.wait).fadeOut(config.speed, function() { $(this).prependTo($(this).parent()).show(); arg.callee(); }); })(); return this; }; })(jQuery); fitter.jsのソース (function($) { /** * fitter */ $.fn.fitter = function(options) { var self = this, defaults = { width: 1000, height: 1100, minWidth: 600, minHeight: 660, selector: "img" }, config = $.extend({}, defaults, options); // resize $(window).resize(function() { var w = $(window).width(), h = $(window).height(); // 最小サイズ設定 if (w < config.minWidth || h < config.minHeight) { return false; } // IE 6 if ($.browser.msie && $.browser.version < 7) { self.width(w).height(h); } // 画像サイズ変更。後ろはIE用 if (w / h > config.width / config.height) { self.find(config.selector).width(w).height(w * config.height / config.width); } else { self.find(config.selector).height(h).width(h * config.width / config.height); } }).resize(); return this; }; })(jQuery);

  • jqueryについて教えて下さい。

    貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){       //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);

  • jQueryで要素を複製するプラグインの作成

    jQueryのプラグインを作成しています。 やりたいことは、追加ボタンをクリックしたら、指定要素を複製していくというものです。 下記のようにプラグインを作成しましたが、 なぜか要素(clone_base1)が消えてしまいます。 原因もわからず困っています。 どのようにしたらよいのでしょうか。 (function(jQuery) { jQuery.fn.clone = function(options) { //defaultの値 var options = jQuery.extend({ reset_form: true ,clone_base : "clone_base1" }, options); return this.each(function() { jQuery(this).click(function(){ //元となるボックスを複製 jQuery("."+options.clone_base).clone().appendTo("."+options.clone_base); }); }); }; })(jQuery);

  • jQueryでappleっぽい画像ギャラリー設置したいです

    http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか? (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか?それともbodyでしょうか? (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか? 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか?また何も触らなくてもいいのでしょうか? 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(¥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • jQuery マウスオーバーのたびに処理を繰り返す

    よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。(サムネイルには元画像をcssで縮小して表示しています) やりたいことは以下の2つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>

専門家に質問してみよう