Bonjour à tous,
Je souhaite utiliser le plugin jquery http://masonry.desandro.com/index.html, mais je dois mal m'y prendre
parce-que ça ne fonctionne pas...
voici mon code html :
et mon css:
J'ai un fichier javascript contenant la library jquery, un autre contenant le script Masonry et un dernier contenant l'appel :
Voyez-vous ce qui cloche ? Merci beaucoup.
Je souhaite utiliser le plugin jquery http://masonry.desandro.com/index.html, mais je dois mal m'y prendre
parce-que ça ne fonctionne pas...
voici mon code html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div class="block">1<img src="test-simple.jpg" width="200" height="300"></div>
<div class="block">2<img src="test-simple3.jpg" width="200" height="260"></div>
<div class="block">3<img src="test-simple1.jpg" width="200" height="400"></div>
<div class="block">4<img src="test-simple2.jpg" width="200" height="100"></div>
<div class="block">5<img src="test-simple3.jpg" width="200" height="260"></div>
</div>
<script type="text/javascript" src="javascript/library.js"></script>
<script type="text/javascript" src="javascript/masonry.js"></script><script type="text/javascript" src="javascript/call.plugin.js"></script>
</body>
</html>et mon css:
body, html
{
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
}
#container
{
width: 450px;
margin: auto;
}
.block
{
width: 200px;
margin: 10px;
float: left;
background-color: #999;
}
J'ai un fichier javascript contenant la library jquery, un autre contenant le script Masonry et un dernier contenant l'appel :
// JavaScript Document
$(document).ready(function(){
$('#container').masonry({
// options
itemSelector : '.block',
columnWidth : 200
});
});Voyez-vous ce qui cloche ? Merci beaucoup.