URL de sale rara de un array

  • Autor Autor samuelsuteras
  • Fecha de inicio Fecha de inicio
Vale chicos, ahora si funciona.

Gracias por la ayudita, estuvo bueno el chiste de los 5USD, jajaja.

Espero poder devolver el favor en algo que ustedes necesiten en el futuro
 
El problema está en el código de Jquery que tienes... Imprime en la consola el valor de la variable backgrounds y comparte el capture.
 
YeltsinReyes dijo:
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]+')');
   
});
Hacer clic para expandir...
Esta es la solucion
 
fabgonber dijo:
La diferencia:
  1. url(algo) hace la decodificación en el navegador (js)
  2. urlencode y urldecode hace la decodificación en el servidor. (php)
Hacer clic para expandir...
Pero ahora si ingresas en la pagina hay una imagen que se queda en blanco, como si el valor estuviese vacio, super extraño
 
Hay un valor que pasa como undefined
 
A ver dejo el codigo con el update que hice gracias a ustedes.


PHP: 
<section class="hero-section" data-images="<?php echo  htmlspecialchars(json_encode($imagesar), ENT_QUOTES, 'UTF-8'); ?>" style="background-image: url('<?php echo urlencode(json_encode($imagesar)); ?>')">
          <div class="container-fluid">
            <div class="banner-overlay-div"></div>
            <div class="col-12 col-md-6 hero-text">
              <h1><?php echo get_field('hero_title') ?></h1>
              <p><?php echo get_field('hero_desc') ?></p>
              <a href="<?php echo get_field('hero_link') ?>"><button><?php echo get_field('hero_button') ?></button></a>
            </div>
            <div class="col-12 col-md-6"></div>
          </div>
          <?php get_template_part( 'template-parts/wave' ); ?>
        </section>

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, 5000);
        
    }
    
    setTimeout(nextBackground, 5000);
    jQuery('.hero-section').css('background-image', 'url('+backgrounds[0]+')');
    
});
 
cholemon dijo:
Igual estás llamando 2 veces el setTimeout.

Debes dejar solo el que está fuera de la función.
Hacer clic para expandir...
Listo, pero sigue dandome error no entiendo porque, como si un valor no fuese correcto
 
samuelsuteras dijo:
Listo, pero sigue dandome error no entiendo porque, como si un valor no fuese correcto
Hacer clic para expandir...
Prueba con uno de estos dos.
JavaScript: 
if(current == backgrounds.length){
    current = 0;
}

JavaScript: 
 if(current > backgrounds.length){
    current = 0;
}
 
Nada bro, tengo asi el codigo y mira lo que dice la consola.

starwhitehemp.com

Los mejores productos de Cáñamo y CBD | Starwhite hemp

Starwhite hemp es más que una tienda online. Un estilo de vida sostenible en simbiosis con la Madre Tierra, mejorando el bienestar interior.
starwhitehemp.com starwhitehemp.com


Insertar CODE, HTML o PHP: 
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, 2000);
    jQuery('.hero-section').css('background-image', 'url('+backgrounds[0]+')');
    
});

Lo que dijo el compañero @fabgonber den urldecode, si lo hago me deja de funcionar todo, no se porque
 
@samuelsuteras usa este!

JavaScript: 
jQuery( document ).ready(function(){
   
    var current = 0;
    var backgrounds = jQuery('.hero-section').data('images');
    jQuery('.hero-section').css('background-image', 'url('+backgrounds[0]+')');
   
    setInterval(function(){
       
        current = (current + 1);
       
        if(current >= backgrounds.length){
            current = 0;
        }

        jQuery('.hero-section').css('background-image', 'url('+backgrounds[current]+')');
       
    }, 5000);
   
});
 
fabgonber dijo:
o usas url_encode(...) y url_decode(...) en el PHP o url(...) en el jquery... si haces ambos... decodificas dos veces.
Hacer clic para expandir...
A ver es que esto de php no es lo mio.

Te paso codigo a ver si entendi
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'));
          var_dump($imagesar);
        ?>
 <section class="hero-section" data-images="<?php echo htmlspecialchars(json_encode($imagesar), ENT_QUOTES, 'UTF-8') ?>" style="background-image: url('<?php echo urldecode(json_encode($imagesar), ENT_QUOTES, 'UTF-8') ?>')">

Si yo hago el urldecode que diferencia hay con el de htmlspecialchars?
 
samuelsuteras dijo:
A ver es que esto de php no es lo mio.

Te paso codigo a ver si entendi
PHP: 
<div class="content-area">
      <main>
        <?php $imagesar = array();
        array_push($imagesar,[B]urlencode[/B](get_field('hero_img'))));
        array_push($imagesar,[B]urlencode([/B]get_field('hero_img_2')));
        array_push($imagesar,[B]urlencode([/B]get_field('hero_img_3')));
          var_dump($imagesar);
        ?>
<section class="hero-section" data-images="<?php echo [B]urldecode[/B](json_encode($imagesar), ENT_QUOTES, 'UTF-8') ?>" style="background-image: url('<?php echo urldecode(json_encode($imagesar), ENT_QUOTES, 'UTF-8') ?>')">
Hacer clic para expandir...

samuelsuteras dijo:
Si yo hago el urldecode que diferencia hay con el de htmlspecialchars?
Hacer clic para expandir...
htmlspecialchars modifica muchos mas caracteres que urlencode
 
Ya, así esta bien!

PHP: 
<section class="hero-section" data-images="<?php echo htmlspecialchars(json_encode($imagesar), ENT_QUOTES, 'UTF-8') ?>"
style="background-image: url('<?php echo $imagesar[0]; ?>')">

JavaScript: 
jQuery( document ).ready(function(){
    
    var current = 0;
    var backgrounds = jQuery('.hero-section').data('images');
    jQuery('.hero-section').css('background-image', 'url('+backgrounds[0]+')');
    
    setInterval(function(){
        
        current = (current + 1);
        
        if(current >= backgrounds.length){
            current = 0;
        }

        jQuery('.hero-section').css('background-image', 'url('+backgrounds[current]+')');
        
    }, 5000);
    
});
 
1622326136772.png

view-source http://ping.appserver.science/temporal/para_samuel2.php
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba