Supersized JavaScript slider add description

Question

I added description in supersized slider. It works but the div containing the description is empty when I check the code.

in index.html:

        <div id="slidedescription"></div>
        ....


        slides : [ // Slideshow Images
        {image : 'img1.jpg', description : '<div"><ul><li><a href="">Text</a></li></ul></div>', title : '<h3>Text</h3>', thumb : 'img1Thumb.jpg', thumbTitle : 'Text'},
        {image : 'img2.jpg', description : '<div><ul><li><a href="">Text</a></li></ul></div>', title : '<h3>Text</h3>', thumb : 'img2Thumb.jpg', thumbTitle : 'Text'}, 
        {image : 'img3.jpg', description : '<div><ul><li><a href="">Text</a></li></ul></div>', title : '<h3>Text</h3>', thumb : 'img3Thumb.jpg', thumbTitle : 'Text'}
       ]
         });
        });

in supersized.shutter.min.js:

          afterAnimation:function(){...

          if(a(vars.slide_description).length){
(api.getField("description"))?a(vars.slide_description).html(api.getField("description")):a(vars.slide_description).html("")
           }

           a.supersized.themeVars={ ...
           slide_description:"#slidedescription",

The problem is: I would like the output to be in div element in the HTML page result but now:

         <div id="slidedescription"> </div>

is empty and I would like the result to be:

        <div id="slidedescription">
        <div ><ul><li><a href="">Text</a></li></div>
        <div ><ul><li><a href="">Text</a></li></div>
        <div ><ul><li><a href="">Text</a></li></div>
        </div>

Is it possible to be achieved? I guess it is but would you help me with this?

Best regards.

Answer 1

You should add the appropriate part of the following code to theme\\supersized.shutter :

afterAnimation : function(){
        if (api.options.progress_bar && !vars.is_paused) theme.progressBar();
        var description = api.getField("description");
        if (typeof description != 'undefined') {
            $('#slidedescription').html(description);
        } else {
            $('#slidedescription').html('');
        }
    },

Note that you may also need to edit path in the file demo.html from

<script type="text/javascript" src="theme/supersized.shutter.min.js"> </ script> 

to

<script type="text/javascript" src="theme/supersized.shutter.js"> </ script>

Also, you should add part above code to '_init: function ()' that description was seen after running gallery.

Answer 2

Do you mean something like this? Have a look at the source, if it is of any help: http://www.krijnen.com/opcafe.shtml