I am using Awkward Showcase's Image Slider and would like to add an additional caption box
<p>I am manipulating Awkward Showcase's code to get the Image Slider I want.</p>

<p>It already comes with one caption box on the image, however, I would like to add an additional one. I have already tried to do this in the code but it doesn't show up on the actual website. Newbie here. </p>

<p>Thanks.</p>

<p>This is my HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Awkward Showcase - Demo #1&lt;/title&gt;
&lt;link rel="stylesheet" href="css/style.css" /&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.aw-showcase.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

$(document).ready(function()
{
    $("#showcase").awShowcase(
    {
        content_width:          738,
        content_height:         300,
        fit_to_parent:          false,
        auto:                   true,
        interval:               3000,
        continuous:             true,
        loading:                true,
        tooltip_width:          200,
        tooltip_icon_width:     32,
        tooltip_icon_height:    32,
        tooltip_offsetx:        18,
        tooltip_offsety:        0,
        arrows:                 false,
        buttons:                true,
        btn_numbers:            false,
        keybord_keys:           true,
        mousetrace:             false, /* Trace x and y coordinates for the mouse */
        pauseonover:            true,
        stoponclick:            false,
        transition:             'hslide', /* hslide/vslide/fade */
        transition_delay:       0,
        transition_speed:       500,
        show_caption:           'show', /* onload/onhover/show */
        thumbnails:             false,
        thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
        thumbnails_direction:   'vertical', /* vertical/horizontal */
        thumbnails_slidex:      1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
        dynamic_height:         false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
        speed_change:           true, /* Set to true to prevent users from swithing more then one slide at once. */
        viewline:               false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
        custom_function:        null /* Define a custom function that runs on content change */
    });
});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="menu"&gt;&lt;/div&gt;
&lt;div style="width: 740px; margin: auto;"&gt;

    &lt;div id="showcase" class="showcase"&gt;

        &lt;!-- Each child div in #showcase represents a slide --&gt;
        &lt;div class="showcase-slide"&gt;
            &lt;!-- Put the slide content in a div with the class .showcase-content. --&gt;
            &lt;div class="showcase-content"&gt;
                &lt;img src="images/03.jpg" alt="03" /&gt;
            &lt;/div&gt;
            &lt;!-- Put the caption content in a div with the class .showcase-caption --&gt;
            &lt;div class="showcase-caption"&gt;
                Sarah is bla bla&lt;a href="http://egyptianaction.com"&gt;Take Action&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Each child div in #showcase represents a slide --&gt;
        &lt;div class="showcase-slide"&gt;
            &lt;!-- Put the slide content in a div with the class .showcase-content. --&gt;
            &lt;div class="showcase-content"&gt;
                &lt;img src="images/03.jpg" alt="03" /&gt;
            &lt;/div&gt;
            &lt;!-- Put the caption content in a div with the class .showcase-caption --&gt;
            &lt;div class="showcase-caption"&gt;
                THIS IS MY TEXT FOR THE FIRST CAPTION BOX
            &lt;/div&gt;

            &lt;div class="showcase-caption2"&gt;
            THIS IS MY TEXT FOR THE SECOND CAPTION BOX

            &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This is the CSS:</p>

<pre><code>/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}body{line-height:1}a img{border:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}table,td,th{vertical-align:middle}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}button::-moz-focus-inner{border:0}

body
{
    background-color: #dfdfdf;
    color: #fff;
    font-family: Century Gothic, Arial;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0px;
    margin-bottom: 0px;
}

a
{
    color: #ff377c;
}

p
{
    margin-bottom: 10px;
}

h1
{
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: bold;
}

h2
{
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
}

.menu
{
    margin-bottom: 0px;
    text-align: center;
    color: #999;
}

    .menu a
    {
        color: #999;
    }

    .menu a.active
    {
        font-weight: bold;
    }


/* Showcase
-------------*/

#awOnePageButton .view-slide
{
    display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
    height: 300px; /* Same as showcase javascript option */
    overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
    /**/
}

