テキストエリア内のimageタグ部分をlightbox風に表示するには。

Question

お世話になります。

ウィジウィグエディタで作成した文章内の画像を出力し、クリック時に
lightboxのように表示したいのですが、複数画像がある場合に
それぞれのパス/画像名を取得することは出来ますでしょうか。

現在はlightboxを使用していて下記の記述をしています。

$(document).ready(function(){
	$(".sample img").wrap("<a href='' data-lightbox='image'></a>");
});

href部分にクリックされた画像名を入れることが出来ればいいと思うのですが…
これに限らず、textarea内の画像をlightbox風に表示出来るのであれば
方法はなんでもいいと思っています。

ご教授お願いいたします。

=====6/2追記=====
下記のhrefにクリックした画像のsrcを設定出来る方法があればご教授お願いいたします。

$(document).ready(function(){
	$(".sample img").wrap("<a href='' data-lightbox='image'></a>");
});

Comments

[ngyuki]

「WYSIWYGエディタが生成したHTMLの中の画像を lightbox 風に表示したいので img タグを a タグでラップしたい」、という意味でしょうか？

Answer 1

つまり、次のような HTML を

<div class="sample">
    <p>あいうえお</p>
    <img src="aaa.png">
    <p>かきくけこ</p>
    <img src="bbb.jpg">
    <p>さしすせそ</p>
</div>

jQuery で次のようにしたい、ということでしょうか？

<div class="sample">
    <p>あいうえお</p>
    <a href="aaa.png" data-lightbox="image">
        <img src="aaa.png">
    </a>
    <p>かきくけこ</p>
    <a href="bbb.png" data-lightbox="image">
        <img src="bbb.jpg">
    </a>
    <p>さしすせそ</p>
</div>

効率のいいやり方ではないかもしれませんが、次のように each で一つずつ処理すればできます。

$(document).ready(function(){
    $(".sample img").each(function(){
        $(this).wrap(
            $('<a data-lightbox="image">').attr('href', this.src)
        );
    })
});

Comments

[GIRLibra]

思った通りの動作にすることが出来ました！
大変助かりました、ありがとうございます。