Search code examples
javascriptiframehyperlinktagsparent

Link all li or img Tags with javascript

Hey I have a galleryscript wich generate a ul list with thumbnails. Now i want to give all this thumbnails the same link. Thats the Thumbnaillist:

<ul id="thumb-list" style="width: 2397px; left: 0px;">
    <li class="thumb0"><img src="img/th/0.jpg"></li>
    <li class="thumb1"><img src="img/th/1.jpg"></li>
    ...
</ul>

and I want it to be:

<ul id="thumb-list" style="width: 2397px; left: 0px;">
    <li class="thumb0"><a href="#gallerytop"><img src="img/th/0.jpg"></a></li>
    <li class="thumb1"><a href="#gallerytop"><img src="img/th/1.jpg"></a></li>
    ...
</ul>

This anker link "#gallerytop" should scroll the parentdocument. The Galley with the thumbnailslist is included as IFrame. Can somebody help?

I tried js replace...

<script type="text/javascript"> 
(function($) {
var site = $("#thumb-list");
site.html(site.html()
.replace(/<img /g, '<img href="#gallerytop"')
); 
return; })(jQuery) </script>

or via wrap

<script type="text/javascript">   
var a = $("<a>").attr("href", "#gallerytop");
$("img").wrap(a);
</script>

nothing helped :/

the Thumbnails are in a Iframe how i cann scroll to the anker link #gallerytop in the parent-document (main Frame)... sry for bad english

Solution

  • Check this fiddle. http://jsfiddle.net/JayKandari/bX2PH/2/

    use jquery's wrap() method to wrap objects around.

    $("#thumb-list").each(function(){
 $(this).find("img").wrap("<a href='#gallerytop'></a>");   
});