[SOLUÇÃO/DEBATE] Full Banner HTML sem perder qualidade

Código CSS/HTML
1

Boa noite pessoal! Eu estava com problemas no Full Banner, estava ficando com a resolução muito baixa. Então eu achei um código que adiciona um Banner via HTML e JavaScript em carrossel sem perder qualidade.

Usei o seguinte código em Java Script:

// Can also be used with $(document).ready()

$(window).load( function () {

$( '.flexslider' ).flexslider({

animation: "slide"

});

});

E em HTML o seguinte código:

<!-- Place somewhere in the <body> of your page -->

< div class = "flexslider" >

< ul class = "slides" >

< li >

< img src = "slide1.jpg" />

</ li >

< li >

< img src = "slide2.jpg" />

</ li >

< li >

< img src = "slide3.jpg" />

</ li >

< li >

< img src = "slide4.jpg" />

</ li >

</ ul >

</ div >

Ficou ótimo! Realmente não perdeu a qualidade, mas eu tive dois problemas, e gostaria de ouvir dos amigos, se alguém sabe como solucionar.

Captura de tela 2022-05-27 194331
Captura de tela 2022-05-27 1943311920×973 130 KB

O Full Banner ficou acima do cabeçalho do site, eu gostaria de trocar de posição. Colocar o cabeçalho encima e o Full Banner em baixo.

E também gostaria de saber como colocar um mapa na imagem do Full Banner acima (Via HTML, CSS ou JS) para que eu consiga clicar no banner e ser redirecionado para outra página.

Desde já agradeço!

1 curtida
2

opa, bom dia!

nao entendi pq vc tem o mesmo codigo 2x

image

agora para mover seu html/banner, crie uma propriedade id ou coloque uma classe para conseguir achar ele no html, exemplo:

image
image1286×541 47.2 KB

image

dai vc pode mover para antes de um objeto (before) ou logo depois (after) ou dentro de um objeto logo no inicio (prepend) ou logo no final (append)

exemplo:
quero mover para ficar depois da da tag id=“cabecalho” (after) ou antes da tag class=‘secao-banners’

image
image912×252 25 KB 

$(function(){
   $('#cabecalho').after($('.meu-banner-full'));   
})

image
image1306×383 148 KB

2 curtidas
3

Como sempre, dando aula… :clap:

1 curtida
4

Muito obrigado amigo!!

1 curtida
5

Se quiser usar a própria imagem da Loja Integrada, pode fazer em 4K com qualidade de 50% pra ficar até 500kb. Depois chama o código abaixo pra forçar o carregamento da imagem original. Por padrão, a LI carrega imagem menores para otimizar carregamento.

  function increaseBannerImage() {
    const allImages = document.querySelectorAll(".banner.cheio .slides li img");

    let lengthImages = 0;

    allImages.forEach((element) => {
      if (element.src.indexOf("1140x1140") >= 0) {
        lengthImages = +1;
      }

      element.src = element.src.replace("1140x1140", "3840x1200");
    });

    if (lengthImages === 0) {
      return;
    } else {
      setTimeout(increaseBannerImage, 50);
    }
  }

  window.onload = increaseBannerImage();

O valor 3840x1200 pode ser de acordo com o tamanho do banner do seu tema.

No tema que uso na minha loja teste, eu refaço essa chamada em vários pontos da loja. Pode olhar os scripts no código fonte aqui: https://benove.lojaintegrada.com.br/

2 curtidas
7

Oi Breno, tudo bem? Poderia me ajudar, não sei nada de programação. Onde insiro esse código? ele serve para full banner e mini banner? Desde já agradeço!

8

Olá breno, teria esse código para melhorar qualidade dos minibanners?
Estou usando o minibanner como banner da verão mobile.

Obrigada