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/

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/05/15 11:11:00
  • 終了:2014/05/19 21:06:52

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4490ベストアンサー獲得回数18592014/05/15 12:58:21

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

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


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

id:nagato-yuki

ご回答ありがとうございます。
また、詳しい説明にとても勉強になります。

ファイル名の解説も参考になりました。ありがとうございます。
また、ご機会ございましたらよろしくお願い致します。

2014/05/19 21:00:33

その他の回答(2件)

id:pogpi No.1

pogpi回答回数373ベストアンサー獲得回数492014/05/15 12:01:48

ポイント20pt

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

id:nagato-yuki

ご回答ありがとうございます。
参考になりました!

またのご助言をお待ちしております。

2014/05/19 21:01:57
id:a-kuma3 No.2

a-kuma3回答回数4490ベストアンサー獲得回数18592014/05/15 12:58:21ここでベストアンサー

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

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


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

id:nagato-yuki

ご回答ありがとうございます。
また、詳しい説明にとても勉強になります。

ファイル名の解説も参考になりました。ありがとうございます。
また、ご機会ございましたらよろしくお願い致します。

2014/05/19 21:00:33
id:sasada No.3

sasada回答回数1482ベストアンサー獲得回数1332014/05/15 13:44:13

ポイント80pt

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

id:nagato-yuki

ご回答ありがとうございます。
参考になる回答でした!
是非、また機会がございましたらご助言ください。

2014/05/19 20:57:08

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません