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

boxerという写真を拡大できるプラグを設定しました。
参考サイトでは、pcで見た時とスマホで見た時の表示のされ方が違っていました。
分岐させる書き方があるのでしょうか?
このままの記述で、レスポンシブ対応になっているのでしょうか?

<script type="text/javascript">
$(function(){
$(".boxer").boxer();
});
</script>
</head>

<body>
<div id="menu">
<ul id="menuimg" class="clearfix">

<li><a href="img/s_photo_01.png" class="boxer" title="Caption One" data-gallery="gallery"><img src="img/s_photo_01.png" width="185" height="150" alt="画像:風景" title="画像:風景"></a></li>
</ul>
</div>
</body>
</html>


●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

変な表示になっていますね。


1 ● 匿名回答1号

jQuery - Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。
モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイプ も設定で可能となっており、タッチフレンドリーなプラグインになっています。


匿名質問者さんのコメント
ご回答いただきましてありがとうございます。 あと1つ質問がありまして、スワイプの設定の仕方でわからない事があります。 $(".boxer").boxer({ mobile: true, // 全画面表示 top: 50 // 表示縦位置指定 }); この設定をしたところ、なぜか機能が動きませんでした。 これを解決したいのですがいまいちどう言った設定をするのかが理解できずにいます。 もしよろしければですが、参考になるサイトなどはありますでしょうか?

匿名回答1号さんのコメント
http://classic.formstone.it/components/boxer 余計なことをしなくてもスワイプできます。 DEMO が動くのであれば Boxer の使い方ではなく埋め込んだページの方に問題があるのでしょう。

匿名質問者さんのコメント
あのままの記述で大丈夫という事ですね^^; ありがとうございます。 一応、 $(function(){ $(".boxer").boxer(); }); こちらの記述では動きました。 もう一度、ページを見直してみます!
関連質問

●質問をもっと探す●



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