CODEWITHSUNDEEP
javascripthtmlcsswordpress
MrDevRI
MrDevRI

Reputation: 243

Trouble setting box-shadow using javascript

I'm using color thief to extract the dominant color from each image, and setting that color as a box shadow over the image. There are 4 images displayed, so I stored them in an array, loop through the array extracting the dominant color from each and setting it as the boxShadow each time through the loop. I can't figure out what is wrong with my code as nothing at all is happening, any help would be much appreciated!

JS:

  var slides = document.getElementsByClassName('slideImg');

  for (var i = 0; i < slides.length; i++) {
    var sourceImage = slides[i];
    var colorTheif = new ColorThief();
    var color = colorTheif.getColor(sourceImage);
    slides[i].style.boxShadow = "inset 0 0 0 350px color";
  };

HTML:

<div class="opinion">
  <div class="wrap">
    <div class="atable">
      <?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?>
      <?php while (have_posts()) : the_post(); ?>
        <div class="acell">
          <div class="contentbox">
            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID, 'issues'), 'large_size' );
            $url = $thumb['0']; ?>

            <ul class="slides">
              <li><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>" ><?php the_post_thumbnail('issues', array('class' => 'slideImg')) ?><span class="yo"><?php the_title(); ?></span></a></li>
            </ul>

          <!-- <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><h3><?php the_title(); ?></h3></a> -->
          </div>
        </div>
      <?php endwhile; wp_reset_query(); ?>
    </div>
  </div>
</div>

CSS:

.opinion .atable .acell .contentbox {
position: relative;
}

.opinion .atable .acell .contentbox img {
  width: 100%;
  height: auto;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: block;
  margin-bottom: 15px;
  position: relative;
}

.opinion .atable .acell .contentbox ul {
  list-style-type: none;
}

.opinion .atable .acell .contentbox ul li a {
  color: white;
  display: block;
  height: 200px;
  max-width: 100%;
  width: 100%;
}

.opinion .atable .acell .contentbox ul li a span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px 10px 20px 10px;
  color: #fff;
  z-index: 10;
  display: inline-block;
  font-size: 1.3em;
  text-shadow: 1px 1px 1px #000;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;

Upvotes: 0

Views: 52

Answers (1)

Jacob G
Jacob G

Reputation: 14172

In JavaScript, you cannot have a variable inside a string, you have to add it to the string with the + operator. 

slides[i].style.boxShadow = "inset 0 0 0 350px " + color;

Upvotes: 2

Related Questions