Question

我在我的响应式网络项目中使用了colorbox，我根据我的需要调整了一下它看起来很棒，但是当我在移动设备上打开它时它看起来比缩略图小，所以我需要在小的上禁用colorbox屏幕尺寸。我尝试过其他网站的一些解决方案，但我不能让它工作。有人可以帮忙吗？

这是我原来的剧本：

    <script src="js/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){   

        //Examples of how to assign the Colorbox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2'});
        $(".group3").colorbox({rel:'group3'});

        $.colorbox.settings.maxWidth  = '98%';
        $.colorbox.settings.maxHeight = '98%';
        $.colorbox.settings.speed = 200;

        $(window).resize(function(){
        // Resize Colorbox when resizing window or changing mobile device orientation
        resizeColorBox();
        window.addEventListener("orientationchange", resizeColorBox, false);
        });

        var resizeTimer;
        function resizeColorBox() {
        if (resizeTimer) {
        clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
        if (jQuery('#cboxOverlay').is(':visible')) {
        jQuery.colorbox.reload();
        }}, 300);}  
    });
</script>

这是html（我正在测试彩盒）：

    <div id="test" class="one-third column">
               <a class="group1" href="images/portfolio/aproval-tree.png" title="test">
               <img class="fade" src="images/portfolio/aproval-tree.png" style="background-image:url(images/portfolio/zoom_full.png);"></a>
               <a class="group1" href="images/portfolio/dyrup/dyrup_ad.png" title="test"><img style="display:none"></a>
               <a class="group1" href="images/portfolio/dyrup/dyrup_outdoor.png" title="test"><img style="display:none"></a>
        </div>

这是我尝试过的解决方案之一：

    <script src="js/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){

        if (window.matchMedia) {

        // Establishing media check (web solution)
        width481Check = window.matchMedia("(max-width: 481px)");
        if (width481Check.matches){
            $.colorbox.remove();
        }}  

        //Examples of how to assign the Colorbox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2'});
        $(".group3").colorbox({rel:'group3'});

        $.colorbox.settings.maxWidth  = '98%';
        $.colorbox.settings.maxHeight = '98%';
        $.colorbox.settings.speed = 200;

        $(window).resize(function(){
        // Resize Colorbox when resizing window or changing mobile device orientation
        resizeColorBox();
        window.addEventListener("orientationchange", resizeColorBox, false);
        });

        var resizeTimer;
        function resizeColorBox() {
        if (resizeTimer) {
        clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
        if (jQuery('#cboxOverlay').is(':visible')) {
        jQuery.colorbox.reload();
        }}, 300);}  
    });
</script>

这个使用matchMedia，但我不能使它工作。任何解决方案？

禁用移动设备上的彩盒

0 个答案: