Change background according to image

Asked

Viewed 1,042 times

3

I’m needing to create an effect on my slideshow that for each image, the background of div color change according to the predominant color of the same. I searched the internet for a plugin that does this, and found the Adaptive.Background.js.

Overall it works perfectly, the only problem is that the background color does not update according to the passing of the slides, it changes in the first act and does not exchange more. For the slider, I’m using the plugin bxslider.

::::: HTML by 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
})

Does anyone have any suggestions?

An alternative that I thought is to insert the color manually for each image. Example:

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

In that, I would perform one jQuery that took the value setcolor and applied as background in div. But I don’t have much knowledge of how I can create this variable within the <img>.

jquery html css background
  • 1

    Ricardo, can you put the code you already have? So we can help you with what is failing. In HTML you can use data-color="#666333" and in jQuery use the .data(), ie $(img).data('color') to read, and $(img).data('color', '#123456') to assign new color.

  • Great! I didn’t know this one data-color. Now I need to identify what the current slide is, so he can take this attribute and apply it to background of the div.

  • 1

    I think you need to take a look at the option onSlideNext this page: http://bxslider.com/options

  • 1

    Stackfiddle is already working (Featuring: JS, CSS and HTML executables!), see the problem live and right here is always cool :)

  • They could put visible examples to better understand on the bxSlider website. :\

  • 1

    I got it, @Sergio :D like you told me.

Show 1 more comment

1 answer

3


I got.

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

Example of how it turned out:

<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.

  • 1

    Excellent! Probably your answer will be useful to others.

Browser other questions tagged jquery html css background

You are not signed in. Login or sign up in order to post.