1

Básicamente me gustaría saber cómo puedo añadir el efecto lightbox a unas imágenes creadas en Advanced Custom Fields. He estado buscando distintas maneras, pero no he conseguido que funcione ninguna. Me gustaría poder implementarlo en el código de la plantilla. O bien, aplicarle un script para que las imágenes más pequeñas aparezcan en el lugar de otra imagen mayor (por ejemplo: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tab_img_gallery)

Ésta es la URL: http://acciwagen.com/vehiculos/coche-1/

Éste es el código:

<?php

$image = get_field('primera_imagen');

if( !empty($image) ): ?>

<img class="card-img-top2" src="<?php echo $image['url']; ?>" alt="<?php echo 
$image['alt']; ?>" onclick="myFunction(this);" />

<?php endif; ?>

<?php

$image1 = get_field('segunda_imagen');

if( !empty($image1) ): ?>

<img class="card-img-top2" src="<?php echo $image1['url']; ?>" alt="<?php 
echo $image1['alt']; ?>"/>

<?php endif; ?>

<?php

$image2 = get_field('tercera_imagen');

if( !empty($image2) ): ?>

<img class="card-img-top2" src="<?php echo $image2['url']; ?>" alt="<?php 
echo $image2['alt']; ?>"/>

<?php endif; ?>

<?php

$image3 = get_field('cuarta_imagen');

if( !empty($image3) ): ?>

<img class="card-img-top2" src="<?php echo $image3['url']; ?>" alt="<?php 
echo $image3['alt']; ?>"/>

<?php endif; ?>

Gracias de antemano, un saludo.

Edito

El functions.php está así:

function my_scripts() {

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

1 respuesta 1

0

Lo que deseas se puede conseguir de manera bastante sencilla usando Javascript. Te creo un ejemplo para que luego lo traslades a tu código.

$( document ).ready(function() {
    $('.imagen').click(function() {
      $('.imagen-grande').attr('src', $(this).attr('src'));
    });
});
.imagen-grande {
  width: 700px;
}

.imagen {
  width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="imagen-grande" class="imagen-grande" src="https://cdn2.royalcanin.es/wp-content/uploads/2018/07/imagencabeceraconsejosadiestramientogatitos.png">
<img id="imagen-1" class="imagen" src="https://st3.depositphotos.com/5505850/15413/i/1600/depositphotos_154130148-stock-photo-tender-kitten-isolated.jpg">
<img id="imagen-2" class="imagen" src="https://www.hillspet.be/content/dam/cp-sites/hills/hills-pet/en_us/exported/cat-care/routine-care/images/M5T9649ashx.jpg.rendition.220.270.jpg">
<img id="imagen-3" class="imagen" src="https://previews.123rf.com/images/voren1/voren11710/voren1171000012/87333614-dos-peque%C3%B1os-gatitos-aislados-en-un-fondo-blanco-.jpg">

Lo que hago es, mediante una función onclick en las imágenes pequeñas (a través de la clase .imagen) asignarle el atributo src de la imagen clickeada al de la imagen grande.

Este tipo de eventos se ejecutan de parte del cliente (en este caso el navegador), por lo que con PHP no podrías resolverlo. Para agregarlo a tu plantilla tan solo tendrías que añadir una función que haga esto a uno de los .js que cargues.

EDIT

Edité para envolver la función en una $(document).ready(function(), para evitar que la función trate de buscar un elemento en el DOM que todavía no cargó.

18
  • Muchas gracias por tu respuesta. Cómo podría implementarlo en el php? Es que soy bastante novato y aún no comprendo bien estos asuntos.
    – Ernesto
    Commented el 29 nov. 2018 a las 10:51
  • Justo acabo de editar mi respuesta aportando el como podrías implementarlo. Si le añades en tu código a la imagen grande la clase imagen-grande, a las pequeñas la clase imagen y copipasteas la función que utilizo dentro de uno de los .js que cargues en tu plantilla debería de valerte. EDIT Para que funcione el script debes cargar también la librería de Jquery en el head de tu Web.
    – phpMyGuel
    Commented el 29 nov. 2018 a las 10:59
  • He añadido las clases a las imágenes. He creado un archivo script.js, pero no sé si lo estoy enlazando bien. Voy a editar el post, por si quieres echarle un vistazo.
    – Ernesto
    Commented el 29 nov. 2018 a las 11:15
  • Estos son los scripts que tengo cargados en el header.php <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="js/script.js"></script>
    – Ernesto
    Commented el 29 nov. 2018 a las 13:39
  • Sigo sin conseguir que funcione. He dado los siguientes pasos: Primero, he copiado el script que me has facilitado en el archivo .js que tenía en el proyecto, lo he añadido al functions.php, y he cargado la librería de JQuery en el header.php. Después, he añadido las clases a cada imagen, pero sigo sin ver resultados. Qué estoy haciendo mal o dejando de hacer? Muchas gracias por tu ayuda.
    – Ernesto
    Commented el 30 nov. 2018 a las 8:50

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.