How to add caption text for each image in the jQuery Slider

Question

0.00/5 (No votes)

See more:

I am using this slider http://www.jqueryscript.net/slider/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides.html[^] ... its perfectly meet my needs. Now i just want to add caption text for each image in the Slider.

XML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery responsiveSlides Plugin Demo</title>
<style>
#content {
    width:100%;
    height:450px;
    position:relative;
    background:#99FF33;
}

</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.min.js"></script>
<script type="text/javascript" src="jquery.responsiveSlides.js"></script>
</head>
<body>
<div id="content">
<img src="1.jpg">
 <img src="2.jpg">
 <img src="3.jpg">
 </div>
<script language="javascript">

$(function(){

    var p=$('#content').responsiveSlides({
        height:450,                     // slides conteiner height
        background:'#fff',              // background color and color of overlayer to fadeout on init
        autoStart:true,                 // boolean autostart
        startDelay:0,                   // start whit delay
        effectInterval:5000,            // time to swap photo
        effectTransition:1000,          // time effect
        pagination:[
            {
                active:true,            // activate pagination
                inner:true,             // pagination inside or aouside slides conteiner
                position:'B_R',         /*
                                            pagination align:
                                                T_L = top left
                                                T_C = top center
                                                T_R = top right

                                                B_L = bottom left
                                                B_C = bottom center
                                                B_R = bottom right
                                        */
                margin:10,              // pagination margin
                dotStyle:'',            // dot pagination class style
                dotStyleHover:'',       // dot pagination class hover style
                dotStyleDisable:''      // dot pagination class disable style
            }
        ]
    });

});
</script>
</body>
</html>

Posted 16-Jun-15 4:16am

Mohammad Kashif Nadeem

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 16-Jun-15 10:55am

I don't think there is an option to do this. May be you need to update the plugin in that case.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)