dashboard/public/gadgets/obsoleteGadgets/FlickrAstrometryNoTalk.xml

Create dashboards with gadgets on node.js

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Flickr Astrometry" 
    height="10"
    scrolling="true">
     <Require feature="dynamic-height"/>
     <Require feature="opensocial-0.8"/> 
     <Require feature="minimessage"/>
</ModulePrefs> 

<Content type="html"><![CDATA[


<!--
  jQuery library
-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="text/javascript" src="js/jquery.jcarousel.min.js"></script>

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sky.astro.washington.edu/gadgets/css/skins/ie7/skin.css" />

<style type="text/css">

#mycarousel .jcarousel-item-placeholder {
    background: transparent url(images/loading-small.gif) 50% 50% no-repeat;
}

</style>





<script type="text/javascript">


    function mycarousel_itemLoadCallback(carousel, state)
    {
        if (carousel.prevFirst != null) {
            // Remove the last visible items to keep the list small
            for (var i = carousel.prevFirst; i <= carousel.prevLast; i++) {
                // jCarousel takes care not to remove visible items
                carousel.remove(i);
            }
        }
    
        var per_page = carousel.last - carousel.first + 1;
        var currPage = 0;
        var f,l;
        var cr = carousel;
    
        for (var i = carousel.first; i <= carousel.last; i++) {
            var page = Math.ceil(i / per_page);
    
            if (currPage != page) {
                currPage = page;
    
                f = ((page - 1) * per_page) + 1;
                l = f + per_page - 1;
    
                f = f < carousel.first ? carousel.first : f;
                l = l > carousel.last ? carousel.last : l;
    
                if (carousel.has(f, l)) {
                    continue;
                }
    
                mycarousel_makeRequest(carousel, f, l, per_page, page);
            }
        }
    };


    function mycarousel_makeRequest(carousel, first, last, per_page, page)
    {
        // Lock carousel until request has been made
        carousel.lock();
      
        jQuery.get(
            'files/container/dynamic_flickr_api.php',
            {
                'per_page': per_page,
                'page': page
            },
            function(data) {
                mycarousel_itemAddCallback(carousel, first, last, data, page);
            },
            'xml'
        );
    
    };
    
    function mycarousel_itemAddCallback(carousel, first, last, data, page)
    {
        // Unlock
        carousel.unlock();
    
        // Set size
        carousel.size($('photos', data).attr('total'));
    
        var photos = $('photo', data);
        var per_page = carousel.last - carousel.first + 1;
    
        for (var i = first; i <= last; i++) {
            var pos = i - 1;
            var idx = Math.round(((pos / per_page) - Math.floor(pos / per_page)) * per_page);
    
            carousel.add(i, mycarousel_getItemHTML(photos.get(idx)));
        }
    };
    
    /**
     * Global item html creation helper.
     */
    function mycarousel_getItemHTML(photo)
    {
        var url = 'http://farm'+$(photo).attr('farm')+'.static.flickr.com/'+$(photo).attr('server')+'/'+$(photo).attr('id')+'_'+$(photo).attr('secret')+'_s.jpg';
        return '<a href="http://www.flickr.com/photos/'+$(photo).attr('owner')+'/'+$(photo).attr('id')+'/" target="_blank" title="'+$(photo).attr('title')+'"><img src="' + url + '" border="0" width="75" height="75" alt="'+$(photo).attr('title')+'" /></a>';
    };
    
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            itemLoadCallback: mycarousel_itemLoadCallback
        });
    });

</script>

<div id="wrap">

  <div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- The content will be dynamically loaded in here -->
    </ul>
  </div>


]]></Content>
</Module>