A website with 3 horizontally positioned images, which can be scrolled, and are lazy loaded (Explanation needed).

Question

I don't know if I'm intruding too much in a person's code.

This website uses jQuery Tool's Scrollable in big images (3 horizontally positioned images each time). But these images are only loaded when the previous one is clicked.

Can anyone explain to me the code that does that?:

Reference:

index.php

<div class="item current" title="I could work more but they don’t supply enough hours this season"> 
 <div class="item-ramka"></div> 
    <p class="item-h">o.O/47.png</p> 
 <div class="item-pic">o.O/47.jpg</div> 
 <span class="actionthis"><a class="tweetthis" target="_blank" href="http://twitter.com/home?status=I could work more but they don’t supply enough hours this season http://walkyrie.org/%2348 via @wwwalkyrie %23helvetica %23photo">Tweet this</a> <a  class="linkthis" href="http://walkyrie.org/#48"&gt;Link to this</a> <a  class="linkthis" href="http://walkyrie.org/o.O/47wlkry.jpg"&gt;Download this</a></span> 
</div> 

common.js:

$(document).ready(function(){


 function init(n){
  toinit = $('.item').eq(n);
  if(!toinit.hasClass('inited')){
  toinit.children('.item-h').html('<img src='+toinit.children('.item-h').text()+'>');
  toinit.children('.item-pic').html('<img src='+toinit.children('.item-pic').text()+'><i></i>');
  toinit.addClass('inited');
  }
 }


 gogo = $(".pics").scrollable({  
     size: 1,
     speed:500,
  circular:false,
  api:true
  });

  if((location.href.indexOf("#") != -1) && (window.location.hash.substr(1)!='')) {
         ind = window.location.hash.substr(1);
   if(!isNaN(ind) & ind!=''){
   rind = $('.item').length - ind-1;
   gogo.seekTo(rind);
   $('.item').eq(rind+1).addClass('current');
   init(rind);init(rind+1);init(rind+2);
   }
     }
  else{
   init(0);init(1);init(2);
  }


  $('.closehelp').click(function() {
   $('body').removeClass('b-help');
  });
  $('.helplink a').click(function() {
   $('body').addClass('b-help');
  });
  $('.next,.prev').click(function() {
   ind = gogo.getIndex();
   rind = $('.item').length - ind -1;
    window.location.hash = "#"+rind;
   init(ind+2);
   init(ind);
   size = gogo.getSize();
   $('.item').removeClass('current');
   $('.pics-items .item').eq(ind+1).addClass('current');
   if(ind>size-3){$('.next').hide();return false;}
   else{$('.next').show();}
  });
    $('.helvetica').click(function() {
  if($('body').hasClass('b-helvetica') && $('body').hasClass('b-photo')){
   $('body').removeClass('b-helvetica');
  }
  else if(!($('body').hasClass('b-helvetica'))){$('body').addClass('b-helvetica');}
  return false;
    });

 $('.photo').click(function() {
  if($('body').hasClass('b-helvetica') && $('body').hasClass('b-photo')){
   $('body').removeClass('b-photo');
  }
  else if(!($('body').hasClass('b-photo'))){$('body').addClass('b-photo');}

  return false;
    });


    });

base.css:

/* =content
----------------------------------------------- */
.page{
    top:130px;
    left:0;
    width:1932px;
    position:absolute;
    }
.pics{
    position:absolute;
    width:1932px;top:0;left:0;
    }
    .pics-items{
        width:20000em;
        position:absolute;
        left:0;
    /*  transition:all 1.6s ease-in-out;
            -o-transition:all 1.6s ease-in-out;
            -webkit-transition:all 1.6s ease-in-out;
            -moz-transition:all 1.6s ease-in-out;*/
        }
        .pics-items:hover{
            }
        .item{
            width:604px;
            height:590px;
            position:relative;
            margin-right:60px;
            float:left;
            opacity:0.4;
            transition:all .6s ease-in-out;
            -o-transition:all .6s ease-in-out;
            -webkit-transition:all .6s ease-in-out;
            -moz-transition:all .6s ease-in-out;
            }
        .out .current{
            opacity:1;
        }
    .item-ramka{
        width:564px;
        height:550px;
        position:absolute;
        top:0;
        left:0;
        border:20px solid #fff;
        z-index:80;
        }
    .item-h{
        position:absolute;
        top:0;
        left:0;
        width:604px;
        height:590px;
        font-size:48px;
        font-weight:bold;
        z-index:100;
        display:none;
        color:#000;
        font-size:1px;
        }
        .b-helvetica .item-h{display:block;}
    .item-pic{
        position:absolute;
        top:0;
        left:0;
        z-index:90;
        display:none;
        }
        .b-photo .item-pic{display:block;}


    .actionthis {
        opacity: 0;
        color: #fff;
        font-size: 10px;
        top: 610px;
        position: absolute;
/*      padding-top:2px;*/
    }

    .linkthis, .tweetthis{
        color: #fff;
        padding-left: 14px;
    }
    .tweetthis{
        background: url(/img/tweetthis.png) center left no-repeat;
    }

    .linkthis{
        background: url(/img/linkthis.png) center left no-repeat;
    }
        .current .actionthis{
            opacity: 1;
    }

    .follow {
    }

.next,.prev{
    position:absolute;
    top:0;
    width:604px;
    height:590px;

    z-index:2000;
    }
    .next{right:0;}
    .prev{left:0;}