jquery - Jquery 画像キャプション

Question

jquery を使用して、alt または title 属性のいずれかを使用してスライドまたはフェードする選択した画像に透明なキャプションを追加する簡単な方法を見つけようとしています (いずれかのほうがよいでしょう)。

これを行う簡単な方法を考えられる人はいますか?

Answer 1

私は以前にこの方法を使用したことがあります。かなりうまく機能しているようで、要素を常に作成および削除するのではなく、要素のコンテンツを移動および変更するだけです。

実際のフィドルを見る

単一の空の div から始めます。

<div id='caption'></div>

JS: div を配置し、キャプションを書き、フェードインするためのホバーとマウスアウトのイベント リスナー。

$('img').hover(function(){
    var yoffset = $(this).height();
    var width = $(this).width();
    var coords = $(this).offset();

    $('#caption').html($(this).data('caption'))
        .width(width)
        .animate({
            top: coords.top + yoffset - $('#caption').height(),
            left: coords.left            
        }, 0, function(){
            $(this).animate({
                opacity: 'show'
            }, 200);   
        });
});

$('img').mouseout(function(){
    $('#caption').animate({
        opacity: 'hide'
    }, 100);   
});

その div の CSS: 絶対に配置されるので、どこにでも配置できます。別の div 内にネストされていないことを確認して、これが正常に機能することを確認してください。

#caption {
    position: absolute;
    z-index: 99;
    display: none;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px;  
}

title 属性を使用するか alt 属性を使用するかについては、.data の代わりに .attr を使用することもできますが、この方法では何も損なわずにキャプション テキストを指定できます。HTML5 データ属性は jQuery で次のように使用されます

<img src='#' data-caption='This is some caption text' />

そして次のようにアクセスします：

$('img').data('caption'); //returns our caption text