/* Container when content is shown in slider */
.showcase
{
    position: relative;
    margin: 0px;
}

    .showcase-content-container
    {
        background-color: #000;
    }

    /* Navigation arrows */
    .showcase-arrow-previous, .showcase-arrow-next
    {
        position: absolute;
        background: url('../images/arrows.png');
        width: 40px;
        height: 40px;
        top: 110px;
        cursor: pointer;
    }

    .showcase-arrow-previous
    {
        left: -60px;
    }

    .showcase-arrow-previous:hover
    {
        background-position: 0px -34px;
    }

    .showcase-arrow-next
    {
        right: -56px;
        background-position: -34px 0;
    }

    .showcase-arrow-next:hover
    {
        background-position: -34px -34px;
    }

    /* Content */
    .showcase-content
    {
        background-color: #000;
        text-align: center;
    }

        .showcase-content-wrapper
        {
            text-align: center;
            height: 300px;
            width: 740px;
            display: table-cell;
            vertical-align: middle;
        }


        /* Styling the caption */
        .showcase-caption
        {
            color: #000;
            padding: 8px 15px;
            text-align: left;
            position: absolute;
            left: 400px; top: 10px; 
            display: none;
            background-image: url(../images/white-opacity-80.png);
        }

        showcase-caption2
        {
            color: #000;
            padding: 8px 15px;
            text-align: left;
            position: absolute;
            left: 400px; top: 10px; 
            display: none;
            background-image: url(../images/white-opacity-80.png);
        }

    .showcase-onepage .showcase-content
    {
        margin-bottom: 5px;
    }

    /* Button Wrapper */
    .showcase-button-wrapper
    {
        clear: both;
        margin-top: 10px;
        text-align: right;
    }

        .showcase-button-wrapper span
        {
            margin-right: 0px;
            padding: 0px 2px 0px 2px;
            cursor: pointer;
            font-size: 16px;
            color: #444444;
        }

        .showcase-button-wrapper span.active
        {
            color: #fff;
        }

    /* Thumbnails */
    .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
    {
        background-color: #000;
    }

    .showcase-thumbnail-wrapper
    {
        overflow: hidden;
    }

        .showcase-thumbnail
        {
            width: 120px;
            height: 90px;
            cursor: pointer;
            border: solid 1px #333;
            position: relative;
        }

            .showcase-thumbnail-caption
            {
                position: absolute;
                bottom: 2px;
                padding-left: 10px;
                padding-bottom: 5px;
            }

            .showcase-thumbnail-content
            {
                padding: 10px;
                text-align: center;
                padding-top: 25px;
            }

            .showcase-thumbnail-cover
            {
                background-image: url(../images/black-opacity-40.png);
                position: absolute;
                top: 0; bottom: 0; left: 0; right: 0;
            }

        .showcase-thumbnail:hover
        {
            border: solid 1px #999;
        }

            .showcase-thumbnail:hover .showcase-thumbnail-cover
            {
                display: none;
            }

        .showcase-thumbnail.active
        {
            border: solid 1px #999;
        }

            .showcase-thumbnail.active .showcase-thumbnail-cover
            {
                display: none;
            }

    .showcase-thumbnail-wrapper-horizontal
    {
        padding: 10px;
    }

        .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
        {
            margin-right: 10px;
            width: 116px;
        }

    .showcase-thumbnail-wrapper-vertical
    {
        padding: 10px;
    }

        .showcase-thumbnail-wrapper-vertical .showcase-thumbnail
        {
            margin-bottom: 10px;
        }

    .showcase-thumbnail-button-backward,
    .showcase-thumbnail-button-forward
    {
        padding: 7px;
        cursor: pointer;
    }

    .showcase-thumbnail-button-backward
    {
        padding-bottom: 0px;
        padding-right: 0px;
    }

        .showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
        .showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
        .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
        .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
        {
            background-image: url(../images/arrows-small.png);
            background-repeat: no-repeat;
            display: block;
            width: 17px;
            height: 17px;
        }

        .showcase-thumbnail-button-backward .showcase-thumbnail-vertical
        {
            background-position: 0 -51px;
            margin-left: 55px;
        }
        .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
        {
            background-position: -17px -51px;
        }

        .showcase-thumbnail-button-forward .showcase-thumbnail-vertical
        {
            background-position: 0 -34px;
            margin-left: 55px;
        }
        .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
        {
            background-position: -17px -34px;
        }

        .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
        {
            background-position: 0 -17px;
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
        {
            background-position: -17px -17px;
        }

        .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
        {
            background-position: 0 0;
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
        {
            background-position: -17px 0;
        }

        /* Hide button text */
        .showcase-thumbnail-button-forward span span,
        .showcase-thumbnail-button-backward span span
        {
            display: none;
        }



/* Clear (used for horizontal thumbnails)
-------------------------------------------*/

.clear
{
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    float: none;
}
</code></pre>

<p>However, there's also a jquery.min.js and a jquery.aw-showcase.js file which contain too much code for me to copy and paste here and have a lot of code regarding captions, so I fear the solution may be in there. Any help is appreciated.</p>

<p>Thank you!</p>
