Jump to content

isotope jquery images are not responsive


KGH
 Share

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...
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...