Hello,
Please cek this website: http://www.innovation.web.id/One/portfolio-filter.php
This is the code:
portfolio-filter.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/carouselstyles.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
<script src="bootstrap-3.3.5/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<?php include('nav.php'); ?>
<br><br><br>
<div style="text-align:center;"><h2><b>Our Portfolio</b></h2></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>
<div id="filters" class="button-group">
<button class="btn" data-filter="*">All</button>
<button class="btn" data-filter=".yellow">Yellow</button>
<button class="btn" data-filter=".red">Red</button>
<button class="btn" data-filter=".grey">Grey</button>
<button class="btn" data-filter=".classy">Classy</button>
</div>
<br><br>
<div id="box">
<div class="grey" data-category="transition" data-name="classy6">
<img class="name" src="Images/Portfolio/portfolio1.jpg" alt="portfolio1" width="270">
</div>
<div class="red" data-category="metalloid" data-name="classy5">
<img class="name" src="Images/Portfolio/portfolio2.jpg" alt="portfolio2" width="270">
</div>
<div class="yellow" data-category="metalloid2" data-name="classy4">
<img class="name" src="Images/Portfolio/portfolio3.jpg" alt="portfolio3" width="270">
</div>
<div class="classy" data-category="metalloid3" data-name="classy3">
<img class="name" src="Images/Portfolio/portfolio4.jpg" alt="portfolio4" width="270">
</div>
<div class="yellow" data-category="metalloid4" data-name="classy2">
<img class="name" src="Images/Portfolio/portfolio5.jpg" alt="portfolio5" width="270">
</div>
<div class="grey" data-category="metalloid5" data-name="classy1">
<img class="name" src="Images/Portfolio/portfolio6.jpg" alt="portfolio6" width="270">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
/*var $grid = $grid.isotope({*/
var $container = $('#box').isotope({
getSortData: {
name: '[data-name]',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// sort items on button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
</script>
<!-- filter -->
<script>
// init Isotope
var $container = $('#box').isotope({
// options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
</script>
<script>
$container.isotope({ filter: '.yellow' });
$container.isotope({ filter: '.red' });
$container.isotope({ filter: '.grey' });
$container.isotope({ filter: '.classy' });
$container.isotope({ filter: '*' });
</script>
<!-- end filter -->
<br><br><br><br>
<!--
<div id="greybar">
<div class="row">
<div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client1.jpg" alt="client1"></center></div></div>
<div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client2.jpg" alt="client2"></center></div></div>
<div class="col-sm-4 col-xs-12"><div id="clients"><center><img src="Images/Portfolio/client3.jpg" alt="client3"></center></div></div>
<div class="col-sm-12 col-xs-12">
<br><br><br><br><br><br>
<div style="text-align:center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</div>
</div>
</div>
</div>
-->
<div class="row">
<div class="slider-demo">
<a href="#" id="previous">«</a>
<div id="slider-inner">
<ul>
<li><div class="col-sm-4"><img src="img/1.jpg" alt=""></div></li>
<li><div class="col-sm-4"><img src="img/2.jpg" alt=""></div></li>
<li><div class="col-sm-4"><img src="img/3.jpg" alt=""></div></li>
</ul>
</div>
<a href="#" id="next">»</a>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/slider.jquery.js"></script> -->
<script type="text/javascript">
$(function() {
$('#slider-inner').slider('#previous', '#next');
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<?php include('footer.php'); ?>
</body>
</html>
Now, I have one problem that I do not know how to solve it. Now, the gallery shuffle works, but the clients slides does not. If I click the left or right arrow. It does not shift the picture to the left or right.
I have to make this script line: <!-- <script type="text/javascript" src="js/slider.jquery.js"></script> -->
works by taking off the <!-- --> in order to make the picture slides works, but on the contrary the picture gallery shuffle does not work.