0

I have a slider image on which I have a bit of text which needs to be displayed, as color of image is not constant I have to change text color using jQuery I have been browsing on this issue and I've got few links.

1) Dynamically adjust text color based on background image

2) ## Demo on Fiddle ##(uses moototools, did not work for me)

But it didn't help me, in the first link I saw a post which gave me idea of jQuery Adaptive Background Plugin.

This link gives a description about adaptive-backgrounds-jquery-plugin which will change background color of the parent element.

Here is my code to change color of the parent element. I have to change this to text color but as of now I am unable to change the background color. Can anybody help me?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <title>JQuery Adaptive Background Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.adaptive-backgrounds.js"></script>
    <style>
    body {
        font-family: 'Ubuntu', serif;
        color:#444;
        font-size:1.6em;
        padding:0;
        margin:0;
    }
    .ad_container {
        margin-bottom: 20px;
        height: 100px;
        position: absolute;
        right: 0;
    }
    .page-slide {
        width: 100%;
        padding:30px 0;
        text-align: center;
    }
    img {
    }
    </style>
  </head>
  <body>
    <div class="page-slide">
      <img src="hallofgamers.jpg"  width="500" alt="Water" data-adaptive-background='1'/>
    </div>
    <div class="page-slide">
      <img src="Capture.JPG"  width="500" alt="Water 2" data-adaptive-background='1'/>
    </div>
    <hr />
    <p><a href="">Return To Article</a></p>
    <script>
    $(document).ready(function() {
        $.adaptiveBackground.run()
    });
    </script>
  </body>
</html>
Community
  • 1
  • 1
3bu1
  • 977
  • 12
  • 30
  • Would you mind making a reduced test case on JSFiddle/Codepen? In the demo, please only use jquery and the adaptive backgrounds plugin. – briangonzalez Sep 02 '14 at 17:55
  • http://jsfiddle.net/wnshkxm9/ here is the JSFiddle. – 3bu1 Sep 02 '14 at 18:19
  • Please inspect the developer console for errors and report back when they're fixed. – briangonzalez Sep 02 '14 at 23:34
  • "1)Refused to execute script from 'https://raw2.github.com/briangonzalez/jquery.adaptive-backgrounds.js/master/src/jquery.adaptive-backgrounds.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 2)Uncaught TypeError: Cannot read property 'run' of undefined " this the error i got. – 3bu1 Sep 04 '14 at 06:45

0 Answers0