The info slide script is a great way to display your content to your customers! It will place a sliding text box over any image on the page. It can be placed inside of content or modules. It will also automatically adjust to any size screen size on window resize. You can have as many as you need on the same page. There are 2 versions available the JavaScript and CSS. The CSS allows you to choose from different styles as shown below. Choose the desired version in the backend of Vertex. Examples of each style are given below.
Javascript Version:
<div style="float: left; width: 48%; margin-right: 2%; margin-bottom: 15px; display: block;" class="s5_is">
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg" alt="">
<div class="s5_is_slide" style="opacity: 0.85; height: 51px; width: 100%;"><div
class="s5_is_display">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div></div>
</div>
<div style="float:left; width:48%; margin-right:2%; margin-bottom:15px" class="s5_is_css">
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg" alt="">
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<div class="s5_is_css_hidden">
This is dummy text. You can add any text or html markup here.
</div>
</div>
</div>
<div style="float:left; width:48%; margin-right:2%; margin-bottom:15px" class="s5_is_css_1">
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg" alt="">
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<div class="s5_is_css_hidden">
This is dummy text. You can add any text or html markup here.
</div>
</div>
</div>
<div style="float:left; width:48%; margin-right:2%; margin-bottom:15px" class="s5_is_css_2">
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load6.jpg" alt="">
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<div class="s5_is_css_hidden">
This is dummy text. You can add any text or html markup here.
</div>
</div>
</div>
<div class="s5_is_css_3">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg">
<div class="s5_is_css_initial">
<h3>Example Slide</h3>
<div class="s5_is_css_initial_text">
This is dummy text. You can add any
text or html markup here.
</div>
</div>
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<div class="s5_is_css_hidden">
This is dummy text. You can add any
text or html markup here.
</div>
</div>
</div>
<div class="s5_is_css_4">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg">
<div class="s5_is_css_initial">
<h3>Example Slide</h3>
<div class="s5_is_css_initial_text">
This is dummy text. You can add any
text or html markup here.
</div>
</div>
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<div class="s5_is_css_hidden">
This is dummy text. You can add any
text or html markup here.
</div>
</div>
</div>
<div class="s5_is_css_5">
<div class="s5_is_css_wrap_5">
<h3>Example Title</h3>
<div class="s5_is_css_hidden"><a href="#">Example Link</a></div>
</div>
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg">
<div class="s5_is_slide_css"></div>
</div>
<div class="s5_is_css_6">
<div class="s5_is_css_wrap_6">
<h3>Example Title</h3>
<div class="s5_is_css_hidden"><a href="#">Example Link</a></div>
</div>
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg">
<div class="s5_is_slide_css"></div>
</div>
<div class="s5_is_css_7">
<div class="s5_is_css_wrap_7">
<div class="s5_is_css_hidden">
<a href="#" class="button">Zoom Image</a>
<a class="button">View Project</a>
</div>
</div>
<img alt="image" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg">
<div class="s5_is_slide_css"></div>
<div class="s5_is_slide_7_css">
<div class="s5_is_slide_padding">
<h3>Example Slide</h3>
You can add any text or html markup here.
</div>
</div>
</div>
<div class="s5_is_css_8">
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg" alt="">
<div class="s5_is_slide_css">
<h3>Example Slide</h3>
<span class="s5_is_slide_text">
You can add any text or html markup here.
</span>
</div>
</div>
<div class="s5_is_css_9">
<img alt=""
src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg"></img>
<div class="s5_is_slide_css">
<div class="s5_is_slide_css_inner">
<h3>Example Slide</h3>
<span class="s5_is_slide_text">
You can add any text or html markup here.
</span>
</div>
</div>
</div>
<div class="s5_is_css_10">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg"></img>
<div class="s5_is_slide_css">
<a href="" class="s5_is_slide_css_plus_circle">+</a>
<div class="s5_is_slide_css_inner">
<h3>Example Slide</h3>
<span class="s5_is_slide_text">
You can add any text or html markup here.
</span>
</div>
</div>
</div>