jquery bxslider での高さの操作

Question

###前提・実現したいこと
いつもお世話になっております。

現在、jquery bxsliderでスマホのスライドショーを作っています。
様々なスライドショーのプラグインがありますが、なかなかキャプションをつけられるものがなく、jquery bxsliderで半分、力づくの感じでキャプションを入れるところまでは成功しました。

横長の写真の場合には、キャプション部分を写真より下部に、
縦長の場合には、キャプションを写真にのせる想定です。

###発生している問題・エラーメッセージ

bxsliderは開発ツールを見ていてわかったのですが、
デフォルトだと.bx-viewportがoverflow:hiddenになっていて、それだと横長の写真の時に、キャプションが表示されません。

そのため、下記で再現できないかと思っているのですが、うまくいきません。

・heightよりwidthが大きい時には、.bx-viewportをoverflow:visibleに変更
・スライダーをwrapしている#wrapper_galleryに画像＋キャプションの高さを代入する
(overflow:visibleにしてしまうと#wrapper_gallery自体が縦長写真の時の高さになってしまうため、横長写真の時にキャプションの下に余計な余白ができてしまう)

●該当の部分のコード

$(window).load(function(){
    var w=$(".bxslider li img").width();
    var h=$(".bxslider li img").height();
    var c_h=$(".cpt_b").height();
    total = parseInt(h) + parseInt(c_h);
    if (w>h) {
      $(".bx-viewport").css("overflow","visible");
      $("#wrapper_gallery").height(total);
      
    }
  });

###ソースコード 全体

codepen
上記にもソースを載せてみていますが、下記にも記載いたします。
※ちょっと右端に次の画像が見えていたりしますが、ここは無視してくださいませ。

●js

$(document).ready(function(){
  $('.bxslider').bxSlider({
    responsive: true,
  adaptiveHeight: 'true',
  pager: false
});
});
    $(function(){
        $('.bx-wrapper .bx-viewport').hover(function() {
        $('.bx-wrapper .bx-controls-direction a').css('display', 'block');
      }, function() {
        $('.bx-wrapper .bx-controls-direction a').css('display', 'none');
      });
     
        $('.bx-wrapper .bx-controls-direction a').hover(function() {
        $('.bx-wrapper .bx-controls-direction a').css('display', 'block');
      }, function() {
      });
     
    });
    $(window).load(function(){
    var w=$(".bxslider li img").width();
    var h=$(".bxslider li img").height();
    var c_h=$(".cpt_b").height();
    total = parseInt(h) + parseInt(c_h);
    if (w>h) {
      $(".bx-viewport").css("overflow","visible");
      $("#wrapper_gallery").height(total);
      
    }
  });

●html
<div id="wrapper_gallery" class="clearfix">
<ul class="bxslider">
  <li>
    <img src="https://www.pakutaso.com/shared/img/thumb/shdrht_TP_V.jpg" />
      <div class="cpt_b">
        <p>文章文章文章文章文章文章文章文章文章</p>
        <div class="border"></div>
        <span>カテゴリ</span>
        <p>SHARE THIS！</p>
    </div>
</li>
    <li>
    <img src="https://www.pakutaso.com/shared/img/thumb/HIRA842_nekodame_TP_V.jpg" />
            <div class="cpt_b">
        <p>文章文章文章文章文章文章文章文章文章</p>
        <div class="border"></div>
        <span>カテゴリ</span>
        <p>SHARE THIS！</p>
    </div>
</li>
<li>
    <img src="https://www.pakutaso.com/assets_c/2016/05/AMENEKO844-thumb-autox1600-22185.jpg" />
      <div class="cpt_b_tate">
        <p>文章文章文章文章文章文章文章文章文章</p>
        <div class="border"></div>
        <span>カテゴリ</span>
        <p>SHARE THIS！</p>
    </div><!-- /.cpt -->
</li>
    <li>
    <img src="https://www.pakutaso.com/assets_c/2016/05/P1070936-thumb-autox1600-22115.jpg" />
      <div class="cpt_b_tate">
        <p>文章文章文章文章文章文章文章文章文章</p>
        <div class="border"></div>
        <span>カテゴリ</span>
        <p>SHARE THIS！</p>
    </div><!-- /.cpt -->
</li>
</ul>
</div><!-- /#wrapper_gallery -->

●css
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }


div#wrapper_gallery {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    display: block;
    position: relative;
}

