1

我对 JS 相当陌生，对 jQuery 不是很熟悉，但我想试一试动态调用slimbox 的多图像功能。

例如，在我的网站上有一个照片滑块随机循环显示 3 张图像，我希望 slimbox 为第一张显示多 2 张图像，在最后一张显示多张图像。这意味着 slimbox 将在幻灯片中显示总共 6 张图像。

因此，如果您需要它，下面是详细的演练：当用户访问我的网站时，用户将看到一个 div 块，该块一次显示 1 张图像。照片滑块中的图像将旋转到下一个（随机加载的 3 个）。当用户点击图片时，用户将触发 slimbox（轻量级灯箱），更大的幻灯片将占据屏幕（使背景变暗）。通过 slimbox，用户将看到最多 6 张图像循环。

为了创建动态变量，我尝试在 FOR 循环中使用 EVAL，但在运行 jQuery 时失败。不过，EVAL 在循环之外工作。我不确定要使用哪个其他功能。让我们深入研究代码...

通过 JS 调用 slimbox：

// usage as shown for multi-image slideshow.  yes, there are arrays within an array
jQuery.slimbox([["image","desc"], ["image","desc"], ["image","desc"]], startAtImage);

// or simplified further
jQuery.slimbox([[array1], [array3], [array2]], startAtImage);

// after appending the images to select the first and last images 
jQuery.slimbox([[array1], [array4], [array5], [array3], [array2], [array6]], startAtImage);

这是我动态调用 slimbox 函数的尝试：

var imgAlbum = "summer";

var arrayGiven = [1,3,2];       // randomized image order given

var img1 = [4,5];               // registering images to be appended -- aiming for [1,4,5]
var img2 = [6];                 // registering images to be appended -- aiming for [2,6]

var desc1 = "Description #1";   // unique descriptions
var desc2 = "Description #2";
var desc3 = "Description #3";
var desc4 = "Description #4";
var desc5 = "Description #5";
var desc6 = "Description #6";

var arrayExtended = arrayGiven;

for(var i=1; i<=3; i++){                                            // cycle through arrayGiven and append images
    var imgLocate = i;
    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // locating array index number of a specific image.  if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4, and so forth
    var imgAfter = imgAtIndex + 1;                                  // allows appending to selected image at index

    eval("var imgCurrent = img" + imgLocate + ";");                 // creating dynamic variable
    if(imgCurrent != null){
        arrayExtended.splice(imgAfter, 0, imgCurrent); 
    }       
}   // alert(arrayExtended) should be [1,4,5,3,2,6]

for(var i=1; i<=arrayExtended.length; i++){
    var imgLocate = i;

    eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");    // if imgLocate = 1, then var array1 = ['img/summer/1.jpg',desc1];
                                                                                                                    // array1 array2 array3 array4 array5 array 6 ... now defined
}

var arrayMain = [];

for(var i=1; i<=arrayExtended.length; i++){                         // must wait for arrays to be built before adding to arrayMain
    var atIndex = i - 1;

    var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       // if imgLocate = 1, then imgAtIndex = 0 , if 2 then 4

    eval("arrayMain.push('[' + array" + arrayExtended[atIndex] + " + ']');");
}

var imgClicked = 0;                                                 // clicked on image within arrayExtended index 0
var startAtImage = imgClicked;                                      // slimbox slideshow will start on 1.jpg

jQuery.slimbox("[" + mainArray + "]",startAtImage);

最后希望得到以下结果：

jQuery.slimbox([["img/summer/1.jpg","Desciption #1"], ["img/summer/4.jpg","Desciption #4"], ["img/summer/5.jpg","Desciption #5"], ["img/summer/3.jpg","Desciption #3"], ["img/summer/2.jpg","Desciption #2"]], ["img/summer/6.jpg","Desciption #6"], 0);

任何帮助或建议将不胜感激！有很多东西要学。

