Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

Info Slide

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>


CSS Default Version:

<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>


CSS Version 1:

<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>


CSS Version 2:

<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>


CSS Version 3:

<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>


CSS Version 4:

<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>


CSS Version 5:

<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>


CSS Version 6:

<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>


CSS Version 7:

<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>


CSS Version 8:



<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>


CSS Version 9:



<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>


CSS Version 10:



<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>

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.