Change background color& Image on click - Zoom in Zoom out jQuery & Javascript

Main description

From a central main image, the following properties are applied through jQuery functions:

The main image is changed by any of three secondary images.
We change the color of the main image for any of the 5 colors available at the bottom.
Increase or decrease the size of the main image by clicking on any of the two zoom icons located at the bottom of the main image.

The following jQuery functions are used

click(). When I do single mouse click inside an element.
preventDefault(). Prevents the default behavior of the selected element.
on(). General function for capturing events as click,...
attr(). Sets a value for selected html element, gets attribute value for first matching element.
css(). Sets css properties for selected html elements, gets the value of the css property of the selected element.

<style>
  .parent .glyphicon {display: inline-block;margin:0 10%;}
  .parent .div4 div {width:50px;height:50px;border-radius:50%;float:left;margin:10px;}
</style>
<div class="parent">
  <div class="div1">
    <a href="#">
      <span class="glyphicon glyphicon-envelope" style="font-size:40px;"></span>
    </a>
    <a href="#">
      <span class="glyphicon glyphicon-user" style="font-size:40px;"></span>
    </a>
    <a href="#">
      <span class="glyphicon glyphicon-music" style="font-size:40px;"></span>
    </a>
  </div>
  <hr>
  <div class="div2" style="border: 1px solid black;border-radius: 5px;padding:5px;">
  	<div style="text-align:center;">
      <span class="glyphicon glyphicon-envelope" style="font-size:100px;"></span>
    </div>
  </div>
  <hr>
  <div class="div3" style="text-align: center;">
  	<span class="glyphicon glyphicon-zoom-in" style="font-size:50px;" id="in"></span>
    <span class="glyphicon glyphicon-zoom-out" style="font-size:50px;" id="out"></span>
  </div>
  <hr>
  <div class="div4" style="display: inline-block;">
  	<div id="black" style="background-color:black;"></div>
    <div id="rojo" style="background-color:red;"></div>
    <div id="blue" style="background-color:blue;"></div>
    <div id="yellow" style="background-color:yellow;"></div>
    <div id="green" style="background-color:green;"></div>
    <div id="pink" style="background-color:pink;"></div>
  </div>
</div>

<script>
  $(function () {
    $('.div1 a').click(function(event){
      event.preventDefault();
    });
    //SELECT IMAGE
    $(".div1").on("click", "span", function() {
      $(".div2 span").attr("class", $(this).attr("class"));
    });
	//COLORS
    $(".div4").on("click", "div", function() {
      $(".div2 span").css("color", $(this).css("background-color"));
    });
    //ZOOM
    $(".div3").on("click", "span#in", function() {
        $(".div2 span").css("font-size", "+=30px");
    });
    $(".div3").on("click", "span#out", function() {
        $(".div2 span").css("font-size", "-=30px");
    });
  });
</script>