URL de sale rara de un array

samuelsuteras · 29 May 2021

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

fabgonber · 29 May 2021

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?

samuelsuteras · 29 May 2021

fabgonber dijo:
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¨*

fabgonber · 29 May 2021

Prueba sacando eso htmlspecialchars

samuelsuteras · 29 May 2021

fabgonber dijo:
Prueba sacando eso htmlspecialchars
Ver el archivo adjunto 530885

Nada :/

me arroja esto background-image: url('[

fabgonber · 29 May 2021

samuelsuteras dijo:
me arroja esto background-image: url('[

eso no tiene sentido.-

samuelsuteras · 29 May 2021

Es el resultado que me da haciendo esto.

<?php echo json_encode($imagesar); ?>

YeltsinReyes · 29 May 2021

samuelsuteras dijo:
Es el resultado que me da haciendo esto.

<?php echo json_encode($imagesar); ?>

En el background tiene q seleccionar solo una background-image: url('<?php echo $imagesar[0]; ?>')

samuelsuteras · 29 May 2021

YeltsinReyes dijo:
En el background tiene q seleccionar solo una background-image: url('<?php echo $imagesar[0]; ?>')

Pero eso solo me daria una URL y no me cambiaria las URL cada X tiempo como lo declare en el Jquery

YeltsinReyes · 29 May 2021

samuelsuteras dijo:
Pero eso solo me daria una URL y no me cambiaria las URL cada X tiempo como lo declare en el Jquery

Pero ya la estas cambiando con jquery y sacandolas del data-images.

samuelsuteras · 29 May 2021

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

YeltsinReyes · 29 May 2021

samuelsuteras dijo:

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]+"')');

samuelsuteras · 29 May 2021

YeltsinReyes dijo:
El background se agrega asi .css('background-image', 'url("'+backgrounds[0]+"')');

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

fabgonber · 29 May 2021

El jquery esta bien...

Mira: http://ping.appserver.science/temporal/para_samuel.php

samuelsuteras · 29 May 2021

fabgonber dijo:
El jquery esta bien...

Mira: http://ping.appserver.science/temporal/para_samuel.php

Entonces por que no me funciona? Como pusiste el php y el html?

fabgonber · 29 May 2021

samuelsuteras dijo:
Entonces por que no me funciona? Como pusiste el php y el html?

5 USD.-

samuelsuteras · 29 May 2021

Uno no puede pedir ayuda en este foro porque hasta al aire te lo cobran, lol

fabgonber · 29 May 2021

Aquí está la solución:

tu problema era json_encode que modifica el string

YeltsinReyes · 29 May 2021

samuelsuteras dijo:

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

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]+')');
    
});

fabgonber · 29 May 2021

samuelsuteras dijo:
Uno no puede pedir ayuda en este foro porque hasta al aire te lo cobran, lol

estaba bromeando...