質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.13%

画像をサムネイル化してくれるjQuery「MyThumbnail.js」をスマホサイトで利用したい

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,732

score 75

MyThumbnailをスマホサイトで利用したいです。
1200x600程度の画像を正方形に抜きその画像の説明を写真下に掲載した物をslickで画面に2枚表示させてカルーセルさせようとしました。

  <div class="new_c"> 
  <div class="new_c_div"><a href="#"><img src="images/p/01.jpg" ><br />ここに写真の名前1</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/02.jpg" ><br />ここに写真の名前2</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/03.jpg" ><br />ここに写真の名前3</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/04.jpg" ><br />ここに写真の名前4</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/05.jpg" ><br />ここに写真の名前5</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/06.jpg" ><br />ここに写真の名前6</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/07.jpg" ><br />ここに写真の名前7</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/08.jpg" ><br />ここに写真の名前8</a> </div>
  </div>
  <script>

$(document).ready(function(){
    $(".new_c_div img").MyThumbnail({
        thumbWidth:  150,
        thumbHeight: 150,
//      imageDivClass: :"new_c",    // 生成されるdivのclass
//      bShowPointerCursor: false,  // trueの場合、カーソル形状cursor:pointerへ設定
    });
});


$(function(){
$('.new_c').slick({
autoplay:true,
autoplaySpeed:5000,
slidesToShow:2,
pauseOnHover:true,
responsive:true
});
}); 
</script>


当然かもしれませんが、端末ごとで余白等がまちまちになってしまい、予想通りの表示にはなってくれませんでした。
(chromeデベロッパツールで確認。galaxyS5で綺麗に見えると、iPhone5で右余白が無くなったり…)
MyThumbnailの「thumbWidth」をパーセントで出来ればとも考えたのですが、そうすると縦サイズが取得できなくなりますよね…

どうにかして、横方向をパーセントで表示・縦はそれに合わせて正方形で切り抜きと出来ないでしょうか?
MyThumbnailにこだわりはないので、他のプラグインで出来るようだったら乗り換えします。
また、slickのカルーセル表示にもこだわりはありません。厳しいようだったら<li>を使ったりして2枚×○枚の表示でもかまいません。

良い方法があれば教えてください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

わたしは、そういった場合cssで解決したことはあります。

■中央に合わせてトリミング

<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>
/* trimming */
.trim {
  width: 150px;  /* トリミングしたい幅 */
  height: 150px;  /* トリミングしたい高さ */
  overflow: hidden;
  position: relative;
}
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* layout */
div {
  float: left;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

参考:http://www.tam-tam.co.jp/tipsnote/html_css/post10099.html

jqueryにこだわりがなければ、こちらを試しては如何でしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 13:25

    返答ありがとうございます。

    jQueryにこだわりはありません。
    しかし、保存する画像のサイズ・縦横比がばらばらなのが問題になってしまう気がします…
    (縦画像やデジカメ・スマホで撮影した物があり、縦横比が一定ではないです)
    参考サイトのように、どうしても綺麗に表示できないのではないでしょうか?

    .trim を .new_c_div に置き換えて、とりあえず設置してみました。
    横幅はいい感じにリサイズしているのですが、縦横比が元画像のままで真四角にトリミングしてくれませんでした。
    参考サイトの/* layout */のdivの指定もこのままだと全部のdivにかかってしまいますよね…
    「new_c」や「new_c_div」で試してみたのですが、変化無しです。

    どのようにしたら良いでしょうか?

    キャンセル

  • 2017/02/07 16:09

    なるほど拡大もしなければいけないということですね・・・

    親要素に指定したサイズに上下左右を拡大縮小・トリミングしていいかんじに収めてくれるプラグインがありましたので、こちらで試してはどうでしょう?
    このプラグインも有名ですね。
    http://magpepen.hatenablog.com/entry/2013/12/12/181609

    キャンセル

0

画面幅取得して2で割って念のため小数点を切り捨て、とか。

var img_width = Math.floor( window.innerWidth / 2 );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 11:41

    返答ありがとうございます!

    これはどこに記入したら良いのでしょうか?(素人ですみません…)
    また、幅はこれで取得できるとして高さはどのようにしたらいいのでしょうか?
    (ここで計算した物を高さにもセット?その場合どのように記述したら良いのでしょう…)

    キャンセル

  • 2017/02/06 11:50

    > これはどこに記入したら
    使う場所の直前でよいでしょう。

    > 高さはどのように
    「横に二個正方形の画像を並べたい」のでは? それであれば thumbWidth と thumbHeight は同じ値でしょう。

    キャンセル

  • 2017/02/06 12:03

    すみません。
    素人すぎて全然理解できないです。

    >使う場所の直前でよいでしょう。
    ------
    <script>
    var img_width = Math.floor( window.innerWidth / 2 );
    $(document).ready(function(){
    $(".new_c_div img").MyThumbnail({

    ----
    と言う事で良いのでしょうか?

    >「横に二個正方形の画像を並べたい」のでは? それであれば thumbWidth と thumbHeight は同じ値でしょう。
    これはどのように記載したらいいのでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る