Template 1

HTML

<script src="http://carolkbrown.broadleafclients.com/_js/scripts-1.0.4.js"></script>
<link rel="stylesheet" href="http://carolkbrown.broadleafclients.com/_css/core.css">
<link rel="stylesheet" href="http://carolkbrown.broadleafclients.com/_js/3rdparty/milkbox/css/milkbox/milkbox.css">
<script src="http://carolkbrown.broadleafclients.com/_js/3rdparty/milkbox/js/milkbox.js"></script>
<script src="http://carolkbrown.broadleafclients.com/_js/3rdparty/template/Template.js"></script>
<div id="wrapper" style="width:700px;">
    <div id="header">
    <div id="carol"><a href="www.carolkbrown.com">carol k brown</a></div>
    <div id="title" style="width:200px;" data-template="html:{name}"></div><div id="description" style="width:200px;" data-template="html:{description}"></div>      
</div>
<br><br>
      <div id="container4" style="width:300px;">  
    <div class="piecewrapper2"
        data-repeating-block="fetch-images-of:Media">   
   <span class="image_description" 
       data-template="html:{description}"></span></div></div>
    
<div id="container6" style="width:300px;">  
    <div class="piecewrapper2"
        data-repeating-block="fetch-images-of:Media2">   
   <span class="image_description" 
       data-template="html:{description}"></span></div></div>

  
    
    
<hr>    
<div id="container1" style="width:650px;"> 
    
<div class="piecewrapper" id="repeating-block-2" data-repeating-block="fetch-images-of:Individuals">
                        <a data-template="title:{description} href:{derived_large} data-milkbox:Individuals id:image{image_id}">                 
                
    <div class="Individua1s"><img src="http://carolkbrown.piwigo.com/uploads/5/d/t/5dtz9u6g22//2013/03/12/20130312204241-1610db87.gif" data-template="src:{derived_xsmall}">
    <div class="image_metadata"><span class="image_title"></span><span
    class="image_description"></span></div></div></a>
</div>
    
</div>
  
    
    <div id="container3" style="width:650px;"> 
    
<div...

CSS

[data-repeating-block] { display:none; }

body[class=Encounters],
body[class=Encounters] #mbox-overlay
{  background-color: #000031; }
body[class=Pedestrian\ 2006], 
body[class=Pedestrian\ 2006] #mbox-overlay
{ background-color: #3C3939; }
body[class=Pedestrian], 
body[class=Pedestrian] #mbox-overlay
{ background-color: #000000; }
body[class=Passerby], 
body[class=Passerby] #mbox-overlay
{ background-color: #2C3031; }
body[class=Home\ D\écor], 
body[class=Home\ D\écor] #mbox-overlay
{ background-color: #242631; }

body[class=Pedestrian\ 2006] #description:after {
    content:"Pedestrian custom text";
    display: block;
}


#container1 img,
#container2 img,
#container3 img {
    max-height:70px;
    max-width: 70px;
}

body[class=Passerby] #container2 img{
      max-width: 60px;
       max-height: 60px;
}
body[class=Pedestrian] #container1 img, 
body[class=Pedestrian] #container3 img {
      max-width: 60px;
}

body[class=Pedestrian] .piecewrapper {
      margin-top: -10px;    
}

body[class=Home\ D\écor] #container2 img {
    margin-top:15px;
    max-width:65px;
}


a#image292 img {
    max-width:none !important;
    max-height:40px !important;
}

a {
    height:50px;
    display:block;
}


hr {
    clear: both;
    height: 0;
    width: 700px;
    float: left;
}

body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}

IMG { position: relative; }

.piecewrapper{
    float:left;
    margin-top:15px;
    padding-top:15px;
    padding-left:15px;
}

.piecewrapper2{
    float:left;
    font-size:10pt;
    margin-top:15px;
    padding-top:15px;
    padding-left:15px;
}



#header {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12pt;

}

#wrapper {
padding-left:60px;
}



#carol {
    font-size:12pt;
    float:left;
    padding-top:30px;
}

#title {
    clear:both;
    color: #FFFFFF;
    font-size: 16pt;
    float:right;
    
}


#description {
    clear:both;
    color: gray;
    font-size: 11pt;
   ...

JavaScript

document.id(document.body).addEvent('attachLightbox', function () {
/* Lisa, do not alter above this line.  Lightbox init code FOLLOWS this comment */

milkbox.refreshDisplay({ 
		resizeDuration: .8,  
        overlayOpacity: .5,
        centered:true
});

/* Lisa, do not alter below this line.  Lightbox init code PRECDES this comment */
milkbox.reloadPageGalleries();    
});