0
201
VistasCómo aleatorizar imágenes en WordPress con Javascript (Campos personalizados avanzados)
Estoy usando campos personalizados avanzados para crear un sitio de WordPress. Una de las páginas debe tener una imagen de encabezado que cambie aleatoriamente después de un par de segundos. Estoy tratando de hacer posible elegir qué imágenes se mostrarán aleatoriamente con ACF.
Con ACF he creado un campo personalizado llamado Imágenes aleatorias. 
En el siguiente paso, la plantilla PHP cargará las imágenes. Luego, las imágenes deben aleatorizarse con Javascript y mostrarse en la página donde uso el campo personalizado. ¿Cómo hago para que esto funcione?
PHP y JavaScript
<?php if (get_row_layout() == 'random_images') { ?> <section id="gallery"> <img src="' <?php get_sub_field('ra_photo_one'); ?> <img src="' <?php get_sub_field('ra_photo_two'); ?> <img src="' <?php get_sub_field('ra_photo_three'); ?> <img src="' <?php get_sub_field('ra_photo_four'); ?> <img src="' <?php get_sub_field('ra_photo_five'); ?> </section> <?php } ?> <script> const getRandomNumber = (function() { var nums = [1,2,3,4,5,6]; var current = []; function rand(n) { return (Math.random() * n)|0; } return function() { if (!current.length) current = nums.slice(); return current.splice(rand(current.length), 1); } }()); const images = document.querySelectorAll('#gallery img'); getRandomImages = () => { const imagesNums = []; for (let i = 1; i < 7; i++) { imagesNums.push(getRandomNumber()); } images.forEach((img, index) => { img.src = `./images/${imagesNums[index]}.jpg` }) } setInterval(() => { getRandomImages() }, 500); </script2 Respuestas
Responde la pregunta0
Primero, tienes que crear 1 sección vacía.
<section id="gallery"></section>Ahora agregue todas las imágenes a la matriz de JavaScript.
<script> var images = [ '<?php get_sub_field('ra_photo_one'); ?>', '<?php get_sub_field('ra_photo_two'); ?>', '<?php get_sub_field('ra_photo_three'); ?>', '<?php get_sub_field('ra_photo_four'); ?>', '<?php get_sub_field('ra_photo_five'); ?>' ]; </script>Ahora agregue la lógica de imagen aleatoria.
setInterval(function(){ $('#gallery').html('<img class="fade-in" src="' + images[Math.floor(Math.random() * images.length)] + '">'); }, 3000);y algo de CSS para suavizar la transición.
.fade-in{ -webkit-animation: fade-in 2s ease; -moz-animation: fade-in ease-in-out 2s both; -ms-animation: fade-in ease-in-out 2s both; -o-animation: fade-in ease-in-out 2s both; animation: fade-in 2s ease; visibility: visible; -webkit-backface-visibility: hidden; } @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @keyframes fade-in{0%{opacity:0} 100%{opacity:1}}Verifique el fragmento de trabajo a continuación.
ACTUALIZAR (según la solicitud de OP ahora la imagen cambiará automáticamente)
var images = [ 'https://via.placeholder.com/150?text=123', 'https://via.placeholder.com/150?text=456', 'https://via.placeholder.com/150?text=789', 'https://via.placeholder.com/150?text=ABC', 'https://via.placeholder.com/150?text=PQR', ]; $('#gallery').html('<img class="fade-in" src="' + images[Math.floor(Math.random() * images.length)] + '">'); setInterval(function(){ $('#gallery').html('<img class="fade-in" src="' + images[Math.floor(Math.random() * images.length)] + '">'); }, 3000); .fade-in{ -webkit-animation: fade-in 2s ease; -moz-animation: fade-in ease-in-out 2s both; -ms-animation: fade-in ease-in-out 2s both; -o-animation: fade-in ease-in-out 2s both; animation: fade-in 2s ease; visibility: visible; -webkit-backface-visibility: hidden; } @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @keyframes fade-in{0%{opacity:0} 100%{opacity:1}} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="gallery"></section>0
Según su aclaración de que desea mostrar una imagen a la vez, podría hacer la aleatorización en PHP, creo que será más fácil:
<?php if (get_row_layout() == 'random_images') { $field_names = ['one', 'two', 'three', 'four', 'five']; shuffle($field_names); // this randomizes that array $name = $field_names[0]; ?> <section id="gallery"> <img src="' <?php get_sub_field('ra_photo_' . $name); ?>" /> </section> <?php } ?>Eso elegirá una imagen aleatoria en el momento de la carga y la mostrará.
Por cierto, su código de fragmento olvidó incluir la parte de cierre " /> de cada elemento img , así que lo agregué aquí.
Todavía no estaba claro para mí si querías recorrer las imágenes con javascript al azar, así que si quieres eso, puedes hacer esto:
<?php if (get_row_layout() == 'random_images') { $field_names = ['one', 'two', 'three', 'four', 'five']; shuffle($field_names); // this randomizes that array ?> <section id="gallery"> <?php foreach ($field_names as $field) { ?> <img style="display: none;" src="' <?php get_sub_field('ra_photo_' . $field); ?>" /> <?php } ?> </section> <?php } ?>Luego, podría continuar con un temporizador en javascript que muestra una imagen a la vez. Necesitará las funciones adecuadas de CSS y Javascript para hacerlo.