I've been looking everywhere for a solution to my specific problem, but I can't seem to find one. Can someone help me with this?
My goal is to modify the code so that it displays 2 centered images per row.
<!doctype html>
<html>
<head>
<title>James Woods</title>
<!-- Sets Viewport for Responsive Design -->
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<!-- Core Bootstrap CSS -->
<link href = "../css/bootstrap-custom.css" rel ="stylesheet">
<!-- Custom Site CSS -->
<link href = "../css/style.css" rel ="stylesheet">
<!-- Custom Creations CSS -->
<link href = "create-style.css" rel ="stylesheet">
</head>
<div class="container">
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 style = "text-align: center;">Creations</h3>
<div class="creations-filter">
<a href="#all" data-filter="*" class="current">All Creations</a>
<a href="#scratch" data-filter=".scratch">Scratch Games</a>
<a href="#games" data-filter=".games">HTML5/Javacript Games</a>
<a href="#apps" data-filter=".apps">Web Applications</a>
<a href="#other" data-filter=".other">Other</a>
</div>
</div>
<div class = "panel-body center">
<div class="creations-container">
<div class="scratch">
<img src="../img/440x250.jpg" alt="image">
</div>
<div class="games">
<img src="../img/440x250.jpg" alt="image">
</div>
<div class="other">
<img src="../img/440x250.jpg" alt="image">
</div>
<div class="games">
<img src="../img/440x250.jpg" alt="image">
</div>
<div class="games">
<img src="../img/440x250.jpg" alt="image">
</div>
<div class="apps">
<img src="../img/440x250.jpg" alt="image">
</div>
</div>
</div>
</div> <!-- END container div -->
I have included jQuery at the end of the page
<!-- Isotope JQuery Plugin -->
<script src="../js/isotope.js" type="text/javascript"></script>
<script src = "../js/bootstrap.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $container = $('.creations-container');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.creations-filter a').click(function(){
$('.creations-filter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
And here is my custom CSS
.creations-filter a {
margin-right: 10px;
color:#666;
text-decoration:none;
}
.creations-filter a.current {
font-weight:bold;
}
.creations-filter {
text-align: center;
}
.creations-container {
}
img {
margin:5px;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
Your assistance is greatly appreciated :)
P.S Here is the JSFiddle link: http://jsfiddle.net/GwBa8/123/ The images are supposed to be 450x260...