Image Captions

Add captions to your images

CSS/JS files (add code to <HEAD> section):


<!-- Must place codes within <HEAD> section -->
<!-- DC Image Captions CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/image_captions/css/tsc_image_captions.css" />
<link type="text/css" rel="stylesheet" href="dreamcodes/image_captions/css/tsc_imghovercss.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Image Captions JS -->
<script type="text/javascript" src="dreamcodes/image_captions/js/tsc_image_captions.js"></script>

Ribbon Caption

View code:

 
<!-- DC Image Captions Start -->
<img src="http://pimg.co/p/300x197" class="tsc_wrapcapt" alt="" title="This image has a caption!" />
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Slide-up Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:

            
<!-- DC Image Captions Start -->
<a href="#" class="tsc_slidebot_css">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small>
</span><img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Sticky Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:


<!-- DC Image Captions Start -->
<a href="#" class="tsc_slidebotadd_css">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small></span>
<img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Slide-down Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:


<!-- DC Image Captions Start -->
<a href="#" class="tsc_slidetop_css">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small></span>
<img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Slide-side Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:


<!-- DC Image Captions Start -->
<a href="#" class="tsc_slideimgrt_css" style="width:300px; height:197px;">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small></span>
<img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Slide-down Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:


<!-- DC Image Captions Start -->
<a href="#" class="tsc_slideimgbot_css" style="width:300px; height:197px;">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small></span>
<img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->

Slide-corner Captions

Lorem ipsum dolor
sit amet, consectetur adipisicing elit

View code:


<!-- DC Image Captions Start -->
<a href="#" class="tsc_slideimgrttop_css" style="width:300px; height:197px;">
<span class="roll_css" >Lorem ipsum dolor<br /><small>sit amet, consectetur adipisicing elit</small></span>
<img src="http://pimg.co/p/300x197" border="0" /></a>
<!-- DC Image Captions End -->
<div class="tsc_clear"></div><!-- line break/clear line -->