Tengo una Landing Page dividida en dos columnas, la izquierda es el NavBar donde hay un acordeón con propiedades a la venta (es una web de una inmobiliaria) y a la derecha quiero que se haga un display de la información de la propiedad (imágenes, detalles de venta, botón de cotización etc...). Lo que quiero es que al hacer click en una propiedad del acordeón, la parte derecha se actualice con la información de la propiedad en cuestión. Ahora he de aclarar algo: La web tiene un index.php donde cada parte de la página es llamada con un require
(el NavBar, el body, y el footer son integrados en el índice mediante la función require
de PHP) algo así como MVC pero no tan complejo.
Ahora, el acordeón está en el NavBar gracias a un require
, y las propiedades a su vez, están en el NavBar gracias a un require
que las llama desde un archivo propiedades.tpl.
Imagen para que se ilustre parecida a la página.
<html>
<body id="top">
<?php require 'header.php'; ?>
<!-- Main -->
<?php require 'body.html'; ?>
<!-- Footer -->
<?php require 'footer.html'; ?>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="accordion/js/jquery.accordion.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script>
$('.accordion').accordion({
"transitionSpeed": 400,
"singleOpen": false
});
</script>
</body>
</html>
Código del índice para que vean cómo está estructurada la página.
<html>
<head>
<link rel="stylesheet" href="assets/css/scroll.css" />
</head>
<body id="top">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>
<h2>Bienvenido</h2>
</div>
<div class="scroll">
<div>
<p><strong>Apartamentos</strong></p>
<?php require 'aptos.tpl'; ?>
</div>
<div>
<p><strong>Casas</strong></p>
<?php require 'casas.tpl'; ?>
</div>
</div>
</header>
</body>
</html>
Código del NavBar para que vean (Sí, el NavBar se llama header.php)
Tenía pensado hacerlo con AJAX mediante onClick=""
, pero no sé cómo hacerlo. Quiero que al presionar una propiedad en el NavBar de la izquierda, luego se actualice la parte derecha de la página para que haga un display de la información de la propiedad.
Había pensado, en lugar de cargar toda una web diferente, almacenar la información de las propiedades en un array (archivo .json
supongo) y que al hacer click, se lea esa información, y se reemplace en los campos pertinentes en la parte de información, pero no sé si eso funcionaría con imágenes. Además de que quiero hacer un deslizador con las imágenes de la propiedad, o una grilla de imágenes.