RSSフィード（XML形式）を読み込んでテキストスクロール表示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jCarousel | 設置サンプル | テキストスクロール</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jcarousel/lib/jquery.jcarousel.pack.js"></script><!-- jCarousel library -->
<link href="/content/lib/global.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jcarousel/lib/jquery.jcarousel.css" /><!-- jCarousel core stylesheet -->
<style type="text/css">
.jcarousel-container-vertical {
width: 300px;
height: 300px;
background: #e8e8e8;
border: 1px solid #fff;
}
.jcarousel-clip-vertical {
top: 15px;
width: 290px;
height: 270px;
margin: 0 5px;
z-index: 20;
}
.jcarousel-item,
.jcarousel-item-placeholder {
width: 270px;
height: auto;
margin: 5px 0;
}
.jcarousel-item h3,
.jcarousel-item p {
margin: 0;
font-size: 90%;
}
.jcarousel-next-vertical {
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 14px;
cursor: pointer;
border-top: 1px solid #fff;
background: #4088b8 url(lib/jcarousel/images/arrow-down.gif) no-repeat center;
}
.jcarousel-next-disabled-vertical {
cursor: default;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
.jcarousel-prev-vertical {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 14px;
cursor: pointer;
border-bottom: 1px solid #fff;
background: #4088b8 url(lib/jcarousel/images/arrow-up.gif) no-repeat center;
}
.jcarousel-prev-disabled-vertical {
cursor: default;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
.loading {
background: transparent url(lib/jcarousel/images/loading.gif) 50% 50% no-repeat;
}
</style>
<script type="text/javascript">
function mycarousel_initCallback(carousel, state){
// Lock until all items are loaded. That prevents jCarousel from
// setup correctly and we have to do that in the ajax callback
// function with carousel.setup().
// We're doing that because we don't know the exact height of each
// items until they are added to the list.
carousel.lock();
jQuery.get(
'/content/lib/jcarousel/special_textscroller.php',
{
'feed': 'http://weblogs.macromedia.com/labs/index.xml'
},
function(xml) {
mycarousel_itemAddCallback(carousel, xml);
},
'xml'
);
};
function mycarousel_itemAddCallback(carousel, xml){
var $items = jQuery('item', xml);
$items.each(function(i) {
carousel.add(i + 1, mycarousel_getItemHTML(this));
});
carousel.size($items.size());
// Unlock and setup.
carousel.unlock();
carousel.setup();
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item){
return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>';
};
/**
* Utility function for truncating a string without breaking words.
*/
function mycarousel_truncate(str, length, suffix) {
if (str.length <= length) {
return str;
}
if (suffix == undefined) {
suffix = '...';
}
return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
};
jQuery(document).ready(function() {
/**
* We show a simple loading indicator
* using the jQuery ajax events
*/
jQuery().ajaxStart(function() {
jQuery(".jcarousel-clip-vertical").addClass('loading');
});
jQuery().ajaxStop(function() {
jQuery(".jcarousel-clip-vertical").removeClass('loading');
});
jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1><a href="http://sorgalla.com/projects/jcarousel/">jCarousel</a> | 設置サンプル | テキストスクロール</h1>
<p>RSSフィード（XML形式）を読み込んでテキストスクロール表示。</p>
<h2>Adobe Lab : RSS Feed (RSS 2.0)</h2>
<div id="mycarousel">
<ul>
<!-- The content will be dynamically loaded in here -->
</ul>
</div>
</body>
</html>