jQuery/JS : 텍스트가있는 임의의 이미지? 텍스트를 추가하는 방법?

Question

배열 내에서 임의의 이미지를 출력하는 JavaScript를 다운로드했습니다. 그것은 모두 잘 작동하지만 제목 변수를 추가하여 이미지 대체 텍스트로 넣고 HTML 페이지에 표시합니다.

이

나는 자바 스크립트 코드를 사용하고 있습니다 :

이 가

(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

추가 -

는 진심 감사드립니다.

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

새로운 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' }, 
    //... 
] 

:

먼저 당신은 이미지의 이름을 포함하는 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/