Foros del Web » Programando para Internet » Javascript »

Problema script data-filter

Estas en el tema de Problema script data-filter en el foro de Javascript en Foros del Web. Hola muy buenas, estoy haciendo mi nuevo web portfolio y tengo un problema. Espero que alguien me puede ayudar El index.html es una galería de ...
  #1 (permalink)  
Antiguo 23/10/2014, 09:30
 
Fecha de Ingreso: octubre-2014
Mensajes: 2
Antigüedad: 9 años, 5 meses
Puntos: 0
Pregunta Problema script data-filter

Hola muy buenas, estoy haciendo mi nuevo web portfolio y tengo un problema. Espero que alguien me puede ayudar

El index.html es una galería de todos mis proyectos, he puesto un menú que filtra los proyectos por categorías (motion graphics, interactivo, web, gráfico y fotografía). Cuando el usuario hace click en alguno de estos proyecto va a un nuevo .htlm para cada proyecto, en donde puede encontrar más información sobre el proyecto seleccionado. En este nuevo .htlm he mantenido el menú de filtrados por categorías, pero no funciona porque no están las listas de los proyectos.

Me gustaría saber como puedo hacer que al clickar en alguno de los apartados del menu, vuelva al index.htlm pero con los proyectos filtrados?

Por ejemplo, yo entro en la home, filtro por motion graphics, selecciono el primer proyecto de motion (redirige al nuevo htlm), veo la información, pero ahora quiero volver (hago click en el menu de filtración motion) a los proyectos de motion.

No se si me he explicado bien....

Alguien me podría ayudar?

Un fuerte abrazo!

Última edición por infoameh; 23/10/2014 a las 09:44 Razón: esta mal formulado
  #2 (permalink)  
Antiguo 23/10/2014, 12:39
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Problema script data-filter

prueba con includes. esto hará sencilla la inclusión del menú en cualquier documento
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 23/10/2014, 12:58
 
Fecha de Ingreso: octubre-2014
Mensajes: 2
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Problema script data-filter

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>

Etiquetas: javascript+html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:35.