Background Dynamic URL

Question

Background Dynamic URL

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

It is possible to create a dynamic array of images and it is called inside the background-image: url ()?

With the hint that was passed by @hugocsl earlier, I would like to reuse this statement line because it is part of a page loader that I use and is very useful to me,

#carrega_imagem {
        position: relative;            
        background-image: linear-gradient(rgba(0, 0, 0, .75) 0%, 
                                          rgba(102, 0, 0, .50) 100%),  
                                          url("images/casa_linda.jpg");
        background-size: cover;
        height: 100%;
        width: 100%;
        top: 100%;
        left: 100%;
}

Where is the code snippet url("images/casa_linda.jpg") , is it possible to create an array via javascript?

I saw this in Jquery, but what kills is the framework I use for this loader.

javascript array

asked by anonymous 26.04.2018 / 23:11

2 answers

Change string Python Problem with click event

score 3 · Answer 1

Yes, it is possible. Just create a variable to store the values (link of the photos) and then use for to go through those values, for example:

/* Gradiente padrão */
const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

/* Link das imagens */
const images = [
  'https://www.grammy.com/sites/com/files/styles/news_detail_header/public/news/lindsey_stirling_still_01.jpg?itok=cDdUKxXi',

  'https://upload.wikimedia.org/wikipedia/commons/6/65/Evanescence_at_The_Wiltern_theatre_in_Los_Angeles%2C_California_04_%28cropped%29.jpg',

  'http://images.virgula.com.br/2018/03/63a8d811-2814-4cdf-9c9f-aeb31559854f.jpg'
];

/* Função para alterar as imagens */
(async () => {
    for (let image of images) {

      /* Aplica o gradiente com a URL da imagem */
      document.body.style.setProperty("background-image", '${gradient}, url('${image}')');
      
      /* Define o tempo de 5 segundos para alternar */
      await new Promise(resolve => setTimeout(resolve, 5000))

    }
})();

body {
  background-size: cover;
}

With jQuery is the same thing. To change the property simply use

$("element").css("background-image", '${gradient}, url('${image}')');
$("element").delay(5000);

If you want a random image only (without toggling), then you can use Math.random to capture the image randomly, for example:

/* Gradiente padrão */
const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

/* Link das imagens */
const images = [
  'https://www.grammy.com/sites/com/files/styles/news_detail_header/public/news/lindsey_stirling_still_01.jpg?itok=cDdUKxXi',

  'https://upload.wikimedia.org/wikipedia/commons/6/65/Evanescence_at_The_Wiltern_theatre_in_Los_Angeles%2C_California_04_%28cropped%29.jpg',

  'http://images.virgula.com.br/2018/03/63a8d811-2814-4cdf-9c9f-aeb31559854f.jpg'
];

const slider = document.querySelector("#slider");

/* Função para capturar e aplicar uma imagem aleatória */
slider.style.setProperty("background-image", '${gradient}, url('${images[ Math.floor(Math.random() * images.length) ]}')');

img {
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

<img id="slider">

If you plan to have an alternate image with animation, follow the example below:

const slider = document.querySelector("#slider");

const images = slider.querySelector("img");

(async() => {
  for (;;) {

    await new Promise(resolve => setTimeout(resolve, 5000))

    let elementCurrent = slider.querySelector(".active")
    let elementNext;

    if (elementCurrent.nextElementSibling) {
      elementNext = elementCurrent.nextElementSibling;
    } else {
      elementNext = images[0];
    }

    elementCurrent.classList.remove("active")
    elementNext.classList.add("active")
  }
})();

#slider,
#slider .overlay {
  height: 500px;
  position: relative;
  overflow: hidden;
  width: 500px;
}

#slider img {
  opacity: 0;
  transition: all 1s linear;
}

#slider img,
#slider .overlay {
  left: 0;
  position: absolute;
  top: 0
}

#slider .overlay {
  background: linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%);
}

#slider img.active {
  opacity: 1
}

<div id="slider">
  <img src="https://picsum.photos/500/500/?image=845"class="active" />
  <img src="https://picsum.photos/500/500/?image=844"/><imgsrc="https://picsum.photos/500/500/?image=843" />
  <img src="https://picsum.photos/500/500/?image=842"/><imgsrc="https://picsum.photos/500/500/?image=841" />

  <div class="overlay"></div>
</div>

score 1 · Answer 2

<div id="qLoverlay" class="preloader"></div>

<script type="text/javascript">
    /* Gradiente padrão */
    const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

    /* Link das imagens */
    const images = [
      'images/building.jpg', 
      'images/honeycomb.jpg',
      'images/space.jpg'];

    const slider = document.querySelector("#qLoverlay");

    /* Função para capturar e aplicar uma imagem aleatória */
    slider.style.setProperty("background-image", '${gradient}, url('${images[ Math.floor(Math.random() * images.length) ]}')');
</script> 


<style type="text/css">

    /* ATENÇÃO = PSEUDO-ELEMENTOS - Exige o "::" */
    #qLoverlay {
        position: relative;            
        background-size: cover;
        height: 100vh;
        width: 100vw;
    }

    #qLoverlay::after {
        position: absolute;
        content: url(images/logo.png);
        top: 50%;
        left: 50%;
        margin-left: -600px;
        margin-top: -600px; 
    }
</style>

Here is what is important in the div where the background image for my case, QueryLoader2 is presented, just put a #ID, then just point the const slider = document.querySelector ("# qLoverlay") and lastly adjust the class / ID #qLoverlay in CSS style.