Home/ Questions/Q 9270541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T15:23:45+00:00

So basically I have an array that contains an image link and a description

  • 0

So basically I have an array that contains an image link and a description in an array which is then to be called to load the element in the slide show. However it is not setup as a loop thus making it inefficent when calling and have to manually enter each array index to get everything I need to get the image to be called to the slideshow. See below: 

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/supersized.shutter.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/colorbox.css" type="text/css" media="screen" />

    <script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.easing.min.js"></script>
    <script type="text/javascript" src="scripts/supersized.3.2.7.js"></script>
    <script type="text/javascript" src="scripts/supersized.shutter.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox.parentsetup.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            //image url, image title
            var data = [
                ['images/events/2012/bimmer_cruise/image_01.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_02.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_03.jpg', ''],
                ['images/events/2012/bimmer_cruise/image_04.jpg', '']

                ];

            $.supersized({

                // Functionality
                slide_interval  :   3000,       // Length between transitions
                transition      :   3,      // 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

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

                slides          :   [           // Slideshow Images

                    {image : data[0][0], title : data[0][1], 
                     thumb : data[0][0], 
                     url   : 'colorbox_onclick("' + data[0][0] + '");'},

                    {image : data[1][0], title : data[1][1], 
                     thumb : data[1][0], 
                     url   : 'colorbox_onclick("' + data[1][0] + '");'},

                    {image : data[2][0], title : data[2][1], 
                     thumb : data[2][0], 
                     url   : 'colorbox_onclick("' + data[2][0] + '");'}, 

                    {image : data[3][0], title : data[3][1], 
                     thumb : data[3][0], 
                     url   : 'colorbox_onclick("' + data[3][0] + '");'}

    ]
            });
        });

I was thinking of doing something like the below instead but can’t figure it out and neither can my web guy. He said its impossible but im stubborn lol 

                        for (var i = 0; i < data.length; i++) {

                            {image : data[i][0], title : data[i][1], 
                            thumb : data[i][0], 
                            url   : 'colorbox_onclick("' + data[i][0] + '");'},
                        }

Any help/insight is appreciated 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    slides = [];
for (var i = 0; i < data.length; i++) {
    slides.push({image : data[i][0], title : data[i][1], 
                 thumb : data[i][0], 
                 url   : 'colorbox_onclick("' + data[i][0] + '");'}
                });
}

    Then use slides in the options to $.supersized.

    • 0