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

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

ただいまの
回答率

89.99%

スライド画像の高さ取得方法を教えて下さい。

解決済

回答 1

投稿

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

tram_oni

score 6

スライド画像の高さ取得方法を教えて下さい。

高さがバラバラの画像をスライドさせたいと考えています。
そこで、最初に表示される画像の次にスライドさせる画像の高さを取得する方法がわかりません...
子要素の.itemposition:absolute;なので、
親要素である.slideに高さを指定したいです。

html

<div class="slide cf">
 <div class="item">
   <img src="img/img_01.png">
 </div>
 <div class="item">
   <img src="img/img_02.png">
 </div>
</div>

css

.slide {
    width: 400px;
    height: auto;
    position: relative;
    margin: 0 auto;
}

.slide .item {
    width: 360px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #faa;
}

.slide .item.next {
    left: 50px;
    opacity: 0;
}

.slide .slide_navi {
    width: 100%;
    padding-top: 50%;
    position: absolute;
    top: 0;
}

.slide .slide_navi li {
    width:29px;
    height:55px;
    display: block;
    margin-top: -27.5px;
    line-height: 2em;
    position: absolute;
    top: 50%;
    z-index: 10;
}

.slide .slide_navi li.next {
    right: 0;
    background-image: url(/images/icon_next.png);
    background-repeat: no-repeat;
    background-position: center;
}

.slide .slide_navi li.prev {
    left: 0;
    background-image: url(/images/icon_prev.png);
    background-repeat: no-repeat;
    background-position: center;
}

javascript

スライドに使用しています。

/変数を定義
var item_parent = ".slide";
var item = item_parent + " > .item";
var item_n = -1;
var item_html = [];
var item_current = 0, item_next = 1, item_preview = 0, max_height = 0, item_html_num = 0;
//ページング関連の変数
var slide_paging = "slide_paging";
var siide_paging_click;

//次のアイテムを出力する
function next_show() {
    if(item_current == item_n){
        item_next = 0;
        item_current = 0;
    } else {
        item_next = item_current + 1;
        item_current ++;
    }
    paging_current();
    $(item_html[item_next]).appendTo(item_parent).addClass("next").css("opacity",0);
}    

//前のアイテムを出力する
function preview_show() {
    if(item_current === 0){
        item_preview = item_n;
        item_current = item_n;
    } else {
        item_preview = item_current - 1;
        item_current --;
    }
    paging_current();
    $(item_html[item_preview]).appendTo(item_parent).addClass("preview").css("opacity",0);
}

//アイテムをスライドさせる
var item_slide_nxt = function () {
    $(item).animate({
        "left":"-30px",
        "opacity":"0"
    },500,function(){
        $(this).remove();
    });
    next_show();
    $(item + ".next").animate({
        "left":"0",
        "opacity":"1"
    },500);
};

var item_slide_prv = function() {
    $(item).animate({
        "left":"30px",
        "opacity":"0"
    },500,function(){
        $(this).remove();
    });
    preview_show();
    $(item + ".preview").animate({
        "left":"0",
        "opacity":"1"
    },500);
};

//指定の番号のアイテムを出力する
function num_show(i) {
    item_current = i * 1;
    $(item).animate({
        "opacity":"0"
    },500,function(){
        $(this).remove();
    });
    $(item_html[item_current]).appendTo(item_parent).css("opacity",0);
    $(item).animate({
        "opacity":"1"
    });
    paging_current();
}

//ページングの現在位置を設定する
function paging_current () {
    $("." + slide_paging + " > li").removeClass("current");
    $("." + slide_paging + " > li." + slide_paging + "_" + item_current).addClass("current");
}

//初期化
$(document).ready(function(){
    //左右ボタンを追加
    $(item_parent).append("<ul class='slide_navi cf'><li class='next'></li><li class='prev'></li></ul>");
    //ページングを追加
    // $(item_parent).append("<ul class='" + slide_paging + "'></ul>");

    //html要素を取得・配列化
    $(item).each(function(i){
        item_html[i] =  $(this).html();
        item_html[i] = '<div class="item">' + item_html[i] + '</div>';

        //ページングの番号もこのときに生成

        $("." + slide_paging).append("<li class='" + slide_paging + "_" + i + "'>" + "</li>");
        item_n ++;

        //ついでに各要素の高さを取得し、最大値をmax_heightに代入
        this_height = $(this).innerHeight();
        if(max_height < this_height){
            max_height = this_height;
        }
    });

    //ページングの現在位置を設定する
    paging_current();


    //スライドの1つ目以外を消去
    $(item).not(":first").remove();

    //クリックイベント
    $(".slide_navi > .next").click(item_slide_nxt);
    $(".slide_navi > .prev").click(item_slide_prv);

    $("." + slide_paging + " li").click(function(){
        siide_paging_click = $(this).attr("class").match(/[0-9+]/);
        siide_paging_click = String(siide_paging_click[0]);
        if(siide_paging_click != item_current){
            num_show(siide_paging_click);
        }
    });
});

