Change background according to the image

Question

Change background according to the image

Navigation

#1 by (3 votes)

3

I need to create an effect in my slideshow that for each image, the background of div changes color according to the predominant color of it. I searched the internet for a plugin that does this, and I found Adaptive.Background.js .

In general it works perfectly, the only problem is that the background color will not update according to the pass of the slides, it changes in the first act and does not change anymore. For the slider, I'm using the bxslider plugin.

::::: Slider HTML

<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
})

Does anyone have any suggestions?

One alternative I thought of is inserting the color manually for each image. Example:

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

In this, I would execute a jQuery that takes the setcolor value and applies as a background to div . But I'm not really aware of how I can create this variable within <img> .

html jquery css background

asked by anonymous 14.10.2014 / 20:42

1 answer

Folder Permission Only for the Android Application I get NA when I convert character to time (POSIXlt)

score 3 · Accepted Answer

I did it.

I added data-color="COR" as% of my slideshow and then modified <img> to perform the color reading function and add it to the background of jQuery .

Example of how it was:

<div class="banner" id="tween-banner">
    <div class="wrapp">
        <ul class="bxslider">
            <li><img src="image1.jpg" alt="Nome 1" data-color="#CC33CC" class="img-slider" /></li>
            <li><img src="image2.jpg" alt="Nome 2" data-color="#999999" class="img-slider" /></li>
        </ul>
    </div>
</div>

and in jQuery:

    $('.bxslider').bxSlider({ 
        auto:true,
        easing:'easeInOutCubic',
        useCSS:false,
        speed: 1000,
        onSlideNext: function($slideElement, oldIndex, newIndex){
            var corSlide = $('.img-slider').eq( newIndex ).data('color');
            $('.banner').css({ 'background-color': corSlide });
        }
    });

Thanks to @Sergio who guided me.