lost in code and pounding my head against the wall re photo gallery

I am not very good at code at all. I find a basic form I like and tear my hair out trying to adapt it to my needs. I am updating my website and am in the final stages and have hit a snag. The code I am using only had 6 images. I want to use way more than 6. When I add more everything works except the title and detail overlay section in the slideshow part. After image six the overlay reverts to the information for image 1 for the remaining images. Each image has <div id="01" class='hide'> from 1 to 6. When I change the 01 to 07 the hover text works, but in slideshow mode the overly text does not. I can't find anything in the css or style sheets. I don't even know this well enough to explain this properly. If this makes any sense and anyone has any idea what I should be doing to correct this I would buy you a drink!

<!-- portfolio
================================================== -->
<section id="portfolio">

<div class="row narrow section-intro with-bottom-sep">
<div class="col-twelve">
<h3 class="animate-this">Portfolio</h3>
<h1 class="animate-this">current works</h1>

<p class="lead animate-this">and i paint<br>sometimes i paint so violently and loudly i don't think i will survive</p>
</div>
</div> <!-- end row section-intro -->

<div class="row portfolio-content">
<div class="col-twelve">
<div id="folio-wrap" class="bricks-wrapper">

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/alpine.jpg" data-sub-html="#01" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/alpine.jpg" alt="alpine">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">alpine</h3>
</div>
</a>
<a href="http://mikaelsurget.com/" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="01" class='hide'>
<h4>alpine</h4>
<p>mixed medium on wood | 50 x 50 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/magnetic.jpg" data-sub-html="#02">
<a href="#" class="overlay">
<img src="images/portfolio/gallery/magnetic.jpg" alt="magnetic">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">magnetic</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="02" class='hide'>
<h4>magnetic</h4>
<p>mixed medium on wood | 50 x 50 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/touch.jpg" data-sub-html="#03" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/touch.jpg" alt="touch one">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">touch one</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="03" class='hide'>
<h4>touch one</h4>
<p>acrylic on wood | 60 x 120 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/gaultiergirl.jpg" data-sub-html="#04" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/gaultiergirl.jpg" alt="gultier girl">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">gaultier girl</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="04" class='hide'>
<h4>gaultier girl</h4>
<p>mixed medium on wood | 60 x 60 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/milanojack.jpg" data-sub-html="#05" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/milanojack.jpg" alt="milano jack">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">milano jack</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="05" class='hide'>
<h4>milano jack</h4>
<p>mixed medium on wood | 60 x 60 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/touch.jpg" data-sub-html="#06">
<a href="#" class="overlay">
<img src="images/portfolio/gallery/touch.jpg" alt="touch two">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">touch two</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="06" class='hide'>
<h4>touch two</h4>
<p>mixed medium on wood | 60 x 120 cm</p>
</div>
</div> <!-- end folio-item -->


<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/mothersday.jpg" data-sub-html="#01" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/mothersday.jpg" alt="mothers day">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">mothers day</h3>
</div>
</a>
<a href="" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="07" class='hide'>
<h4>mothers day</h4>
<p>mixed medium on wood | 50 x 50 cm</p>
</div>
</div> <!-- end folio-item -->

<div class="brick folio-item">
<div class="item-wrap animate-this" data-src="images/portfolio/gallery/breath.jpg" data-sub-html="#01" >
<a href="#" class="overlay">
<img src="images/portfolio/gallery/breath.jpg" alt="breath">
<div class="item-text">
<span class="folio-types">
and i cry
</span>
<h3 class="folio-title">breath</h3>
</div>
</a>
<a href="http://mikaelsurget.com/" class='details-link' title="details">
<i class="icon-UpRightArrow"></i>
</a>
</div> <!-- end item-wrap -->

<div id="08" class='hide'>
<h4>breath</h4>
<p>mixed medium on wood | 50 x 50 cm</p>
</div>
</div> <!-- end folio-item -->

</div> <!-- end folio-wrap -->

</div> <!-- end twelve -->
</div> <!-- end portfolio-content -->

</section> <!-- end portfolio -->