jssor - Adding action buttons to a caption

Question

Great api, clean and easy to use.

Question, how do I make it so I can include action items in a caption bar? I'd like to add buttons like the ability to remove an image etc.

I tried setting the slider height to 300, with image @ 250 and caption @50, but with overflow: hidden on the slides attribute, it hides the caption bar.

---

Update

RedactorPlugins._imageManager = function()
{
return {

    renderImages: function(\$el, payload)
    {
        var html = '';

        html += '<div id="slider-1-wrap" style="position: relative; top: 0px; left: 0px; margin: auto; width: 600px; height: 300px;">';
        html += '    <div u="slides" style="cursor: move; position: absolute; left: 0px; to; width: 600px; height: 300px; overflow:hidden;">';
        html += '        <div>';
        html += '            <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
        html += '            <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
        html += '                <span style="cursor:pointer;" id="test1">Slot #1</span>';
        html += '            </div>';
        html += '        </div>';
        html += '        <div>';
        html += '            <img src="http://www.engraversnetwork.com/files/placeholder.jpg" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 250px;" />';
        html += '            <div style="position: absolute; top: 250px; left: 0px; width: 600px; height: 50px;">';
        html += '                <span style="cursor:pointer;" id="test2">Slot #2</span>';
        html += '            </div>';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';

        $('#test1, #test2').click(function() {
            console.log('hai');
        });

        var options =  {};

        \$el.append(html);

        var jssor_slider1 = new \$JssorSlider\$('slider-1-wrap', options);
    }, 
}}

When I click on the slot # text, I keep getting this error: Uncaught TypeError: elmt.getAttribute is not a function

Answer 1

Fixed it with hack :(

function Attribute(elmt, name, value) {

    // @HACK: Be careful when updating api...
    if (undefined === elmt.tagName) {

        elmt = CreateElement('DIV');

        $(elmt).attr('class', 'created');
    }

    if (value == undefined)
        return elmt.getAttribute(name);

    elmt.setAttribute(name, value);
}