1

私の問題を説明するためのデモがあります。スクロール画像ギャラリーです。画像をクリックすると、ライトボックス スタイルで大きく表示されます。

画像のホバーとクリックは jQuery で行われます。私は、電話の画面で動作するようにページをレスポンシブにしたいと考えていました。ブラウザーのサイズを約 400px に変更すると、レイアウトが 1 列に変更され、垂直方向にスクロールします。

レイアウトが変更されたら、jQuery を停止させたいと思っていました。ホバーはしたくありません。また、クリックしたときに大きな画像も表示したくありません。メディア クエリが開始されたときに jQuery を停止または変更するにはどうすればよいですか?

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

    <style type="text/css">
        #header{
        position:fixed;
        margin:20px 0 0 20px;
        }
        #header #logo{
        width:100px;
        height:80px;
        background:red;
        }
        ul#gallery {
        margin:120px 0 0 0;
        float:left;
        height:500px;
        margin-right:-20000px;
        }
        ul#gallery li{
        display:inline;
        }
        ul#gallery li img{
        float:left;
        height:100%;
        }
        #lightbox {
            position:fixed; 
            top:0; 
            left:0; 
            width:100%; 
            height:100%; 
            background:url(overlay.png) repeat; 
            text-align:center;
        }
        #lightbox p {
            text-align:right; 
            color:#fff; 
            margin-right:20px; 
            font-size:12px; 
        }
        #lightbox img {
            box-shadow:0 0 15px #111;
            -webkit-box-shadow:0 0 15px #111;
            -moz-box-shadow:0 0 15px #111;
            max-width:940px;
        }
        #content img{
          height:85%;
          max-width:100%;
        }

        /*--------------------------------------
          Media Query
        ---------------------------------------*/

        @media screen and (max-width: 400px){
            #header #logo{
            height:50px;
            }
            ul#gallery {
            margin:20px 0 0 0;
            width:400px;
            }
            ul#gallery li{
            display:block;
            }
            ul#gallery li img{
            opacity:0.5;
            height:auto;
            width:400px;
            }
            #header{
            position:static;
            margin:10px 0 0 20px;
            }
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo"></div><!-- #logo -->
    </div><!-- #header -->

    <ul id="gallery">
        <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
        <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
        <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
        <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
        <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
        <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
        <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
        <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
        <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
        <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
        <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
        <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
        <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
        <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
        <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
    </ul>

    <script>
    jQuery(document).ready(function($) {

      $('#gallery img').hover(
         function () {
           $(this).css('opacity',1)
         }, 
         function () {
           $(this).css('opacity',.4);
         }
       );

        $('.lightbox_trigger').click(function(e) {

            e.preventDefault();

            var image_href = $(this).attr("href");

            if ($('#lightbox').length > 0) { // #lightbox exists

                $('#content').html('<img src="' + image_href + '" />');

                //$('#lightbox').show();

                $('#lightbox').fadeIn('2000');
            }

            else { 

                var lightbox = 
                '<div id="lightbox">' +
                    '<p>Click to close</p>' +
                    '<div id="content">' + 
                        '<img src="' + image_href +'" />' +
                    '</div>' +  
                '</div>';

                $('body').append(lightbox);
            }

        });

        $('#lightbox').live('click', function() { 
            $('#lightbox').hide();
        });

    });
    </script>
</body>
</html>
4

1 に答える 1

1

さて、これにアプローチする方法はたくさんあります。

あなたの場合、クリックイベントで画面サイズを確認し、適切な操作を行うことができます。

このようなもの：

    var winWidth = $(window).width(); //cache window width
    $(window).resize(function() {
        winWidth = $(this).width(); //updating winWidth with current window width
    });

ライト ボックス ハンドラがクリックされると、winWidth サイズ チェックが実行されます。

  $('.lightbox_trigger').click(function(e) {

        e.preventDefault();

        var image_href = $(this).attr("href");

       if (winWidth > 400) {       //Checking if screen size is greater than 400
         if ($('#lightbox').length > 0) { // #lightbox exists

            $('#content').html('<img src="' + image_href + '" />');

            //$('#lightbox').show();

            $('#lightbox').fadeIn('2000');
          }

          else { 

            var lightbox = 
            '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +  
            '</div>';

            $('body').append(lightbox);
          }
        }
    });

このような画面チェックを頻繁に行っている場合は、enquire.js http://wickynilliams.github.com/enquire.js/をご覧になることをお勧めします。

それが役に立てば幸い ：）

于 2012-09-06T01:01:13.703 に答える