.cpt_b{
    position: absolute;
    background: rgba(255,255,255,.6);
    width: 240px;
    padding: 20px;
    text-align: center;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.cpt_b_tate{
    position: absolute;
    bottom: 20px;
    background: rgba(255,255,255,.6);
    width: 240px;
    padding: 20px;
    text-align: center;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.cpt .border,.cpt_b .border,.cpt_b_tate .border{
    width: 70px;
    border-bottom: 1px solid #3f3f3f;
    margin: 20px auto;
}

jqueryは勉強を始めたばかりで、こう書いたら実現できるのではないか？と
お恥ずかしながら、手探りの状態で作っています。
いろいろと自分で試してみたのですが、うまくいかずです。

有識者の皆様、何卒ご教授のほど、よろしくお願いいたします。

Answer 1

こんにちは！
ご提示いただいたエディタに慣れていないので、気になった箇所だけ修正してみましたが、下記を書き換えてみて、動きとしてあっているかご確認いただけますか？？

    $(window).load(function(){
      var slide = $(".bxslider li")
      $.each(slide,function(i){
        var w= $(slide[i]).children("img").width();
        var h= $(slide[i]).children("img").height();
        var c_h = $(".cpt_b").height();
        if (w>h) {
          $(slide[i]).css("height",h + c_h);
        }   
      });
  });

Comments

[hananoko_runrun]

>MaShiRo_H様

先日に引き続き、ご回答いただきありがとうございます！
私も自分で解決できるようになるよう少しづつ勉強始めています(〃▽〃)

いただいたコード試してみました。
きちんと横長の時の高さは取得して、#wrapper_galleryに入ってるのですが、
一番初めに読み込んだ画像の高さを保持してしまうようなのです、、、

```
$(function(){
var slide = $(".bxslider li")
$.each(slide,function(i){
var w= $(slide[i]).children("img").width();
var h= $(slide[i]).children("img").height();
var c_h = $(".cpt_b").height();
total = parseInt(h) + parseInt(c_h);
$(".bx-viewport").css("overflow","visible");
$("#wrapper_gallery").height(total);
});
});
```

こんな感じで、縦長、横長関係なしでも試してみても高さは切り替わりませんでした。

何か方法がありますでしょうか？

[hananoko_runrun]

度々のコメント失礼いたします！
コードを頂いてから自分でもいろいろと調べて試してみました。

頂いたコードの頭を$(document).readyにして、.cpt_bの高さの取得を
var c_h = $(".cpt_b").outerHeight();
に変更することで、無事縦長の時も横長の時も意図した場所にキャプションを
表示させることができました！

$(document).ready(function(){
var slide = $(".bxslider li")
$.each(slide,function(i){
var w= $(slide[i]).children("img").width();
var h= $(slide[i]).children("img").height();
var c_h = $(".cpt_b").outerHeight();
if (w>h) {
$(slide[i]).css("height",h + c_h);
}
});
});

先日に引き続き度々のお力添え本当にありがとうございました！

[MaShiRo_H]

#wrapper_gallery自体は要素は全体を囲っている要素で一つしかありませんので、
一度の読み込みではスライドの度に高さは変わってくれません。

これを都度変更するとなると、
クリックでliが切り替わる→表示されるliの中のimageのheightを取得→#wrapper_galleryのheightに反映...
というクリックイベントを用意しなければならず、なかなか面倒くさい作業になるような気がします。

それならと思い各イメージの親要素である<li></li>の大きさを先ほどは変更していましたが、#wrapper_gallery自体の高さを変えなければならない理由はありますか？？

[MaShiRo_H]

お、良かったです！！

[hananoko_runrun]

>MaShiRo_H様

コメントありがとうございます！
ブラウザのスマホモードと、iphone実機できちんと表示出来たので、喜んだつかの間、androidで見てみたら、結局横長の高さがつぶれて、キャプションは表示されず汗

いろいろと自分で調べてみて、またこちらでお力をお貸しいただくかもしれません汗

いつもありがとうございます。

[hananoko_runrun]

>MaShiRo_H様

こちらに書き込むのが遅くなってしまい申し訳ありません。
MaShiRo_H様に回答いただきました様に、
コードの頭は「$(window).load(function()」で正しかったです汗
なので、MaShiRo_H様の回答で間違いございませんでした。

勉強していて、気づきました。高さを計測するのですから、$(window).loadですよね。
私が頂いた時に、頭の部分を書き換えていなかっただけでした。

MaShiRo_H様のためにも、そして私の様なjquery初心者が参考にすることもあるかもと思い、訂正させていただきました。androidの高さがつぶれてしまっていたのも、$(window).loadにしていなかったからでした。

私の勘違い、大変失礼いたしました！

[MaShiRo_H]

ご丁寧にありがとうございます！
意外と読み込み部分で足をすくわれることって多いですよね。。。
なにはともあれ、無事動いてよかったです！