Hola Isabel. Gracias por contestar, perdona pero soy muy nuevo en esto.
Tu crees que con includes puede ir?
Lo digo porque, el "menu" va a buscar la info de <div id="portfoliolist">. Entonces si en el nuevo htlm pongo el menu sin los <div id="portfoliolist"> no se verá el contenido no?
No se si me explico, te pego el código.
Muchas gracias!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel=stylesheet href="css/estilo.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layout.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>a
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 300, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 400, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -54}, 300, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</head>
<body>
<div class="container">
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="motion interactivo grafico web fotografia">Todo</span></li>
<li><span class="filter" data-filter="motion">Motion Graphics</span></li>
<li><span class="filter" data-filter="interactivo">Interactivo</span></li>
<li><span class="filter" data-filter="grafico">Gráfico</span></li>
<li><span class="filter" data-filter="web">Web</span></li>
<li><span class="filter" data-filter="fotografia">Fotografía</span></li>
</ul>
<!-- MOTION 1 -->
<div id="portfoliolist">
<a href="motion1.html">
<div class="portfolio motion" data-cat="motion">
<div class="portfolio-wrapper">
<img src="img/portfolios/motion/1.jpg" alt="" />
<div class="label">
<div class="label-text">
FILMIN: CINE Y GASTRONOMÍA
<span class="text-category">Motion Graphics</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
</a>
</div>