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.js
.
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
.
::::: HTML do Slider
<div class="banner" id="tween-banner">
<div class="wrapp">
<ul class="bxslider">
<li><img src="image1.jpg" alt="Nome 1" /></li>
<li><img src="image2.jpg" alt="Nome 2" /></li>
</ul>
</div>
</div>
:::: jQuery
SC('.bxslider').bxSlider({
auto:true,
easing:'easeInOutCubic',
useCSS:false,
speed: 1000
})
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 aplicasse como fundo na div
. Mas não tenho muito conhecimento de como posso criar essa variável dentro da <img>
.
data-color="#666333"
e no jQuery usar o.data()
, ie$(img).data('color')
para ler, e$(img).data('color', '#123456')
para atribuir nova cor.data-color
. Agora preciso identificar qual é o slide atual, para ele pegar esse atributo e aplicar aobackground
da div.onSlideNext
nesta página: bxslider.com/options