jquery plugin pass variable inside config settings - jquery-plugins

Question

I would like to pass an array in my plugin defaults config settings. I am trying to give the user, the option to add as many title and src variable as they like for instance:
desktop_xl: {
"title":"beach",
"src":"http://images.smh.com.au/2013/02/25/4061249/art-Whitehaven-Beach-620x349.jpg"
},
{
"title":"sunset",
"src":"https://lh5.googleusercontent.com/-Oh0HlfM31BQ/TlXHejUNpeI/AAAAAAAABiI/tQbJJEGEOnU/s400/red_sunset_beach.jpg"
}
I have seen this question on stack overflow but could not find an answer that works for me.
I did some reading and figured out that I can create an array of objects, it works well only on my index.html page as per the below fiddle, http://jsfiddle.net/michelm/7gS6g/2/
The issue is that I would like to use this array as a config option in my plugin so users can add as many title and src variables as they need, but the array does not work inside the plugin.
When I did console.log(desktop_xl); on my index.html page, it shows as an object.
I read the documentation at http://api.jquery.com/jquery.extend/ and from what I understand I need to merge my objects to pass them as a config option, here is the link to my plugin from my drop box account (js fiddle did not take the https link for some reasons), please see below link to jquery.myplugin.js (random name for now, but will use unique naming convention once I work out the logic):
https://www.dropbox.com/s/boadofib6nggfzp/jquery.myplugin.js
Can anyone help me figure out how to pass this variable in my config option so users can add as many "title" and "src" from the option desktop_xl please?
UPDATE:
I have figured out how to pull array information and append it to my images, however, I still have no idea on how to "link" this to the plugin option settings as I need to give the user the option to add as many images with title as they would like in the option settings.
Here is how I have figured out how to pull data from array:
//create img desktop_xl loop
$.each(desktop_xl, function( index , value ){
$('#container').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
UPDATE 2:
I have done some more work on the plugin, here is the code so far:
;(function($, window, document, undefined){
//define MyjQueryPlugin object with default config settings:
$.MyjQueryPlugin = {
defaults: {
imagecontainer: "#container",
version: "v01"
// add my Arrays to default options here?
// arrays should allow users to add as many images to #container div as they require
// arrays are desktop_xl[] , desktop_l[] , ipad_p[] , mobile_l[], mobile_p[]
}
};
//extend jquery with the plugin
$.fn.extend({
MyjQueryPlugin:function(config) {
//use defaults or properties supplied by user
var config = $.extend({}, $.MyjQueryPlugin.defaults, config );
//append slides
$(config.imagecontainer).append('<div class="imagecontainerfordesktop_xlarray" </div>').css('height', $(window).height() );
// append MyjQueryPlugin sidebar
this.append( '<div id="Mysidebar" class="open">' +
'<p class="review">Version ' + config.version + '- ready for review</p>'+
'<hr>' +
'</div>')
.children()
.css('height', $(window).height() );
//create array of objects
var desktop_xl = [
{
"title":"Homepage", // text for sidebar
"src":"slides/1200/Homepage.jpg"// path to image >= 1200px wide
},
{
"title":"Categories", // text for sidebar
"src":"slides/1200/Categories.jpg"// path to image >= 1200px wide
},
{
"title":"Product description", // text for sidebar
"src":"slides/1200/Product_description.jpg" // path to image >= 1200px wide
}
];
var desktop_l = [
// if array is empty, remove elements from the page
];
var ipad_p = [
{
"title":"Homepage", // text for sidebar
"src":"slides/480/Homepage.jpg" // path to image >= 480px wide
}
];
var mobile_l = [];
var mobile_p = [];
// set Global Variables
var width = $(window).width();
var currHeight = $(window).height();
var ctrl = $(".ctrl");
var ulscreenlia = $('ul.screen li a');
var sidebarlia = $('#MyjQueryPluginsidebar li a');
var sidebar = $("#MyjQueryPluginsidebar");
var ulscreenli = $('ul.screen li');
if (desktop_xl.length === 0) {
ulscreenli.eq(0).hide();
$('div.select_join option[value="xld"]').remove();
}
if (desktop_l.length === 0) {
ulscreenli.eq(1).hide();
$('div.select_join option[value="ld"]').remove();
}
if (ipad_p.length === 0) {
ulscreenli.eq(2).hide();
$('div.select_join option[value="ip"]').remove();
}
if (mobile_l.length === 0) {
ulscreenli.eq(3).hide();
$('div.select_join option[value="ml"]').remove();
}
if (mobile_p.length === 0) {
ulscreenli.eq(4).hide();
$('div.select_join option[value="mp"]').remove();
}
//create img desktop_xl loop
$.each(desktop_xl, function( index , value ){
$('#container .slides-xld').append(
//getting values from array but cannot understand how to pass array(s): desktop_xl, desktop_l, ipad_p, mobile_l, mobile_p inside config option
//And Each arrays should allow user to add multiple images to #container dive
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
//create img ipadp loop
$.each(ipad_p, function( index , value){
$('#container .slides-ipadp').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});
function rundateobject(){
var current_date = new Date ( );
var month_names = new Array ( );
month_names[month_names.length] = "January";
month_names[month_names.length] = "February";
month_names[month_names.length] = "March";
month_names[month_names.length] = "April";
month_names[month_names.length] = "May";
month_names[month_names.length] = "June";
month_names[month_names.length] = "July";
month_names[month_names.length] = "August";
month_names[month_names.length] = "September";
month_names[month_names.length] = "October";
month_names[month_names.length] = "November";
month_names[month_names.length] = "December";
var day_names = new Array ( );
day_names[day_names.length] = "Sunday";
day_names[day_names.length] = "Monday";
day_names[day_names.length] = "Tuesday";
day_names[day_names.length] = "Wednesday";
day_names[day_names.length] = "Thursday";
day_names[day_names.length] = "Friday";
day_names[day_names.length] = "Saturday";
$('#date').html( day_names[current_date.getDay()]
+ ', '
+ month_names[current_date.getMonth()]
+ ' '
+ current_date.getDate()
+ ' '
+ current_date.getFullYear() );
};
//create animation for anchor links with jQuery DOM ready function
$(function(){
$('a').hover(function(){
$(this).animate({
'margin-left':10,
'padding-left':20
},200);
$(this).dequeue();
},
function() {
$(this).animate({
'margin-left':0,
'padding-left':15
},200);
$(this).dequeue();
}
);
});
//on resize browser, adjust elements height
//initialise plugins
$(".nano").nanoScroller();
//initialise functions
rundateobject();
//return the jquery object for chaining
return this;
}// config options
}); // jQuery extend
})(jQuery, window, document);

Answer 1

The answer was given to me on jquery.com by user kbwood.au
defaults: {
imagecontainer: "#container",
version: "v01",
desktop_xl: [] //Array
}
Then in the .each function we need to pass the array as a config.desktop_xl:
//create img desktop_xl loop
$.each(config.desktop_xl, function( index , value ){
$('#container').append(
$("<img />").attr({
id: value.title,
src: value.src,
title: value.title
})
);
});