How to set the values in a Jquery function

Merged with How to make string as an Array Object in JQuery.

I am using JQuery.

I have got below jQuery as a new design and it is hardcoded.

Hardcoded JQuery with image1

$('.slideshow').liveBanner([
    {"img_src":"/english/images/spa.jpg",
    "img_title":"Enjoy a refreshing shower at 43,000 feet",
    "img_alt":"Enjoy a refreshing shower at 43,000 feet",
    "img_height":"326",
    "img_width":"980",
    "header":"Enjoy a refreshing shower at 43,000 feet",
    "subheader":"One of many gro开发者_JAVA百科undbreaking amenities",
    "bg_color":"",
    "url_href":"1"}
],{"autostart":false,
    "pause_time":5500,
    "random":false});

I tried to make it little dynamic as these values will be according to each page, so sometime there will be 3 images and sometime there will be 2 image or may be 1. In above I have just taken 1 for example.

I wrote below code to achieve all the above values dynamic using Jquery code below:

var rotationImagelength = $('#RotationImages input[type=hidden]').length; //Getting the length of the Rotation Image Input type hidder
        var ImageDetail=""; 
        var $addDetails="";
        var fromPageInput = $("<input>").attr("id", "mainHidden").attr("type", "hidden").attr("name", "fromPage").val(ImageDetail); //Generating the dynamic input type hidden  

        $('#RotationImages input[type=hidden]').each(function(index,element) //Loop for all the input type hidden in RotationImage DIV
        {   

            if(index != rotationImagelength - 1) //Loop for checking not the last input hidden, we are adding extra Comma(,)
            {                    
                ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"},';                                                  
                $addDetails += ImageDetail;
            }    
            else //Generating HTML for the last input hidden
            {
                ImageDetail = '{"img_src":"'+ $(element).attr("src")+'", "img_title":"'+ $(element).attr("title")+'","img_alt":"'+ $(element).attr("alt")+'", "img_height":"'+ $(element).attr("height")+'","img_width":"'+ $(element).attr("width")+'","header":"'+ $(element).attr("header")+'","subheader":"'+ $(element).attr("subheader")+'","bg_color":"'+ $(element).attr("color")+'","url_href":"'+ $(element).attr("href")+'"}';                                                            
                $addDetails += ImageDetail;
            }                

            $(fromPageInput).val($addDetails); //Adding full values in the dynamic input hidden created above    


        });
         $("#RotationImages").append($(fromPageInput)); //Appending to the RotationImage DIV so that we can easily use in JQuery.

I am getting my all the values as required in my dynamic created input hidden (fromPageInput), please see the above, now I want to render these values in below Jquery code, how can add it in my function.

$('.slideshow').liveBanner([

    ($("#RotationImages #mainHidden").attr("value"))

],{"autostart":false,
    "pause_time":5500,
    "random":false});

If I am alerting I am able to get the values how when I am trying to get alone it is not adding the values. Please suggest what approach should I take to do this.

Thanks

EDIT:

Can we use like this but it still not working.

var test = ($("#RotationImages #mainHidden").attr("value"));      
    $('.slideshow').liveBanner([test],{"autostart":false,"pause_time":5500,"random":false});

And my .liveBanner function is below

    $.fn.liveBanner = function(images,optional_options) 
    { 
});

It is looking for an array