現在、jQueryの勉強しておりまして、Flexsliderとresponse.jsを併用してWEBサイトを制作しておりました。
以下にテストしているURLを載せます。
http://music.geocities.jp/kinokolovers1/
テストサイトで読み込んだjsファイルの説明です。
jquery.boxcenter.js < 画像の幅を取得してセンター配置にする
jquery.handmade.js < イベント等の実行
Flexsliderのli要素内にresponse.js指定のマークアップを記入して、ウィンドウ幅によって画像が変わる形にした後に、その画像を中央にセンタリングしたいと思っています。
response.jsでマークアップ指定した画像の表示までうまくいくのですが、その後の画像の中央配置に手こずっています。
ページ読み込みの際に、画像の幅を取得してセンタリングを上手く適用させたいと思うのですが、response.jsでマークアップ指定した画像表示の後に、中央センタリングができるのでしょうか？
プラグインの公式サイト
flexslider > http://flexslider.woothemes.com/
response.js > http://responsejs.com/
No.2
4973
2154
200pt
library/js/jquery.handmade.js の先頭でやっている Flexslider の指定を以下のように書き換えてください。
$(function(){ $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", slideshow: false, controlNav: "thumbnails", start: function() { $('.box-16-9').boxCenter(); } }); }); ...
controlNav: の行の最後にカンマをつけて、start: からの３行を追加です。
Response.ready とか、他の場所でやっている .boxCenter() の処理は必要なくなると思います。
後、動作には関係ないですが、自前の処理を library/js/jquery.handmade.js な感じのファイルにしちゃうと、他から持ってきたライブラリみたいなんで、別の名前にした方が良いと思います。
No.1
42859
20pt
cssで、「text-align:center」でもできそうですが、画像の幅とウィンドウ幅で位置を出すなら、screen.widthをjsでフォームに設定して、POSTさせてサーバー側で計算すればできますね。
ご回答ありがとうございます。
参考になりました！
またのご助言をお待ちしております。
No.2
49732154
ここでベストアンサー
200pt
library/js/jquery.handmade.js の先頭でやっている Flexslider の指定を以下のように書き換えてください。
$(function(){ $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", slideshow: false, controlNav: "thumbnails", start: function() { $('.box-16-9').boxCenter(); } }); }); ...
controlNav: の行の最後にカンマをつけて、start: からの３行を追加です。
Response.ready とか、他の場所でやっている .boxCenter() の処理は必要なくなると思います。
後、動作には関係ないですが、自前の処理を library/js/jquery.handmade.js な感じのファイルにしちゃうと、他から持ってきたライブラリみたいなんで、別の名前にした方が良いと思います。
ご回答ありがとうございます。
また、詳しい説明にとても勉強になります。
ファイル名の解説も参考になりました。ありがとうございます。
また、ご機会ございましたらよろしくお願い致します。
No.3
1482133
80pt
何となくですが、 jquery.boxcenter.jsはこうかな、と思いました。
動作確認はしてません。すみません。
31
22
$.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プロパティを変更
});
};
ご回答ありがとうございます。
参考になる回答でした！
是非、また機会がございましたらご助言ください。
2
ご回答ありがとうございます。
2014/05/19 21:00:33また、詳しい説明にとても勉強になります。
ファイル名の解説も参考になりました。ありがとうございます。
また、ご機会ございましたらよろしくお願い致します。