JIMMY 2

<?php
  /*
  $colors = array(
    array('url' => 'http://img.com/img1.jpg?color=red', 'color_code' => '1', 'color_picture' => '1'),
    array('url' => 'http://img.com/img2.jpg?color=red', 'color_code' => '1'),
    array('url' => 'http://img.com/img3.jpg?color=red', 'color_code' => '1'),
  );
  */
  $colors = array(
    array('name' => 'Red', 'id' => 1, 'images' => array('img1-red.jpg','img2-red.jpg','img3-red.jpg')),
    array('name' => 'Green', 'id' => 2, 'images' => array('img1-green.jpg','img2-green.jpg')),
    array('name' => 'Blue', 'id' => 3, 'images' => array('img1-blue.jpg'))
  );

  //echo json_encode($result);
?>
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://img2.game-oldies.com/sites/default/files/packshots/nintendo-game-boy-advance/pokemon.jpg" alt="...">
        <div class="carousel-caption">
        </div>
      </div>
      <div class="item">
        <img src="http://img2.game-oldies.com/sites/default/files/packshots/nintendo-game-boy-advance/pokemon.jpg" alt="...">
        <div class="carousel-caption">
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <?php if (!empty($colors)): ?>
    <select class="color-option">
      <?php foreach ($colors as $color): ?>
        <option value="<?php echo htmlspecialchars($color['id']); ?>"
                data-links="<?php echo htmlspecialchars(json_encode($color['images'])); ?>"><?php echo htmlspecialchars($color['name']); ?></option>
      <?php endforeach; ?>
    </select>
  <?php endif; ?>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script>
    $(function() {
      var color_option = $('.color-option');

      if (color_option.length) {
        color_option.on('change', function() {
          var selectedId = $(this).val();
          var name = $(this).find(':selected').text();
          var links = $(this).find(':selected').data('links');

          console.log(selectedId, name, links);

          if (!links.length) {
            return;
          }

          var carousel = $('#carousel-example-generic');

          if (carousel.length) {
            carousel.carousel('pause');

            var carousel_inner = carousel.find('.carousel-inner');
            if (carousel_inner.length) {
              carousel_inner.empty();

              for (var i = 0, ilen = links.length; i < ilen; i++) {
                var active = '';
                if (i == 0) {
                  active = ' active';
                }
                carousel_inner.append(
                  $('<div class="item' + active + '">').append(
                    $('<img alt="">').prop('src', links[i]).attr('data-color_code', selectedId)
                  )
                );
              }
            }

            carousel.carousel('cycle');
          }

        });
      }

    });
  </script>
</body>
</html>