Question

我正在使用Create a Thumbnail with Fading Caption Using jQuery中描述的插件，但我希望我的标题是h2并从img attr抓取文字？

Answer 1

通过遵循该插件代码，使HTML成为这样而不是插件示例：

<div class="item">
    <a href="link">
        <img src="link img" title="your title" width="125" height="125"/>
        <div class="caption">
            <h2></h2>
        </div>
    </a>
</div>

然后这是您需要的更新的jQuery，并附有注释：

 $(function() {
     // let's set a variable as our img attr title
     var title = $("img").attr('title');

     var move = -15;

     //zoom percentage, 1.2 =120%
     var zoom = 1.2;

     //On mouse over those thumbnail
     $('.item').hover(function() {
         //Grab title from title attr
          $("h2").hide().append(title).fadeIn('slow');

         //Set the width and height according to the zoom percentage
         width = $('.item').width() * zoom;
         height = $('.item').height() * zoom;

         //Move and zoom the image
         $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

         //Display the caption
         $(this).find('div.caption').stop(false,true).fadeIn(200);
     },
     function() {
         //Remove title
         $("h2").empty();

         //Reset the image
         $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

         //Hide the caption
         $(this).find('div.caption').stop(false,true).fadeOut(200);
     });
 });

工作示例：http://jsfiddle.net/u2HxY/40/

Answer 2

抓取alt属性并将其放入标题HTML。

 $('#captionID').html($('#imageID').attr('alt'));

Answer 3

使用此功能。

$('#imgSelector').attr('title')

或

$('#imgSelector').attr('alt')

如何获取'img'标题属性并将其放入h2？

3 个答案: