人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryプラグイン「Flexslider」と「response.js」を併用して、画像位置を調整をする場合

現在、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/

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● POGPI
●20ポイント

cssで、「text-align:center」でもできそうですが、画像の幅とウィンドウ幅で位置を出すなら、screen.widthをjsでフォームに設定して、POSTさせてサーバー側で計算すればできますね。


nagato-yukiさんのコメント
ご回答ありがとうございます。 参考になりました! またのご助言をお待ちしております。

2 ● a-kuma3
●200ポイント ベストアンサー

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: からの3行を追加です。

Response.ready とか、他の場所でやっている .boxCenter() の処理は必要なくなると思います。


後、動作には関係ないですが、自前の処理を library/js/jquery.handmade.js な感じのファイルにしちゃうと、他から持ってきたライブラリみたいなんで、別の名前にした方が良いと思います。


nagato-yukiさんのコメント
ご回答ありがとうございます。 また、詳しい説明にとても勉強になります。 ファイル名の解説も参考になりました。ありがとうございます。 また、ご機会ございましたらよろしくお願い致します。

3 ● sasada
●80ポイント

何となくですが、 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プロパティを変更
});
};


nagato-yukiさんのコメント
ご回答ありがとうございます。 参考になる回答でした! 是非、また機会がございましたらご助言ください。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