jQuery/JS：隨機圖像與文字？如何添加文本？

Question

我已經下載了一個輸出數組內的隨機圖像的JavaScript。這一切都很好，但我想添加一個標題變量，將其作爲圖像替代文本放入，同時也顯示在HTML頁面上。

這是JavaScript代碼我使用：

(function($) { 

    $.randomImage = { 
     defaults: { 

      path: 'images/', 
      myImages: ['image01.png', 'image02.png', 'image03.png', 'image04.png ', 'image05.png ', 'image06.png '] 

     } 
    } 

    $.fn.extend({ 
     randomImage: function(config) { 

      var config = $.extend({}, $.randomImage.defaults, config); 

      return this.each(function() { 

       var imageNames = config.myImages; 

       var imageNamesSize = imageNames.length; 
       var lotteryNumber = Math.floor(Math.random() * imageNamesSize); 
       var winnerImage = imageNames[lotteryNumber]; 
       var fullPath = config.path + winnerImage; 

       $(this).attr({ 
        src: fullPath, 
        alt: winnerImage 
       }); 

      }); 
     }; 
    }); 
})(jQuery); 

我怎麼能說..
如果隨機image03.png，然後變量imageTitle =「這是馬的形象」？ ??

然後在我的HTML代碼中，我可以打印出imageTitle。

謝謝 真誠 - Mestika

Answer 1

添加另一個陣列

(function($) { 

    $.randomImage = { 
     defaults: { 

      path: 'images/', 
      myImages: ['image01.png', 'image02.png', 'image03.png', 'image04.png ', 'image05.png ', 'image06.png '], 
      myTitles: ['t1','t2','t3','t4','t5','t6'] 

     } 
    } 

    $.fn.extend({ 
     randomImage: function(config) { 

      var config = $.extend({}, $.randomImage.defaults, config); 

      return this.each(function() { 

       var imageNames = config.myImages; 

       var imageNamesSize = imageNames.length; 
       var lotteryNumber = Math.floor(Math.random() * imageNamesSize); 
       var winnerImage = imageNames[lotteryNumber]; 
       var titleText = config.myTitles[lotteryNumber]; 
       var fullPath = config.path + winnerImage; 

       $(this).attr({ 
        src: fullPath, 
        alt: titleText             
       }); 

      }); 
     }; 
    }); 

})(jQuery); 

Answer 2

您可以添加一個 「圖像選擇」 回調很輕鬆了。

首先，你需要改變的myImages格式，包括圖像名稱：

myImages: [ 
    { img: 'image01.png', title: 'Pancakes' }, 
    { img: 'image02.png', title: 'More pancakes' }, 
    { img: 'image03.png', title: 'This is an image of a horse eating pancakes' }, 
    //... 
] 

然後你更新這個東西：

var winnerImage = imageNames[lotteryNumber]; 
var fullPath = config.path + winnerImage; 
$(this).attr({ 
    src: fullPath, 
    alt: winnerImage 
}); 

關注新myImages格式：

var winnerImage = imageNames[lotteryNumber]; 
var fullPath = config.path + winnerImage.img; 
$(this).attr({ 
    src: fullPath, 
    alt: winnerImage.title 
}); 

現在你有一個標題，並添加回調可以可以通過加入以下內容來完成：

if(config.imageChosen) 
    config.imageChosen(fullPath, winnerImage.title); 

右後$(this).attr({的東西。

一旦這項工作到位，你在回調函數發送當你調用插件：

$(selector_of_your_choice).randomImage({ 
    myImages: [ /* The images as above */ ], 
    imageChosen: function(imagePath, imageTitle) { 
     /* Put the title, imageTitle, where ever you want it */ 
    } 
}); 

Answer 3

在這裏你去：

(function($) { 

    $.randomImage = { 
     defaults: { 

      path: 'http://static.php.net', 
      myImages: [{ 
       src: '/www.php.net/images/php.gif', 
       title: "This is a picture of a monkey"}, 
      { 
       src: '/www.php.net/images/php.gif', 
       title: "This is a picture of a squirrel"} 
             ] 
     } 
    } 

    $.fn.extend({ 
     randomImage: function(config) { 
      var config = $.extend({}, $.randomImage.defaults, config); 

      return this.each(function() { 
       var imageNames = config.myImages; 
       var imageNamesSize = imageNames.length; 
       var lotteryNumber = Math.floor(Math.random() * imageNamesSize); 
       var winnerImage = imageNames[lotteryNumber].src; 
       this.title = config.myImages[lotteryNumber].title; 
       $(this).after("<p>" + this.title + "</p>"); 
       var fullPath = config.path + winnerImage; 

       $(this).attr({ 
        src: fullPath, 
        alt: winnerImage 
       }); 
      }); 
     } 
    }); 
})(jQuery); 

$("#test").randomImage(); 

測試標記：

<img id="test"/> 

小提琴：http://jsfiddle.net/C7hRT/1/