• put your amazing slogan here!

    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 with links to the full post.


    In Some 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. So Here is a Code Which Gives a Solution


    The 5 things to do 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

    Now Paste the Below Code Above </head> tag
    • <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[

      $(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>
    1. Now Save the template And You're Done

    0 comments:

    Post a Comment

     

    Blogger news

     

    About

    Blogroll