Un portfolio c'est beau mais faut qui fonction ^^

Par Kaginics, il y a 14 ans

Javascript

bonjour/bonsoir,

Cela fait une heure que j'essai en vain de faire fonctionner masonry je reprend l'exemple du tuto de Grafikart mais cela me donne des choses étrange que je modifie la taille de l'image
or si je ne modifie pas la taille cela donne :

voici un extrait de mon code source :

<?php $cats = array('web','dev','3D','autre'); ?>
<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Titre de la page</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/masonry.js"></script>
        <script type="text/javascript">
        jQuery(function($){
                var portfolio = $('#portfolio');
                portfolio.masonry({
                isAnimated: true,
                itemSelector:'.bloc'
            });
        })
        </script>
        <link rel="stylesheet" href="theme/css/style.css">
        <style type="text/css">
        .bloc{
            float:left; 
            margin: 5px;
        }
        </style>
    </head>

        ...]
        <div class="wrapper">
            <br />
            <div class="filter">
                <h1 style="">Filtrer par - <em><?php foreach($cats as $v): ?><a href="#<?php echo $v; ?>"> <?php echo $v; ?></a><?php endforeach; ?> <a href="" class="reload">reload</a></em></h1>
                <div class="clear"></div>
            </div>
            <br />
            <div class="clear"></div>
            <div id="portfolio">
                <?php for ($i=0; $i < 30; $i++) : ?>
                    <div class="bloc <?php echo $cats$i%4]; ?>" id="projet<?php echo $i; ?>">
                        <a class="image" href="#projet<?php echo $i; ?>">
                            <img src="http://placehold.it/150x100" alt="" width="150" height="100">
                        </a>
                    </div>          
                <?php endfor; ?>
                <div class="clear"></div>
            </div>
        </div>

5 réponses

pierrot, il y a 14 ans

Salut!

Je sais pas trop si j'ai bien compris ce que tu voulais faire. Mais si tu souhaite avoir des images de 200x150, il faut modifier le style de tes blocs en rajoutant la hauteur à 150px.

<style type="text/css">
        .bloc{
            float:left; 
            margin: 5px;
            height: 150px;
        }
        </style>

Bien modifier le style de tes images: 

<div class="bloc <?php echo $cats$i%4]; ?>" id="projet<?php echo $i; ?>">
                        <a class="image" href="#projet<?php echo $i; ?>">
                            <img src="http://placehold.it/200x150" alt="" width="200" height="150">
                        </a>
                    </div>

Et enfin, modifier ton script: 

<script type="text/javascript">
        jQuery(function($){
                var portfolio = $('#portfolio');
                portfolio.masonry({
                isAnimated: true,
                itemSelector:'.bloc'
                isFitWidth:true,
        columnWidth:210
            });
        })
        </script>

Voila ;)

Kaginics, il y a 14 ans

J'ai essayé de faire ce que vous m'avais dis mais cela ne marche pas --' ça me fait une marge énorme entre les colonnes

pierrot, il y a 14 ans

D'après ta deuxième capture d'écran, j'en déduit que ta div portfolio à une largeur de 660px (en supposant que chaque bloc a un margin de 5px)

Si tu veux utiliser des images de 200x150 au lieu de 150x100, change le width de ta div portofolio à 640px.

Dit nous si cela à résolu ton problème ;)

Kaginics, il y a 14 ans

j'ai résolut mon problème je n'avais pas que masonry dans le masonry.js

Kaginics, il y a 14 ans

Elle a un width de 960px et j'ai résolu mon probléme ^^