Media query, stop jQuery with window resize?
Hi all
I have a demo here to illustrate my problem.
http://www.ttmt.org.uk/forum/gallery1/
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 approx 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>