「Gallery_javascript」の編集履歴（バックアップ）一覧はこちら

Gallery_javascript - (2026/05/11 (月) 21:30:12) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#javascript(){{
document.addEventListener('DOMContentLoaded', function() {

    $('.gallery').each(function() {
        const $gal = $(this);
        const $items = $gal.find('.gallery-item');

        if ($items.length <= 1) {
            $gal.css('margin', '0');
            return;
        }

        // 各アイテムごとにローカルで管理
        let current = 0;

        // 初期化
        $items.hide().eq(0).addClass('active').show();

        // ボタン生成（1回だけ）
        if (!$gal.prev('.gallery-btn').length) {
            const $btnArea = $('<div class="gallery-btn"></div>');
            $items.each((i) => {
                const $btn = $('<div>').text(i + 1);
                if (i === 0) $btn.addClass('checked');
                $btnArea.append($btn);
            });

            $gal.before($btnArea);
        }

        // 切り替え関数
        function switchTo(index) {
            if (current === index) return;

            $items.eq(current).removeClass('active').hide();
            $items.eq(index).addClass('active').show();

            $gal.prev('.gallery-btn').find('div')
                .removeClass('checked')
                .eq(index).addClass('checked');

            current = index;
        }

        // ボタンクリック
        $gal.prev('.gallery-btn').on('click', 'div', function() {
            switchTo($(this).index());
        });
    });
});
}}

#javascript(){{
document.addEventListener('DOMContentLoaded', function() {

    $('.gallery').each(function() {
        const $gal = $(this);
        const $items = $gal.find('.gallery-item');

        if ($items.length <= 1) {
            return;
        }

        // 各アイテムごとにローカルで管理
        let current = 0;

        // 初期化
        $items.hide().eq(0).addClass('active').show();

        // ボタン生成（1回だけ）
        if (!$gal.prev('.gallery-btn').length) {
            const $btnArea = $('<div class="gallery-btn"></div>');
            $items.each((i) => {
                const $btn = $('<div>').text(i + 1);
                if (i === 0) $btn.addClass('checked');
                $btnArea.append($btn);
            });

            $gal.before($btnArea);
        }

        // 切り替え関数
        function switchTo(index) {
            if (current === index) return;

            $items.eq(current).removeClass('active').hide();
            $items.eq(index).addClass('active').show();

            $gal.prev('.gallery-btn').find('div')
                .removeClass('checked')
                .eq(index).addClass('checked');

            current = index;
        }

        // ボタンクリック
        $gal.prev('.gallery-btn').on('click', 'div', function() {
            switchTo($(this).index());
        });
    });
});
}}