2011 年 8 月26 日更新 ，根据建议更改了结构。还将更多图像和组添加到数组中，以更好地说明所需的功能。尝试从 img 对象调用图像组（1、2、7）时出现错误：

        var imgAlbum = "summer";

        var arrayGiven = [1,3,2,7,11];      // randomized image order given

        var img = {
          1: [4,5],
          2: [6],
          7: [10,8,9]
        };

        var desc = {
          1: 'Description #1',
          2: 'Description #2',
          3: 'Description #3',
          4: 'Description #4',
          5: 'Description #5',
          6: 'Description #6',
          7: 'Description #7',
          8: 'Description #8',
          9: 'Description #9',
          10:'Description #10',
          11:'Description #11'
        };

        var arrayExtended = arrayGiven.slice();

        for(var i=1; i<=arrayGiven.length; i++){                                        
            var imgLocate = i;
            var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       
            var imgAfter = imgAtIndex + 1;                                  
            var imgCurrent = img[imgAfter];

            if(imgCurrent != null){
                arrayExtended.splice(imgAfter, 0, imgCurrent); 
            }       
            //alert(imgCurrent);    // shows 4,5 undefined undefined undefined undefined
        }   //alert(arrayExtended);// shows 1,4,5,3,2,6,7,10,8,9,11
        var imgArray = {};
        for(var i=1; i<=arrayExtended.length; i++){
            var imgLocate = i;
            var atIndex = i - 1;

            imgArray[imgLocate] = ['imgs/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];
        }

        var mainArray = [];

        for(var i=1; i<=arrayExtended.length; i++){                         
            var imgLocate = i;                  
            var atIndex = i - 1;

            mainArray.push(imgArray[arrayExtended[atIndex]]);   
            //alert(imgArray[arrayExtended[atIndex]]); // shows (simplified) 1.jpg,Desc#1 undefined 3.jpg,Desc#3 2.jpg,Desc#2 undefined undefined

        }

        var imgClicked = 0;                                                 
        var startAtImage = imgClicked; 

jQuery.slimbox(mainArray,startAtImage);

更新了 2011 年 8 月 30 日最终解决方案 修复应用并从生产代码中添加了随机化器。结果是准确的。如果您打算使用随机化器，我建议将要附加的图像保持在 getRandomArray 范围之外，除非您希望看到重复项。

感谢大家的大力支持！ 

function getRandomArray(min,max){
            var A= [];
            while(max>= min) A.push(max--)    
            A.sort(function(){return .5- Math.random()});  
            return A;
        }
        var randomness = getRandomArray(1,11).slice();
        var leadingZeroArray = randomness.slice();
        leadingZeroArray.unshift("0");          // was needed for my project, but if removed, everything else will need to be re-adjusted

        var arrayGiven = randomness.slice();    // or you can plug in -> var arrayGiven = [1,3,2,7,11]; for original example

        var imgAlbum = "summer";
        var img = {
          1: [4,5],
          2: [6],
          7: [10,8,9]
        };
        var desc = {
          1: 'Description #1',
          2: 'Description #2',
          3: 'Description #3',
          4: 'Description #4',
          5: 'Description #5',
          6: 'Description #6',
          7: 'Description #7',
          8: 'Description #8',
          9: 'Description #9',
          10:'Description #10',
          11:'Description #11'
        };

        var arrayExtended = arrayGiven.slice();

        for(var i=0; i<arrayGiven.length; i++){                                         
            var imgLocate = arrayGiven[i]; 
            var imgAtIndex = jQuery.inArray(imgLocate,arrayExtended);       
            var imgAfter = imgAtIndex + 1;                                  
            var imgCurrent = img[imgLocate];

            if(imgCurrent != null){
                if(imgCurrent.length > 0){
                    for(var j=imgCurrent.length-1; j>-1; j--){
                        var imgMore = imgCurrent[j];
                        arrayExtended.splice(imgAfter, 0, imgMore); 
                    }
                }
                else{arrayExtended.splice(imgAfter, 0, imgCurrent); }
            }
        }   
        var imgArray = {};
        for(var i=1; i<=arrayExtended.length; i++){
            var imgLocate = i;
            var atIndex = i - 1;

            imgArray[imgLocate] = ['images/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];
        }
        var mainArray = [];
        for(var i=1; i<=arrayExtended.length; i++){                         
            var imgLocate = i;                  
            var atIndex = i - 1;

            mainArray.push(imgArray[arrayExtended[atIndex]]);   
        }

        var imgClickedOn = 5;
        var imgAtIndex = jQuery.inArray(imgClickedOn,arrayExtended);

        jQuery.slimbox(mainArray,imgAtIndex);
4

4 回答 4

4

不要使用多个 var ，而是img使用数组或对象。

var img = {
  1: [4,5],
  2: [6]
};

然后代替eval("var imgCurrent = img" + imgLocate + ";");，您可以执行以下操作：

var imgCurrent = img[imgLocate];

您可以为以下内容做同样的事情：

eval("var array" + imgLocate + " = ['img/" + imgAlbum +  "/" + imgLocate + ".jpg',desc" + imgLocate + "];");

创建一个对象并将数组放入其中：

var desc = {
  1: 'Description #1',
  2: 'Description #2',
  3: 'Description #3',
  4: 'Description #4',
  5: 'Description #5',
  6: 'Description #6'
};
var imgArray = {};
imgArray[imglocate] = ['img/'+imgAlbum+'/'+imgLocate+'.jpg', desc[imgLocate]];

编辑：尝试将var imgLocate = i;内部更改for(var i=1; i<=arrayGiven.length; i++){为var imgLocate = arrayGiven[i];.

于 2011-08-24T18:38:49.590 回答
2

全局变量是window对象的成员，所以你可以这样做：

var imgCurrent = window["img" + imgLocate];

但是，使用这样的动态变量名称并不是一个好习惯。你应该把值放在一个数组中：

var img = [
  [4,5],
  [6]
];

现在您可以访问数组项：

var imgCurrent = img[imgLocate];

但是请注意，数组索引从 0 开始，而不是 1。

于 2011-08-24T18:35:33.340 回答
1

一些快速说明：

  1. 请不要使用eval(). 需要它的情况非常非常少，并且它具有性能和安全性影响。

  2. 您发现 JavaScript 没有“变量变量”（通过名称获取或设置变量的能力），这就是您不得不求助于eval(). 当您需要从一组中查找某些内容时，不要使用一堆编号的变量。尝试使用数组或对象。

  3. 当您将 JavaScript 中的对象分配给变量时，它们不会被复制。线

    var arrayExtended = arrayGiven;

    不会复制arrayGiven—arrayExtended最终成为指向同一数组的变量。因此，当您在 中更改某些内容时arrayExtended，它也会在 中更改它arrayGiven。如果您需要在 JavaScript 中复制数组，请.slice()不带参数使用：

    var arrayExtended = arrayGiven.slice();

    JavaScript 中的其他一些东西，比如对象，更难复制。

  4. 你想在这里做什么？（mainArray已经是一个数组）这将创建一个字符串，它是一个“[”，后跟mainArray（数组中的每个项目以逗号分隔）的字符串表示，然后是“]”。Slimbox 不知道如何处理它。

    jQuery.slimbox("[" + mainArray + "]",startAtImage);

    如果您确实想将某些东西包装在一个数组中，只需像上面那样在它周围加上括号：

    [mainArray];

我认为你的主要问题是"[" + mainArray + "]"。有了这些提示，您应该能够使您的代码工作（并且，没有eval()）。但是，我也想向您展示我解决这个问题的方法。它在下面。

我将所有图像的名称和描述存储在一个数组中。因为 JavaScript（和许多其他编程语言）中的数组从 0 而不是 1 开始，所以我从指定顺序的数组中的所有图像编号中减去 1。

var album = "summer",
    images = [
        [
            { name: "1", description: "Description #1" },
            { name: "4", description: "Description #4" },
            { name: "5", description: "Description #5" }
        ],
        [
            { name: "2", description: "Description #2" },
            { name: "6", description: "Description #6" }
        ],
        [
            { name: "3", description: "Description #3" }
        ]
    ],
    order = [0, 2, 1],
    startAtImage = 0,
    slimboxImages = Array.prototype.concat.apply([], order.map(function(id){ return images[id]; }))
        .map(function(image){
            return [ 'img/' + album + '/' + image.name + '.jpg', image.description];
        });

jQuery.slimbox(slimboxImages, startAtImage);
于 2011-08-25T03:25:47.663 回答
0

任何你不能做的理由

    var imgCurrent = 'img' + imgLocate;

? 从脚本中动态生成/执行代码基本上不是一个好主意。调试几乎是不可能的，而且你甚至没有真正做任何没有 eval 就无法完成的事情。

于 2011-08-24T18:30:00.100 回答