如何將相關標題添加到不同div中的隨機圖像？

我不知道從哪裏開始這個想法。我使用下面的jQuery來顯示每個頁面加載的隨機圖像。我想擴展它以顯示每個圖像顯示在不同div中的特定標題。如何將相關標題添加到不同div中的隨機圖像？

下面的函數以image1.jpg，image2.jpg等格式輸出一個隨機image.jpg我想我需要每個圖像的標題數組，但我怎樣才能引用數組和輸出該函數中的圖像名稱的標題？

<script> 
(function($){ 

    $.randomImage = { 
     defaults: { 

      path: 'headerimages/', 

      myImages: ['image1.jpg', 'image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg' ]   
     }   
    } 

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

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

       return this.each(function() { 

         var imageNames = config.myImages; 

         var imageNamesSize = imageNames.length; 

         var randomNumber = Math.floor(Math.random()*imageNamesSize); 

         var displayImage = imageNames[randomNumber]; 

         var fullPath = config.path + displayImage; 

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

})(jQuery); 
</script>

從功能的圖像上面的是由HTML <img class="randomheader" src="" alt="image">

的標題將在一個不同的div顯示，即<div class="caption"></div> 爲#caption的CSS很可能是display:none直到jQuery的負載。

這是文檔準備功能：

<script> 
$(document).ready(function(){ 
$('.randomheader').randomImage(); 
}); 
</script>

來源

2013-04-07 markratledge

使用冒號：分隔的標題和圖像例如['your caption 1：image1.jpg'，'your caption 2：image2.jpg']。然後使用JavaScript分離來分隔標題和image.jpg – 2013-04-07 04:43:53

像這樣的東西應該工作：

<script> 
(function($){ 

$.randomImage = { 
    defaults: { 

     path: 'headerimages/', 

     myImages: ['image1.jpg', 'image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg' ], 
     myCaptions: ['caption1', 'caption2','caption3','caption4','caption5','caption6' ]   
    }   
} 

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

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

      return this.each(function() { 

        var imageNames = config.myImages; 

        var imageCaptions = config.myCaptions; 

        var imageNamesSize = imageNames.length; 

        var randomNumber = Math.floor(Math.random()*imageNamesSize); 

        var displayImage = imageNames[randomNumber]; 

        var displayCaption = imageCaptions[randomNumber]; 

        var fullPath = config.path + displayImage; 

        $(this).attr({ src: fullPath, alt: displayImage }); 
        $("#caption").html(displayCaption); 
      }); 
     } 
}); 

})(jQuery); 
</script>

來源

2013-04-07 04:54:11

謝謝，這很好。還有一個想法：你知道我怎麼才能讓字幕淡入？我嘗試了$（「＃caption」）。html（displayCaption）.fadeIn（'slow'）;沒有運氣。 – markratledge 2013-04-07 17:54:55

fadeIn將不起作用，因爲＃caption可見。嘗試$（'＃caption'）。hide（）。html（displayCaption）.fadeIn（'slow'）; – 2013-04-07 19:13:51

你是對的;顯示：CSS中也沒有工作。 – markratledge 2013-04-08 03:09:38

添加字幕到$ .randomImage.defaults &配置對象的數組。
然後檢索使用var caption = config.captions[randomNumber];

或

變化myImages: ['image1.jpg', 'image2.jpg','image3.jpg' ...
到myImages: [{image: 'image1.jpg', caption: 'My Caption}, ...

來源

2013-04-07 04:51:40

如何將相關標題添加到不同div中的隨機圖像？

回答

相關問題