Swappable Image

Function

Clicking the image will show more information.Clicking again to return to the original image(Take rC-51-Tabs as an example).
点击图片可以来回切换图片样式。

Example Display

Deafult Heading 1

Click or tap images for more

Mitigation Measures & Road Safety Solutions

• Speed regulatory and Cautionary/Warning traffic signs (Class B, Type IV) should be installed before the approach of the curve as per Indian Roads Congress’ (IRC) Code of Practice for Road Signs (IRC67:2012).

• Raised Pavement Markers with red reflectors should be installed along both sides the road bend to highlight edges of curved road.

• If embankments are present, Road Delineators more than 1.5m and less than 2.5m in height should be installed to display.

Solutions:

High Intensity Prismatic Reflective Sheeting (Class B, Type IV)

Raised Pavement Markers

Delineators

How to use?

Step

1. Copy below code in rC-58 or rC-51-Tabs and so on. / 将如下代码复制到DPL的content内，以rC-51为例

2. Fill the 2 links for swap images. / 修改图片链接，分别为点击前，点击后

3. Add content if needed. / 按需求添加右边的内容

4. Alter the whole style if needed. / 按需调整整体样式

HTML CODE:


<style>
.MMM--imageContainer img{width:100%;position:absolute;}
.MMM--imageContainer {
    position: relative;
}
@media screen and (min-width: 1px) and (max-width: 768px) {
    .Content-right{margin-top: 1.5em;}
    .MMM--imageContainer {margin-bottom: 1em;}
    .js-switchPane1 p{
      padding-top: 12em;
    }
}
@media screen and (min-width: 768px){
  .content-box {
    position: relative;
    width: 100%;
  }
  .js-switchPane1 {
   width:45%;
   float: left;
  }
  .js-switchPane1 p{
    margin-top: 19em;
  }
  .Content-right {
    float: left;
    width: 45%;
    margin-left: 5%;
  }
}
</style>
<div class="content-box">
<div class="js-switchPane1">
  <div class="MMM--imageContainer">
     <!--Fill the link of image before swaping -->
     <img src="#" alt="" class="ContainerImg" title="">
     <!--Fill the link of image after swaping -->
     <img src="#" alt="" class="ContainerImg" style="display: none;" title="">
  </div>
  <p>Click or tap images for more</p> 
</div> 
<div class='Content-right'>
<!-- add text content here -->
</div>
<div style='clear:both;'></div>
</div>
<script>
domReady.customInlineMod = function(){
 $('.js-switchPane1').on('click',function(){
  $('.ContainerImg:visible').fadeOut("400").siblings().fadeIn("400");
})
}
</script>

Swappable Image

Function

Example Display

How to use?

Step