Mudando a cor do fundo de acordo com a imagem

[rikaschmitt 54]

Boa tarde galera.

 

Estou precisando criar um efeito no meu slideshow de que para cada imagem, o fundo da div troca de cor de acordo com a cor predominante da mesma. Procurei na internet um plugin que faça isso, e achei o Adaptive.Background. No geral ele funciona perfeitamente, o único problema é que a cor do fundo não vai atualizando de acordo com o passar dos slides, ele troca no primeiro ato e não troca mais. Para o slider, estou usando o plugin "bxslider".

 

Alguém tem alguma sugestão?

 

 

Uma alternativa que pensei é inserir a cor manualmente para cada imagem.

Exemplo:

<img src="imagem1.jpg" setcolor="#666333" />
<img src="imagem2.jpg" setcolor="#FF0033" />

Nisso, eu executaria um jquery que pegasse o valor "setcolor" e aplico como fundo da div.

Mas não tenho muito conhecimento de como posso criar essa variável "setcolor" dentro da <img>.

 

:yes:

[wilnet 92]

Se seu slide for estático, não sei se ajuda, mas eu fiz um teste rápido aqui e funcionou.

 

Eu criei no CSS

.cor1{background:#069;}
.cor2{background:#9C0;}
.cor3{background:#F60;}
.cor4{background:#C39;}

E para cada Imagem, eu inseri a Class de cada Cor, na Div correspondente a cada imagem.

 

Acredito que não seja a melhor ideia kkkk, sou leigo, mas até que funcionou a troca das cores.

[rikaschmitt 54]

O problema é que o slider receberá as imagens de um painel administrativo. Ou seja, o usuário vai acessar o painel, entrar no painel do slider e adicionar quantas imagens quiser. Então vai ser automático o número de imagens e teria que ser automático também a verificação da cor :\

[wilnet 92]

Já que é dinâmico e por serem poucas fotos, eu faria assim:

 

* Na base de Dados, eu criaria um Campo ao lado da Imagem, exemplo "cor".

 

* Quando a pessoa for cadastrar a imagem ela terá tb o campo da Cor para preencher.

 

* Ou criar uma Tabela separada somente para as Cores e já cadastradas. Na ora de cadastrar a imagem ele terá uma Combobox que irá listar as Cores para ele escolher.

 

* Na Página do Slide, basta chamar a cor referente a esta imagem pelo mesmo ID dela que é pego da Base de Dados.

[rikaschmitt 54]

Já que é dinâmico e por serem poucas fotos, eu faria assim:

 

* Na base de Dados, eu criaria um Campo ao lado da Imagem, exemplo "cor".

 

* Quando a pessoa for cadastrar a imagem ela terá tb o campo da Cor para preencher.

 

* Ou criar uma Tabela separada somente para as Cores e já cadastradas. Na ora de cadastrar a imagem ele terá uma Combobox que irá listar as Cores para ele escolher.

 

* Na Página do Slide, basta chamar a cor referente a esta imagem pelo mesmo ID dela que é pego da Base de Dados.

 

Exatamente isso que está sendo feito. :)

Só estou ajustando nos códigos do slider para ele "puxar" a cor correspondente..

 

Assim que tiver mais notícias, posto aqui.

 

Valeu.

[rikaschmitt 54]

*SC é apenas o jQuery.noConflict();

        // slider principal
        var zYz = SC('.img-slider').eq(0).data('color');
        SC('.banner').css({ 'background-color': zYz });


        var sliderprincipal = SC('.bxslider'),
            setaprev = SC('.bx-prev'),
            setanext = SC('.bx-next'),
            sliderp = sliderprincipal.bxSlider({ 
            auto:true,
            easing:'easeInOutCubic',
            useCSS:false,
            speed: 2000,
            onSlideAfter: function($slideElement, oldIndex, newIndex){
                var current = sliderp.getCurrentSlide();
                var corSlide = SC('li:not(.bx-clone) > img.img-slider').eq(current).data('color');
                SC('.banner').css({ 'background-color': corSlide });
            }
        });

Fiz isso, e de fato está trocando as cores.

\o\