1

Jquery、fancybox、jScrollPane、および Jquery Ui タブを使用して、html ビデオ ギャラリーに取り組んでいます。ギャラリーは jquery ui を使用してタブに分割され、各タブは jScrollPane をホストします。ウィンドウのサイズが変更されたときにデータのサイズ変更を維持するために、コンテナーの css を変更して jscrollpanes を再初期化する関数が作成されました。jquery のコードは次のとおりです。

$('.thumbNails').jScrollPane({});
$('.Captions').jScrollPane();
$(window).resize(function(){
    $('.video__gallery_container').css('width',$(window).width()-40);
    $('.thumbNails').css('width','95%');
    $('.Captions').css('width','95%');
    $('.thumbNails').jScrollPane().reinitialize();
    $('.Captions').jScrollPane().reinitialize();
});

html: ビデオ ギャラリー 

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <link rel="stylesheet" type="text/css" href="includes/video_gallery_ie.css" />
    <![endif]-->
</head>
<body>

    <div id="tabs" class="video_gallery_container">
        <ul>
            <li><a href="#tabs-1" class="tab">All</a></li>
            <li><a href="#tabs-2" class="tab">Pilots</a></li>
            <li><a href="#tabs-3" class="tab">Pilots</a></li>
            <li><a href="#tabs-4" class="tab">145 Repair Station</a></li>
            <li><a href="#tabs-5" class="tab">Supply</a></li>
        </ul>
        <div id="tabs-1" class="thumbNails">
                         <a href="#" rel="tooltip" title="first tooltip" class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large"  videocaption="Caption for cycling_large goes here" ></a>
                         <a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
                         <a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
                         <a class="videoLink" videowidth="640" videoheight="402"  videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>

        <div id="tabs-2" class="thumbNails">
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-3" class="thumbNails">
                         <a class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large"  videocaption="Caption for cycling_large goes here" ></a>
                         <a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-4" class="thumbNails">
                         <a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
                         <a class="videoLink" videowidth="640" videoheight="402"  videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-5" class="thumbNails">
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>
    <div class="Captions"></div>
    </div>

    <!-- Hidden DIV container for video overlay code -->
    <div style="display: none;">
        <div id="videoPlayer"></div>
    </div>
<!-- Placed at the end of the document so the pages load faster-->
<script src="includes/bootstrap-tooltip.js"></script>
    <script src="includes/bootstrap-popover.js"></script>
    <script type="text/javascript" src="includes/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" src="includes/jquery.mousewheel.js"></script>
    <link type="text/css" href="includes/jquery-ui-1.8.20.custom/css/vader/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="includes/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

<script type="text/javascript">
$(function(){

    // Tabs
    $('#tabs').tabs();

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); },
        function() { $(this).removeClass('ui-state-hover'); 
    });
});
</script>

</body>
</html>

問題の中心にあるのは、ウィンドウのサイズが変更されるまでコードが完全に実行されることです。サイズ変更後、タブが選択されている場合、タブの内容は表示されませんが、その後ウィンドウのサイズが変更されると、内容が表示されます。また、別のタブが選択されている場合のサイズ変更後、サイズ変更が完了したときに読み込まれたタブを返すことができ、まだコンテンツがあります。$('.tab').live('click',function(){ $(this).trigger('resize'); }; などのコードを使用して、サイズ変更イベントを手動でトリガーしようとしました。

4

0 に答える 0