Add atrributes from image to javascript array and display

Question

I need to add the attributes from the images inside this div to an JS array and run Supersized, with these images:

       <div id="dgaslides">
            <img src="img/temp/topimg01.jpg" title="Image 1">
            <img src="img/temp/topimg02.jpg" title="Image 2">
            <img src="img/temp/topimg03.jpg" title="Image 3">
        </div>

My JS:

jQuery(function($){

var img_length = $('#dgaslides img').length-1;

var dgaslides = [];

$('#dgaslides img').each( function(i){

    var src     = $(this).attr('src');
    var title   = $(this).attr('title');

    dgaslides.push("{image : '" + src + "', title : '" + title + "'}");

    if(img_length == i){

        $.supersized({

            // Functionality
            slide_interval          :   3000,       // Length between transitions
            transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed        :   700,        // Speed of transition
            horizontal_center       :   1,          // Centers image horizontally. When turned off, the images resize/display from the left of the page.


            // Components                           
            slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides                  :   dgaslides

        });

    }
}); });

It does work, as im getting 3 images in my output, but the link (src) is "Undefined", and the title isn't there either?

The right way to hardcode it is:

var dgaslides = [           // Slideshow Images
                {image : 'img/temp/topimg01.jpg', title : 'Reception'},
                {image : 'img/temp/topimg02.jpg', title : 'Reception 2 og noget mere tekst her'},  
                {image : 'img/temp/topimg03.jpg', title : 'Reception 3'}
            ];

Can anyone help me figuring out what i'm doing wrong?

Chandu Dexter · Accepted Answer · 2013-05-06 03:32:43Z

0

You could use jQuery's map method to simplify the task. Following is the code.

jQuery(function ($) {
    var dgaslides = $('#dgaslides img').map(function () {
      return {
        image: $(this).attr('src'),
        title: $(this).attr('title')
      };
    });
    $.supersized({
      slide_interval: 3000,
      transition: 1,
      transition_speed: 700,
      horizontal_center: 1,                   
      slide_links: 'blank',
      slides: dgaslides
    });
});

Hope this helps.

answered May 6, 2013 at 3:32

Chandu Dexter

4562 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crave Over a year ago

This was clean and simple. Thanks Chandu Dexter

Musa · Accepted Answer · 2013-05-06 02:25:21Z

0

I think you need to pass an array of objects and not an array of strings.

dgaslides.push({image : src, title : title });

answered May 6, 2013 at 2:25

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Crave Over a year ago

You're right Musa! Thanks! Actually i just found another question regarding this: stackoverflow.com/questions/16286425/…

adnrw · Accepted Answer · 2013-05-06 02:30:06Z

0

You're saving the strings to the array rather than the objects.

Here's a JSFiddle with a modified version of your code (without the supersized function) that works as intended: http://jsfiddle.net/SBuXF/

Main change: dgaslides.push({image : src, title : title});

I've output the generated array to the console, followed by your hardcoded one - they're identical.

Edit: Your hardcoded titles didn't match the HTML, so the content of the two arrays is slightly different, but they are both formatted correctly. A corrected fiddle is here: http://jsfiddle.net/SBuXF/1/

answered May 6, 2013 at 2:30

adnrw

1,0406 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add atrributes from image to javascript array and display

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related