Bootstrap 3 and Isotope jQuery Image Centering

StackOverflow https://stackoverflow.com/questions/21489123

Pergunta

I know this is a frequently asked question but I cant seem to find a suitable answer for my particular case.

I want the following code to show 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 -->

This is my 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 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;
}

Thank you to anyone who tries to help :)

P.S Adding JSFiddle: http://jsfiddle.net/GwBa8/123/ The images are supposed to be 450x260...

Foi útil?

Solução

Here I did some tweaks that you may like. Unless you also need single image to be centered too.

.panel-body {
    width: 920px;
    margin:auto;
}

http://jsfiddle.net/ergec/GwBa8/125/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top