I wanna create a website using isotope in order to filter image by genre, maybe ( 5 or more) here is the code, I tried many others possibilities but I can not find what is wrong as I am newbee in programming:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="charset=utf-8">
<title>aaa</title>
<script src="../isotope.js"></script>
<!-- or -->
<script src="http://ift.tt/1CKYWQ8"></script>
<script src="http://ift.tt/eSWUvL"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head><body>
<header id="top_header">
<img src="images/aaa.png">
</head>
<nav id="top_menu">
<ul>
<li>Acceuil</li>
<li>A propos</li>
<li>Proposer un article</li>
<li>Soutenir notre site</li>
</ul>
</nav>
<div id="filters">
<div class="ui-group">
<h3>Genre</h3>
<div class="button-group js-radio-button-group" data-filter-group="genre">
<button class="button is-checked" data-filter="">Tout</button>
<button class="button" data-filter=".photo">photo</button>
<button class="button" data-filter=".etudedecas">Etude de cas</button>
<button class="button" data-filter=".insolite">Insolite</button>
<button class="button" data-filter=".video">Video</button>
</div>
</div>
</div>
<div class="isotope">
<div class="genre photo">
<img src="images/aaa/1.JPG" width="300" height="300" alt="image">
<img src="images/aaa/2.JPG" width="300" height="300" alt="image">
<img src="images/aaa/3.JPG" width="300" height="300" alt="image">
<img src="images/aaa/4.JPG" width="300" height="300" alt="image">
<img src="images/aaa/5.JPG" width="300" height="300" alt="image">
<div class="genre video">
<img src="images/.../1.JPG" width="300" height="300" alt="image">
<img src="images/.../2.JPG" width="300" height="300" alt="image">
<img src="images/.../3.JPG" width="300" height="300" alt="image">
<img src="images/.../4.JPG" width="300" height="300" alt="image">
<img src="images/.../5.JPG" width="300" height="300" alt="image">
</div>
<div class="genre etude de cas">
</div>
<div class="genre insolite">
</div>
</div>
<script type="text/javascript">
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.genre'
});
$container.imagesLoaded( function(){
$container.isotope({
// options...
});
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
</script>
</body></html>
Aucun commentaire:
Enregistrer un commentaire