Tip: Making index page images link to the post page

This tip mainly applies to blogs that take advantage of jump breaks in their posts as a way to shorten posts on the front page(s) with links to the full post.

In cases where you use jump breaks to limit your post size on your index pages you're left with a challenge: you want to use images in each post above the jump break, but clicking on the image doesn't take the user to the blog post. Instead, clicking on the image either opens up the Lightbox effect or takes you to a full page of just that image. Neither is the desired user behavior, especially if your only content before the jump break is the image.

This code provides a solution.

What we're doing in this code

We're doing 5 things here:

1. Setting this script to only run on the "index" type pages of your site
2. Stopping Lightbox from executing
3. Finding each "post-body"-classed div container (typically where post contents are located
4. Capturing each post's post URL
5. Replacing the wrapping link of each image with it's parent's post URL

Get a clean copy of the code.

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

/**

this script was written by Confluent Forms LLC http://www.confluentforms.com

for the BlogXpertise website http://www.blogxpertise.com

any updates to this script will be posted to BlogXpertise

please leave this message and give credit where credit is due!

**/

$(document).ready(function() {

$('.post-body').each(function(n, wrapper){

var wrapper = $(wrapper);

var newLink = wrapper.parent().find('h3 a').attr('href');

wrapper.find('img').each(function(n, image){

var image = $(image);

image.parent().attr('href',newLink);

});

});

});

function killLightbox() {

var images = document.getElementsByTagName('img');

for (var i = 0 ; i < images.length ; ++i) {

 images[i].onmouseover=function() {

  var html = this.parentNode.innerHTML;

  this.parentNode.innerHTML = html;

  this.onmouseover = null;

 };

}

}

if (window.addEventListener) {

window.addEventListener('load',killLightbox,undefined);

} else {

window.attachEvent('onload',killLightbox);

}

//]]></script>

</b:if>

Enjoy!

Questions or comments, please feel free to leave them in the comments below. If we make updates to the script we will post them here.

P.S.

If you've found this script, you'd probably also be interested in our "thumbnail and summary scripts", of which we've developed quite a few different variations that might interest you.