PWG xml replace

by sanford

HTML

<div id="header" style="float:left;">
    <div id="carol"><a href="www.carolkbrown.com">carol k brown</a></div>
    <div id="title" style="width:200px;">Encounters</div>
    <div id="description" style="width:200px;">acrylic paintings on paper</div>
       
</div>
<br><br>
<hr width="100%" size="2">

<div id="container1" style="background-color:#666666;width:700px;"> 
<div id="piecewrapper" id="repeating-block-2" data-repeating-block="true">
            <a href="zoompage.html">
                       
    <div class="pieces1"><img src="http://dummyimage.com/45x45/000/fff&text=pieces1">
        
    <div class="image_metadata"><span class="image_title"></span><span
    class="image_description"></span></div></div></a>
</div>
    
</div>

<div id="encounterstext" style="width:700px;">My photographs become the source material of the tiny (7” x 5”) paintings which I then meticulously reproduce in paint. Surprises happen, with numerous changes along the way. The resulting images reflect relationships that never existed, but appear plausible, nonetheless. The paintings seem photographic at first glance but upon close inspection, reveal the tiny brush strokes of acrylic paint.Thi</div>

    <div id="home"><a href="www.carolkbrown.com">&lt;</a>

CSS

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

body {
    font-family: Tahoma, Geneva, sans-serif;
    background-color: #162252;
    font-size: 12px;
    color: #FFFFFF;
}
#header {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12pt;
    clear: both;
    float: left;
    padding-left:60px;
}


hr {
    clear: both;
}


h2 {font-size: 9pt;
}

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

#title {
    color: #FFFFFF;
    font-size: 16pt;
    clear:both;
    float:left;
    padding-left:600px;
    
}


#description {
    color: gray;
    font-size: 11pt;
    clear:both;
    float:left;
    padding-left:532px;
    
}

#text {
   font-size: 12px;
   color: #FFFFFF;
   float:left;
   padding-left:60px;
    clear:both;
}

#playvid {
   font-size: 12pt;
   color: #FFFFFF;
    clear:both;
    float:left;
}

#container1 {
    padding-left:60px;   
} 

#container2 {
    padding-left:60px;   
} 

#container3 {
    padding-left:125px;   
} 


#encounterstext {
     clear:both;
     float: left;
}

.pieces1 li:nth-child(n){
    padding-top:5px;
    padding-left:5px;
}

.pieces2 li:nth-child(n){
    padding-left:5px;    
    padding-top:5px;                    
}

.pieces3 li:nth-child(n){  
    padding-top:5px;
    padding-left:5px;
}

.pieces4 li:nth-child(n){  
    padding-top:5px;
    padding-left:5px;
}


.pieces5 li:nth-child(n){  
    padding-top:5px;
    padding-left:5px;
}

.pieces6 li:nth-child(n){  
    padding-top:5px;
    padding-left:5px;
}

#home {
    position:absolute;
    top:550px;
    left:700px;
    font-size:12pt;
}

.image_title a:hover span { 
    visibility: visible;
    }

a:link { 
    text-decoration: none;
    color: #7F7F7F;
    }
a:visited { 
    text-decoration: none;
    color: #7F7F7F;
    }
a:hover { 
    color: #7F7F7F;
    text-decoration: none;
    }
a:active { 
    color: #7F7F7F;
    text-decoration: none;
    }

JavaScript

var cat_id=3;
new Request({
    url: '/fiddlehelpers/piwigo/carolkbrown/ws.php?format=rest&method=pwg.categories.getImages&cat_id='+cat_id,
    onSuccess: function(respT,respX){
                        var template = $('repeating_block_2');
                        var templateParent = template.getParent();
        Array.each( respX.getElementsByTagName('image'),
                    function(itm,idx){ 
                        var templatedBlock = template.clone();
                        templatedBlock.getElement('IMG')
                            .set('src',itm.get('element_url'));
                        templatedBlock.getElement('IMG')
                            .set('id','image'+itm.get('id'));
                        templatedBlock.getElement('SPAN.image_title')
                                .set( 'text',itm.getElement('name').get('text'));
                        templatedBlock.erase('data-repeating-block');
                        templatedBlock.inject(templateParent)
                    })
        }    
}).send();