jQuery: Inline Image-over Expand3

by freedawirl

HTML

<script src="http://media.cmgdigital.com/shared/media/2015-01-22-14-29-03/web/common/v2newspaper/javascript/core.v2newspaper.js?version=2015-01-22"></script>
<div class="cm-story-content" style="background:white;">

    <script>
        
    </script>
   
      <div class="cm-story-body cm-story-nophoto">
          
       
        <div class="cm-inline cm-inline-medleyphoto">
         
            <figure>
              <a class="inline-image" href="#" title="Click to View Larger">
                  
                  <img height="600" src="http://placehold.it/600x750" width="600" alt="Losing sleep over traffic? New report says you are. photo" title="Losing sleep over traffic? New report says you are." /></a>
            </figure>
          
            <figcaption class="cm-photo-credit"><a rel="nofollow" href="/staff/deborah-cannon/"> Author</a></figcaption>
          
<div class="cm-related-caption">Commuters jam Interstate 35 north of Riverside Drive during rush hour in January. A new report indicates most of those drivers probably built considerable extra time into their trips because of unpredictable traffic.
            </div>
     </div>
       

        </div>

</div>

CSS

/* ==========================================================================
   Story inline element classes
   ========================================================================== */

.cm-story-content .cm-inline {
  width: auto;
  position: relative;
  max-width: 300px;
}
.cm-story-content .cm-inline:nth-of-type(even),
.cm-story-content .cm-inline .cm-inline-left {
  float: left;
  margin: 0 20px 15px 0;
}
.cm-story-content .cm-inline:nth-of-type(odd),
.cm-story-content .cm-inline .cm-inline-right {
  float: right;
  margin: 0 0 15px 20px;
}

.cm-story-content .cm-map-container {
  width: 300px;
  height: 300px;
}
.cm-story-content .cm-inline-image,
.cm-story-content .cm-inline-medleyphoto {
  padding: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  max-width: 275px;
}
.cm-story-content .cm-inline-image img,
.cm-story-content .cm-inline-medleyphoto img {
  width: 100%;
  height: auto;
}
.cm-story-content .cm-inline-image a,
.cm-story-content .cm-inline-medleyphoto a {
  display: block;
  position: relative;
  z-index: 999;
  color: inherit;
  font-size: inherit;
}
.cm-story-content .cm-inline-image .cm-expanded,
.cm-story-content .cm-inline-medleyphoto .cm-expanded {
  z-index: 1000;
}
.cm-story-content .cm-inline-image .cm-photo-credit,
.cm-story-content .cm-inline-medleyphoto .cm-photo-credit {
  text-align: right;
}
.cm-story-content .cm-inline-image .cm-photo-credit a,
.cm-story-content .cm-inline-medleyphoto .cm-photo-credit a {
  display: inline;
  color: inherit;
  word-break: break-word;
  font-size: inherit;
  z-index: 1;
}
.cm-story-body > ul li {
  margin: 8px 15px;
  font-size: 16px;
  list-style-position: inside;
}

JavaScript

(function(){var $jsi={};cmg.utility.ExpandStoryImage=function(el,$){var $self=$(el);if($self.length){$self.click('expand_image',function(e){e.preventDefault();var $parent=$self.parents('.cm-inline'),left_pos=0;if($parent.css('float')==='right'){left_pos=$self.position().left-600+$self.width();if($parent.attr('data-leftpos')==undefined){$parent.attr('data-leftpos',$parent.position().left);}}
$self.attr('data-height',$self.height());if($self.hasClass('cm-expanded')){$self.animate({width:'100%',left:0,position:'relative'},1000).removeClass('cm-expanded');}else{$('.cm-expanded').animate({width:'100%',left:0,position:'relative'},1000).removeClass('cm-expanded');$self.parent().height($self.attr('data-height'));$self.attr('data-height',$self.height());$self.animate({width:600,left:left_pos,position:'absolute'},1000).addClass('cm-expanded');}});}}}());

$( document ).ready(function() {

        try {
            cmg.utility.ExpandStoryImage('.inline-image', cmg.query);
        } catch(err) {
            throw 'Error adding expanding image handler';
        };

    });