Jump to content
Sign in to follow this  
KGH

isotope jquery images are not responsive

Recommended Posts

<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.isotope.js"></script>
</head>
<div class="container">
<div class="categories">
<ul class="cat">
<li class="pull-left"><h4>PHOTOS</h4></li>
<li class="pull-right">
<ol class="type">
<li><a href="#" data-filter="*" class="active">ALL</a></li>
<li><a href="#" data-filter=".childhood">CHILDHOOD</a></li>
<li><a href="#" data-filter=".concerts">CONCERTS</a></li>
</ol>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="lightbox" class="row">
<div class="col-md-4 childhood">
<div class="portfolio-item">
<img src="img/photos/childhood/img5.jpg" class="img-responsive" alt="Childhood Images ">
</div>
</div>
<div class="col-md-4 childhood">
<div class="portfolio-item">
<img src="img/photos/childhood/img2.jpg" class="img-responsive" alt="Childhood Images "/>
</div>
</div>
<div class="col-md-4 childhood">
<div class="portfolio-item">
<img src="img/photos/childhood/img3.jpg" class="img-responsive" alt="Childhood Images />
</div>
<div class="col-md-4 concerts">
<div class="portfolio-item">
<img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images">
</div>
</div>
<div class="col-md-4 concerts">
<div class="portfolio-item">
<img src="img/photos/concerts/img1.jpg" class="img-responsive" alt="Concert Images">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
var $container = $('#lightbox');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.cat a').click(function() {
$('.cat .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
</body>
</html>
I am using bootstrap and for the image gallery filtering i'm using jquery.isotope.js.This perfectly works in chrome and images are rersponsive.But in IE and firefox,images will not be responsive when window is smaller than 760px.Tried a lot.If I make it responsive ie.smartresize fn,then flitering does not work.Also tried new version of isotope.Then filtering doesn't work,images stay responsive.
How to resolve the problem?Pl someone help me...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...