How do I change the href of a link?
Hi,
I am new to jquery and I am trying to create an image gallery from the 20 last images in posts in a Wordpress blog. So far my code works nicely to collect the images from the posts and make the external image gallery script work with them.
What I want to do now is to get the permalinks for each post and wrap them around the image from that post. The way the page is coded in Wordpress now, the images are wrapped around a link to see the full size image and that is the way I want it to be in the actual post, but not in the image gallery.
This is what I got so far:
- <script type="text/javascript">
jQuery(function ($) {
$('.entry a img:lt(20)').parent("a[href*=threefacesinone]").clone().appendTo('#roundrr_container').wrapAll("<ul class='list'></ul>");
$("#roundrr_container a img").wrap("<li class='item' />");
$("#roundrr_container a img").wrap("<div class='my_class' />");
});
</script>
This snippet nicely collects the images I want but how do I get the permalinks?
This is what the wordpress html looks like one the page with the posts:
<div id="content" class="widecolumn">
<div id="post-94" class="post-94 post type-post status-publish format-standard hentry category-uncategorized">
<h2><a href="http://threefacesinone.com/wordpress/?p=94" rel="bookmark" title="My sister">My sister</a></h2>
<div class="postmeta">
<span class="comments"><a href="http://threefacesinone.com/wordpress/?p=94#respond" title="Comment on My sister">0 <span>comments</span></a></span> <span class="author">By <a href="" title="admin" class="author">admin</a></span>
<span class="categories">Filed in <a href="http://threefacesinone.com/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span>
<span class="tags"></span>
<span class="timestamp">April 7th, 2011 @ 11:47 am</span>
</div>
<div class="entry">
<div id="attachment_95" class="wp-caption alignnone" style="width: 310px"><a href="http://threefacesinone.com/wordpress/wp-content/uploads/IMAG0020.jpg"><img class="size-medium wp-image-95" title="IMAG0020" src="http://threefacesinone.com/wordpress/wp-content/uploads/IMAG0020-300x225.jpg" alt="My sister" width="300" height="225" /></a><p class="wp-caption-text">My sister</p></div>
</div>
</div>
<div id="post-91" class="post-91 post type-post status-publish format-standard hentry category-uncategorized">
<h2><a href="http://threefacesinone.com/wordpress/?p=91" rel="bookmark" title="More Dublin">More Dublin</a></h2>
<div class="postmeta">
<span class="comments"><a href="http://threefacesinone.com/wordpress/?p=91#respond" title="Comment on More Dublin">0 <span>comments</span></a></span> <span class="author">By <a href="" title="admin" class="author">admin</a></span>
<span class="categories">Filed in <a href="http://threefacesinone.com/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span>
<span class="tags"></span>
<span class="timestamp">April 7th, 2011 @ 11:46 am</span>
</div>
<div class="entry">
<div id="attachment_92" class="wp-caption alignnone" style="width: 235px"><a href="http://threefacesinone.com/wordpress/wp-content/uploads/IMAG0029.jpg"><img class="size-medium wp-image-92" title="IMAG0029" src="http://threefacesinone.com/wordpress/wp-content/uploads/IMAG0029-225x300.jpg" alt="More Dublin" width="225" height="300" /></a><p class="wp-caption-text">More Dublin</p></div>
</div>
</div>
And then there are more posts like it and a closing div tag for the div with id="content". What I want is to get the href from the links in the h2-tags and wrap it around the corresponding image. So far I've only managed to wrap the first permalink around all the images and that's not right.
Any thoughts?