Create an array of objects from img element attributes, and output values, jquery

Question

Right now I have a fullscreen plug-in working with static urls, but I'd like to replace those with dynamic image data that a CMS outputs to the page.

Here is a sample of the HTML output from the CMS:

<ul class="large-gallery">

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl351.jpg" data-full-src="http://www.domain/imageurl361.jpg" alt="Image Title 4725">
</a>
</li>

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl354.jpg" data-full-src="http://www.domain/imageurl3721.jpg" alt="Image Title 73365">
</a>
</li>

<li>
<a href="http://www.domain.com/urlpath34">
<img src="http://www.domain/imageurl356.jpg" data-full-src=v"http://www.domain/imageurl3567.jpg" alt="Image Title 4635">
</a>
</li>

</ul>

Here is the Javascript:

<script type="text/javascript">// <![CDATA[

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   5000,       // Length between transitions
                                    new_window              : 0,
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1200,       // Speed of transition

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images
{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1',  url : 'http://www.domain.com/manually-inputted-url-1'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2',  url : 'http://www.domain.com/manually-inputted-url-2'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3',  url : 'http://www.domain.com/manually-inputted-url-3'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4',  url : 'http://www.domain.com/manually-inputted-url-4'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5',  url : 'http://www.domain.com/manually-inputted-url-5'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6',  url : 'http://www.domain.com/manually-inputted-url-6'},                                             ]

            });
        });
// ]]></script>

What I'd like to do.

I'd like to replace this code in the javascript;

{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1',  url : 'http://www.domain.com/manually-inputted-url-1'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2',  url : 'http://www.domain.com/manually-inputted-url-2'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3',  url : 'http://www.domain.com/manually-inputted-url-3'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4',  url : 'http://www.domain.com/manually-inputted-url-4'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5',  url : 'http://www.domain.com/manually-inputted-url-5'},
{image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6',  url : 'http://www.domain.com/manually-inputted-url-6'}, 

to be something like this:

for each bigImage, output this 
{ image : 'bigImage.imgUrl', title : ' bigImage.title ', url : ' bigImage.linkUrl '},

I was thinking about creating an array of objects for bigImages, and then call each object as bigImage. but im not really sure the best approach, and also I'm curious how to format it to have it work within the plug-in script.

Answer 1

What you need is a function that takes a collection of img elements as input and returns the desired array as output.

I might write something like this:

var slidesArray = function() {

  var array = [];

  $("ul.large-gallery li img").each(function() {

    var arrayItem = { image: $(this).attr('src'), title: $(this).attr('alt'), url: $(this).parent('a').attr('href') };

    array.push(arrayItem);

  });

  return array;
}

And then you can say in your configuration hash:

slides: slidesArray()

Answer 2

var slds = [];

$('.large-gallery a').each(function(i,obj){
    var $this = $(obj),
        $thisImg = $this.find('img');
    slds.push({
        image: $thisImg .data('full-src'),
        title: $thisImg .prop('title'),
        url: $this.prop('href')
    })
});

Then simply supply slds as the source to slides

slides: slds