[php]
<script type="text/javascript" src="
www.site.org/freewall-master/example/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="www.site.org/freewall-master/freewall.js"></script>
[/php]
Donc en se débrouillant bien, vous n'avez besoin que de deux entrées à charger pour cette page spécifique.
[php]
<style type="text/css">
body {
background: rgba(231, 231, 231, 0.43);
}
.free-wall {
margin: 15px;
}
.brick {
width: 221.2px;
}
.info {
padding: 15px;
color: #333;
}
.brick img {
margin: 0px;
padding: 0px;
display: block;
}
</style>
[/php]
[php]
<div id="freewall" class="free-wall">
<div class="brick">
<img src="/path/to/image.jpg" width="100%">
<div class="info">
<h3>Titre1</h3>
<h5>Sous titre 1</h5>
</div>
</div>
<div class="brick">
<img src="/path/to/image.jpg" width="100%">
<div class="info">
<h3>Titre 2</h3>
<h5>Sous titre 2</h5>
</div>
</div>
<div class="brick">
<img src="/path/to/image.jpg" width="100%">
<div class="info">
<h3>Titre 3</h3>
<h5>Sous titre 3</h5>
</div>
</div>
</div>
[/php]
Enfin juste avant le div de fermeture ou votre footer, placez ce script:
[php]
<script type="text/javascript">
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 200,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
wall.container.find('.brick img').load(function() {
wall.fitWidth();
});
</script>
[/php]
Terminé. Reste à rafraichir la page.