0

Tengo que hacer que un botón abra una galería desde la primera imagen. La galería está hecha con fancybox.

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Identidad corporativa</title>
    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body class="service">
    <button type="button" class="logos"></button>
    <div class="papel"></div>
    <div class="tarje"></div>
    <div class="folle"></div>
    <div class="carpe"></div>
    <div class="sobre"></div>
    <div class="revis"></div>
    <div class="cata"></div>
    <footer id="footserv"><b class="fuente2">Identidad Corporativa</b></footer>

    <div style="display:none;">
        <ul>
                <li><a href="img/galeria/gal_1.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_1.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_2.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_2.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_3.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_3.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_4.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_4.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_5.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_5.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_6.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_6.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_7.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_7.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_8.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_8.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_9.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_9.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_10.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_10.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_11.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_11.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_12.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_12.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_13.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_13.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_14.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_14.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_15.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_15.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_16.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_16.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_17.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_17.jpg" alt="Galería" /></a></li>
                <li><a href="img/galeria/gal_18.jpg" data-fancybox="galeria1"><img src="img/galeria/gal_18.jpg" alt="Galería" /></a></li>
            </ul>
    </div>

</body>
</html>

PD: No sé si es correcto ponerle el display:none al div que contiene la galería, tengo un conocimiento básico de html.

2 respuestas 2

0

Con display:none; dentro de una etiqueta Style, no haces absolutamente nada... se supone que la etiqueta style es para poder establecer un estilo css a esa etiqueta en concreto. Si lo que quieres es quitarle los bordes a ese div, debes crear una hoja css, establecer un identificador para ese div y escribir border: none;

0

Si quieres abrirlo con un boton, este deberia estar conectado a un link que te devuelva JSON un petición Ajax e imprimirlo en el documento, y al final recien aplicar el fancybox

function click(){
$.ajax({
  url:'servidor',
  type:'GET',
  data:{coleccion:c},
  success: function(r){
    for(var i=0;i<r.length;i++){
      $("#galeria").append("<li><a href='img/galeria/gal_1.jpg' class= 'fancy-galeria'><img src='img/galeria/gal_1.jpg' alt="Galería" /></a></li>");
    }
    $("#galeria").append("<script>$('.fancy-galeria').fancybox({});</script>");
  }
});
}
<div id='galeria'>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.