Perdonar si uso algún concepto erróneamente o si digo alguna barbaridad.
El primer jQuery es para el menú que aparece en la versión móvil o cuando reduces la ventana del explorador. Este me funciona perfectamente. Las etiquetas javascript tienen que estar dentro del body porque sino no funciona. ([URL="http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/"]Menu Multinivel[/URL])
El segundo es para hacer una galería tipo "Pinterest" usando "[URL="http://masonry.desandro.com/"]Masonry[/URL]". El caso es que este mas o menos funciona y muestra la galería como debe de ser, pero al reducir la ventana del navegador no se produce el movimiento de las fotos. Para que pase de 3 a 2 columnas hay que actualizar la página.
Podéis ver el funcionamiento con los dos scripts aquí [URL="http://www.cominges.es/1.php"]http://www.cominges.es/1.php[/URL]
Aquí está funcionando solo la galería [URL="http://www.cominges.es/2.php"]http://www.cominges.es/2.php[/URL]
os dejo el código por si es de ayuda:
Código:
Para acabar, tampoco consigo que cuando se reduzca de 3 columnas a dos, estas dos se queden centradas<!DOCTYPE html>
<head>
<meta name="viewport" content="width=285px, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jorge Cominges - Estudio de ArquitecturA : Madrid</title>
<meta name="Keywords" content="" />
<meta name="Description" content="Jorge Cominges - Estudio de ArquitecturA : Madrid" />
<link rel="stylesheet" type="text/css" href="css/estilos.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/menucomponent.css" />
<link rel="stylesheet" type="text/css" href="css/menudefault.css" />
<!-- Galería -->
<script src="js/jquery.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var $jQ = jQuery.noConflict();
$jQ(function(){
$jQ('#container').masonry({
// options
itemSelector : '.item'
});
});
</script>
</head>
<body>
<center>
<div id="web">
<div id="web1">
<div id="principal">
<header>
<a href="http://www.cominges.es"><img id="imagentitulo" src="imagenes/titulo.jpg" style="border:0px;"/><img id="imagentitulo1" src="imagenes/titulo1.jpg" style="border:0px;"/></a>
<br>
<br>
<nav id="index">
<ul>
<li id="menuprincipal"><a href="asesoria/"><img id="menu" src="imagenes/menu_asesoria.jpg" onMouseOver="this.src='imagenes/menu_asesoria1.jpg';" onMouseOut="this.src='imagenes/menu_asesoria.jpg';" style="max-width:92px"></a></li>
<li id="menuprincipal"><a href="blog.php"><img id="menu" src="imagenes/menu_blog.jpg" onMouseOver="this.src='imagenes/menu_blog1.jpg';" onMouseOut="this.src='imagenes/menu_blog.jpg';" style="max-width:58px"></a></li>
<li id="menuprincipal"><a href="inspiracion.php"><img id="menu" src="imagenes/menu_inspiracion.jpg" onMouseOver="this.src='imagenes/menu_inspiracion1.jpg';" onMouseOut="this.src='imagenes/menu_inspiracion.jpg';" style="max-width:116px"></a></li>
<li id="menuprincipal"><a href="contacto.php"><img id="menu" src="imagenes/menu_contacto.jpg" onMouseOver="this.src='imagenes/menu_contacto1.jpg';" onMouseOut="this.src='imagenes/menu_contacto.jpg';" style="max-width:100px"></a></li>
</ul>
</nav>
<nav id="indexmini" >
<div align="left" style="padding-left:7%; padding-right:6.7%; width:100%;">
<div id="dl-menu" class="dl-menuwrapper" style=" z-index: 2;">
<button class="dl-trigger">Open Menu</button> <img id="clicktoopen" src="imagenes/clicktoopen1.jpg">
<ul class="dl-menu">
<li>
<a href="#" id="menuenlacemini">Asesoría</a>
</li>
<li>
<a href="#" id="menuenlacemini">Blog</a>
<ul class="dl-submenu">
<li>
<a href="blog.php" id="menuenlacemini">Principal</a>
</li>
<li>
<a href="#" id="menuenlacemini">Arquitectura</a>
</li>
<li>
<a href="#" id="menuenlacemini">Interiorismo</a>
</li>
<li>
<a href="#" id="menuenlacemini">Diseño industrial</a>
</li>
<li>
<a href="#" id="menuenlacemini">Materiales</a>
</li>
<li>
<a href="#" id="menuenlacemini">Detalles</a>
</li>
</ul>
</li>
<li>
<a href="inspiracion.php" id="menuenlacemini">Inspiración</a>
</li>
<li>
<a href="contacto.php" id="menuenlacemini">Conctacto</a>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script>
$(function() {
$( '#dl-menu' ).dlmenu();
});
</script>
</div>
<br>
</nav>
<br>
<br>
</header>
<section>
<div id="container" class="masonry">
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">
<div>
<img src="imagenes/coelux-2.jpg">
</div>
<div style="padding-top:10px; padding-left:10px; padding-right:10px;" align="left">
<h2><font id="titulo">Titulo provisional en grande, muy grande</font></h2>
</div>
<div style="padding:5px" align="center">
<hr width="97%" size="1px" color="#D3D3D3">
</div>
<div style="padding-left:10px; padding-right:10px; padding-bottom:10px">
<p id="articuloshort">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e</p>
</div>
<div align="center">
<font id="fecha">30/05/2015 10 </font><img src="imagenes/mensajes2.jpg" style="max-width:12px;">
</div>
</div>
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 242px;">
<div class="imagen">
<div class="foto1">
<img src="imagenes/coelux2-1024x1024.jpg">
</div>
</div>
<div class="descripcion">
#2. Lorem ipsum dolor sit amet, con
</div>
<div class="autor">
<div class="autorfoto">
</div>
<div class="autordescripcion">
Lorem ipsum dolor sit amet, consectetur adipisicing
</div>
</div>
</div>
<div class="item masonry-brick" style="position: absolute; top: 0px; left: 484px;">
<div class="imagen">
<div class="foto3">
<img src="imagenes/coelux-4.jpg">
</div>
</div>
<div class="descripcion">
#3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e
</div>
<div class="autor">
<div class="autorfoto">
</div>
<div class="autordescripcion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i
</div>
</div>
</div>
<div class="item masonry-brick" style="position: absolute; top: 1600px; left: 1452px;">
<div class="imagen">
<div class="foto1">
<img src="imagenes/index.jpg">
</div>
</div>
<div class="descripcion">
#40. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci
</div>
<div class="autor">
<div class="autorfoto">
</div>
<div class="autordescripcion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</div>
</div>
</div>
<div class="item masonry-brick" style="position: absolute; top: 1600px; left: 1452px;">
<div class="imagen">
<div class="foto1">
<img src="imagenes/titulo.jpg">
</div>
</div>
<div class="descripcion">
#40. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci
</div>
<div class="autor">
<div class="autorfoto">
</div>
<div class="autordescripcion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</div>
</div>
</div>
</div>
</section>
<footer>
<div id="footizq" align="left">
<font id="footer" style="font-size:15px"><b>Jorge Cominges</b></font>
<br />
<font id="footer">is an architect and designer living in Madrid</font>
</div>
<div id="footder" align="right">
<font id="footer" style="font-size:12px">Copyright © 2015. All rights reserved</font>
</div>
</footer>
Muchas gracias de antemano.
