Image Scroller

by Borna Almasi

HTML

<h1><p>I saw this thing in flash and thought. I CAN DO THAT IN HTML! so here I'm getting some images from a random wikipedia pages and scrolling through them,</p></h1>
<div class="container">
    <div id="wrapper"></div>
</div>

CSS

div#wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    z-index:-1;
    background:white;
}

img{
    height:85%;
    float:left;
    z-index:-2;
    border-radius:5px;
    margin:5px;
}

div.container{
    border: 9px solid rgba(0,0,0,1);
    border-radius:25%;
    position:absolute;
    padding:0px 20px;
    overflow-x:hidden;
    height:80px;
    width:300px;
    background:transparent;
    -webkit-box-shadow: 
        inset 100px 0px 100px -20px rgba(0,0,0,1),
        inset -110px 0px 100px -20px rgba(0,0,0,1);  
}

JavaScript

$(document).ready(function(){
    
    $.getJSON(
    'http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_United_States_National_Parks_by_state%22%20AND%20xpath%3D%22%2F%2Fimg%22&format=json&diagnostics=true',
    function(data){
        wrap= $("#wrapper");
        wrapWidth=0;
        var results = data.query.results.img;
        var docfrag = document.createDocumentFragment();
        for (i in results){
            var newItem= document.createElement('img');
            newItem.src = results[i].src;
            wrapWidth+=isNaN(parseInt(results[i]["width"]))? 0 : parseInt(results[i]["width"])+15;  
            docfrag.appendChild(newItem);
            
        }
        wrap.append(docfrag);
        wrap.css("width",wrapWidth);
        var duration = $("img").length * 500; 
        wrap.animate({left: '-='+wrapWidth},duration,'linear');
        wrap.live("mouseover",function() {  
          wrap.stop(true); 
         });
    }
);
      
 
});