jQuery addClass example

Change class name on click in jQuery

by Shuaib Khan

HTML

<div class="image-row">
  <a href="#1" class="wrapper">
      <div class="text">Hover Text</div>
      <img src="https://source.unsplash.com/random/768x960" width="768" height="960"/>
  </a>
  <a href="#2" class="wrapper">
      <span class="text">Hover Text</span>
      <img src="https://source.unsplash.com/random/1280x851" width="1280" height="851"/>
  </a>
</div>

CSS

* {
    box-sizing: border-box;
}
.wrapper {
    position: relative;
    padding: 0;
    /*width:100px;*/
    display:block;
		height:auto;
}
.text {
    position: absolute;
    top: 0;
    color:#9CBDBE;
    font-weight:bold;
    font-size:30pt;
    background-color:#fff;
    width: 100px;
    text-align: center;
    padding: 1%;
    z-index: 10;
    opacity: 0;
		display:flex;
		align-items:center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.text:hover {
    opacity:0.8;
}

img {
    z-index:1;
}

.image-row {
  width: 100%;
  margin: 1% 0;
}
.image-row img {
  width: 100%;
  height: auto;
  display: block;
  font-size: 0;
  float: left;
}
.image-row::after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

function picRow(selector) {

            masterArray = [];

            // create each lineArray and push it to masterArray 
            $(selector).each(function () {

                // get "selector" css px value for margin-bottom 
                // - parse out a floating point number 
                // - and divide by the outer width to get a decimal percentage
                margin = (parseFloat($(this).css("margin-bottom"), 10)) / ($(this).outerWidth());
                marginRight = margin * 100 + "%";
                // subtract subtract the total child margin from the total width to find the usable width
                usableWidth = (1 - ((($(this).find("img").length) - 1) * margin));

                // for each child img of "selector" - add a width/height as value in the ratios array
                ratios = [];
                $(this).find("img").each(function () {
                    ratios.push(($(this).attr('width')) / ($(this).attr('height')));
                });

                // sum all the ratios for later divison
                ratioSum = 0;
                $.each(ratios, function () {
                    ratioSum += parseFloat(this) || 0;
                });

                lineArray = [];
                $.each(ratios, function (i) {
                    obj = {
                        // divide each item in the ratios array by the total array
                        // as set that as the css width in percentage
                        width: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
                        height: ((ratios[i] / ratioSum) * usableWidth) * 100 + "%",
                        // set the margin-right equal to the parent margin-bottom
                        marginRight: marginRight
                    };
                    lineArray.push(obj);
                });
                lineArray[lineArray.length - 1].marginRight = "0%";
                // alert(lineArray[lineArray.length - 1].marginRight);
          ...