javascript(高さ取得)

高さを取得するためのjavascriptを書いたのですが、
これだとをクリックした時に表示されている
画像の高さを取得してしまいます。

$(window).load(function() {
    h = $('.slide .item').height();
    $(".slide").css("height", h + "px");
});

$(function(){
    function showHeight(elm, h) {
       $(".slide").css("height", h + "px");
    }
    $(".next").on('click', function () { 
       showHeight("item", $(".slide .item").height());
    });
    $(".prev").on('click', function () { 
       showHeight("item", $(".slide .item").height());
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/01/05 21:35

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

回答 1

checkベストアンサー

+2

これで親要素を子要素と同じ高さにできていると思います。

修正

可読性と保守性を向上してみました。
まとめられる処理はまとめるようにし、変数名や関数名をわかりやすくしましょう。
バグが発見しやすくなり、後々の修正が楽になりますよ。

$(function() {
    //定数を定義
    var animated_duration = 500; // milliseconds
    var sliding_gap = 30; // px
    var opacity_opaque = 1;
    var opacity_transparent = 0;
    var item_wrapper = ".slide";
    var all_items = item_wrapper + " > .item";
    //変数を定義
    var last_item_index = -1;
    var item_html = [];
    var current_item_index = 0, max_height = 0;
    //ページング関連の変数
    var slide_paging = "slide_paging";
    var slide_paging_click;

    function append_item_to_wrapper(item_index) {
        $(item_html[item_index]).appendTo(item_wrapper).css("opacity", opacity_transparent);
    }

    //指定の番号のアイテムを出力する
    function show_indexed_item(index) {
        current_item_index = index * 1;

        $(all_items).animate({
            "opacity" : opacity_transparent
        }, animated_duration, function() {
            $(this).remove();
        });

        paging_current();
        append_item_to_wrapper(current_item_index);

        $(all_items).animate({
            "opacity" : opacity_opaque
        }, animated_duration, function() {
            set_wrapper_as_high_as($(this));
        });
    }

    //次のアイテムをスライドさせる
    function slide_item(is_previous) {
        current_item_index += (is_previous ? -1 : 1);

        if (current_item_index < 0) {
            current_item_index = last_item_index;
        } else if (current_item_index > last_item_index) {
            current_item_index = 0;
        }

        $(all_items).animate({
            "left" : sliding_gap * (is_previous ? 1 : -1) + "px",
            "opacity" : opacity_transparent
        }, animated_duration, function() {
            $(this).remove();
        });

        paging_current();
        append_item_to_wrapper(current_item_index);

        $(all_items).animate({
            "left" : "0",
            "opacity" : opacity_opaque
        }, animated_duration, function() {
            set_wrapper_as_high_as($(this));
        });
    };

    //親要素を子要素と同じ高さにする
    function set_wrapper_as_high_as(child) {
        var height = child.outerHeight();
        child.parent().css('height', height);
    };

    //ページングの現在位置を設定する
    function paging_current() {
        $("." + slide_paging + " > li").removeClass("current");
        $("." + slide_paging + " > li." + slide_paging + "_" + current_item_index).addClass("current");
    }

    //初期化
    $(document).ready(function() {
        //左右ボタンをHTMLで直接記述
        //ページングを追加
        // $(item_wrapper).append("<ul class='" + slide_paging + "'></ul>");

        //html要素を取得・配列化
        $(all_items).each(function(index) {
            item_html[index] = '<div class="item">' + $(this).html() + '</div>';

            //ページングの番号もこのときに生成
            $("." + slide_paging).append("<li class='" + slide_paging + "_" + index + "'>" + "</li>");

            last_item_index++;

            //ついでに各要素の高さを取得し、最大値をmax_heightに代入
            max_height = Math.max(max_height, $(this).innerHeight());
        });

        //ページングの現在位置を設定する
        paging_current();
        set_wrapper_as_high_as($(all_items + ":first"));

        //スライドの1つ目以外を消去
        $(all_items).not(":first").remove();

        //クリックイベント
        $(".slide_navi > .next").click(function() {
            slide_item(false);
        });

        $(".slide_navi > .previous").click(function() {
            slide_item(true);
        });

        $("." + slide_paging + " li").click(function() {
            slide_paging_click = $(this).attr("class").match(/[0-9+]/);
            slide_paging_click = String(slide_paging_click[0]);
            if (slide_paging_click != current_item_index) {
                show_indexed_item(slide_paging_click);
            }
        });
    });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/05 19:42

    お返事遅れて申し訳ありません。
    ありがとうございました。
    とても助かりました!

    キャンセル

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

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