URL de sale rara de un array

  • Autor Autor samuelsuteras
  • Fecha de inicio Fecha de inicio

samuelsuteras

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Hola chicos,

Necesito cambiar el background de un elemento cada 3 segundos, esta parte okay la tengo controlada.

Estoy usando Advanced custom fields para darle al usuario una interfaz agradable para añadir las URL, entonces llamo cada URL con el siguiente array.


<?php $imagesar = array();
array_push($imagesar,get_field('hero_img'));
array_push($imagesar,get_field('hero_img_2'));
array_push($imagesar,get_field('hero_img_3'));

?>

Luego al elemento html le agrego lo siguiente.

Sstyle="background-image: url('<?php echo htmlspecialchars(json_encode($imagesar), ENT_QUOTES, 'UTF-8'); ?>

Pero las URL me salen asi

url('["https:\/\/www.freecodecamp.org\/news\/content\/images\/2020\/04\/w-qjCHPZbeXCQ-unsplash.jpg","https:\/\/images.unsplash.com\/photo-1622273512104-7f043d30cfbe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80","https:\/\/images.unsplash.com\/photo-1414509613498-f53000d3d2c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80"]')

Como puedo hacer para llamar una sola URL y que no salga de esta forma tan extraña?

Gracias
 
Insertar CODE, HTML o PHP: 
<?php

    $imagenes[] = "https://...1.png";
    $imagenes[] = "https://...2.png";
    $imagenes[] = "https://...3.png";
    $imagenes[] = "https://...4.png";

    $cual = rand(0,count($imagenes));
    echo "style="background-image: url('".$imagenes[$cual]."')";

¿por qué te estas liando con el json_encode, decode, html special chars?
 
La verdad es que primera vez que trabajo con ACF y Jquery juntos entonces no se como sacar el URL del array, te dejo captura del codigo completo para ver si me puedes echar una mano.

Podria facilmente hacer un print_r imagesar¨*

 
Última edición:
Prueba sacando eso htmlspecialchars
 
Es el resultado que me da haciendo esto.

<?php echo json_encode($imagesar); ?>
 
samuelsuteras dijo:
Es el resultado que me da haciendo esto.

<?php echo json_encode($imagesar); ?>
Hacer clic para expandir...
En el background tiene q seleccionar solo una background-image: url('<?php echo $imagesar[0]; ?>')
 
YeltsinReyes dijo:
En el background tiene q seleccionar solo una background-image: url('<?php echo $imagesar[0]; ?>')
Hacer clic para expandir...
Pero eso solo me daria una URL y no me cambiaria las URL cada X tiempo como lo declare en el Jquery
 
La tengo asi.


PHP: 
    <div class="content-area">
      <main>
        <?php $imagesar = array();
        array_push($imagesar,get_field('hero_img'));
        array_push($imagesar,get_field('hero_img_2'));
        array_push($imagesar,get_field('hero_img_3'));
          
        ?>
 <section class="hero-section" data-images="<?php echo  htmlspecialchars(json_encode($imagesar), ENT_QUOTES, 'UTF-8'); ?>" style="background-image: url('<?php echo $imagesar[0]; ?>')">

Y mira: https://starwhitehemp.com
 
El background se agrega asi .css('background-image', 'url("'+backgrounds[0]+"')');
 
YeltsinReyes dijo:
El background se agrega asi .css('background-image', 'url("'+backgrounds[0]+"')');
Hacer clic para expandir...

Yo lo tengo asi y lo coloque como me indicas y no hace diferencia.


JavaScript: 
jQuery( document ).ready(function() {
    var backgrounds = jQuery(".hero-section").data("images");
  console.log(backgrounds);
 
  var current = 0;

    function nextBackground() {
    console.log("next images called");
    console.log(backgrounds[current]);
        jQuery(".hero-section").css(
            'background-image',
        backgrounds[current = ++current % backgrounds.length]);

        setTimeout(nextBackground, 1000);
    }
    setTimeout(nextBackground, 1000);
    jQuery(".hero-section").css('background-image', backgrounds[0]);
});

No entiendo donde puede estar el error
 
Uno no puede pedir ayuda en este foro porque hasta al aire te lo cobran, lol
 
Aquí está la solución:


tu problema era json_encode que modifica el string
 
JavaScript: 
jQuery( document ).ready(function(){
    
    var current = 0;
    var backgrounds = jQuery('.hero-section').data('images');
    
    function nextBackground(){
        
        current = (current + 1);
        jQuery('.hero-section').css('background-image', 'url('+backgrounds[current]+')');
        
        if(current >= backgrounds.length){
            current = 0;
        }
        
        setTimeout(nextBackground, 1000);
        
    }
    
    setTimeout(nextBackground, 1000);
    jQuery('.hero-section').css('background-image', 'url('+backgrounds[0]+')');
    
});
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro