Home/ Questions/Q 8487927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T21:23:19+00:00

I have a demo here to illustrate my problem. It’s a scrolling image gallery.

  • 0

I have a demo here to illustrate my problem. It’s a scrolling image gallery. When an image is clicked it’s shown bigger – lightbox style.

The hover and click on the images is done with jQuery. I wanted the page to be responsive to work with phone screens. If the browser is resized to 400px approximately the layout changes to one column and scrolls vertically.

When the layout changes I wanted the jQuery to stop – I don’t want the hover and I don’t want the larger image when it’s clicked. How can I stop or change the jQuery when the media query kicks in?

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, there are many ways to approach this.

    In your case, you can possible check screen size on a click event and do appropreate operations.

    Something like this:

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

    Now when the light box handler is clicked do the winWidth size checking:

      $('.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);
          }
        }
    });

    If you’re doin this kinda screen checking quiet often i suggest you to have a look at enquire.js http://wickynilliams.github.com/enquire.js/

    Hope it helps 🙂

    • 0