質問: jQueryプラグイン「Flexslider」と「response.js」を併用して、画像位置を調整をする場合 現在、jQueryの勉強しておりまして、Flexsliderとresponse.jsを併用してWEBサイトを制作しておりました。 以下にテストしているURLを載せます。 テストサイトで読み込んだjsファイルの説明です。 jquery.boxcenter.js < 画像の幅を取得してセンター配置にする jquery.handmade.js < イベント等の実行 Flexsliderのli要素内にresponse.js指定のマークアップを記入して、ウィンドウ幅によって画像が変わる形にした後に、その画像を中央にセンタリングしたいと思っています。 response.jsでマークアップ指定した画像の表示までうまくいくのですが、その後の画像の中央配置に手こずっています。 ページ読み込みの際に、画像の幅を取得してセンタリングを上手く適用させたいと思うのですが、response.jsでマークアップ指定した画像表示の後に、中央センタリングができるのでしょうか? プラグインの公式サイト flexslider > response.js >
回答: 何となくですが、 jquery.boxcenter.jsはこうかな、と思いました。 動作確認はしてません。すみません。 ``` $.fn.boxCenter = function() { return $(this).each(function(/* none */){ // thisとiを変更 var w = $(this).width(); //画像の幅 var mleft = (w/2)*(-1); //画像の幅の半分のマイナス値 $(this).css({ "left": "50%" , "margin-left": + mleft+ "px"}); //自分(.box img)のcssプロパティを変更 }); }; ```