This shows you the differences between two versions of the page.
tutorials:zencartmods:blog_ticker.html [2011/08/01 16:16] daigo |
tutorials:zencartmods:blog_ticker.html [2016/01/28 18:05] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | |||
- | {{:tutorials:zencartmods:ticker.jpg?|}} | ||
- | |||
- | ==== Create a Blog Ticker on your homepage ==== | ||
- | |||
- | |||
- | If you have a blog that generates an rss feed, you can use the rss feed to pull in recent blog posts and post them to your home page. | ||
- | |||
- | |||
- | For this example we'll be using our rss that is generated automatically from Wordpress ([[http://www.adafruit.com/blog/feed|http://www.adafruit.com/blog/feed]]). | ||
- | |||
- | ==== PHP DOM ==== | ||
- | |||
- | Add this to your template, wherever you'd like to see the ticker. We chose **includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php** around line 1. | ||
- | |||
- | <code php> | ||
- | <div id="ticker" > | ||
- | <?php | ||
- | // Begin blog ticker mod | ||
- | $url = 'http://www.adafruit.com/blog/feed/'; // Change this to your own rss feed | ||
- | $num_posts = 5; // change this to the number of posts that you would like to show | ||
- | |||
- | $doc = new DOMDocument(); | ||
- | $doc->load($url); | ||
- | $arrFeeds = array(); | ||
- | foreach ($doc->getElementsByTagName('item') as $node) { | ||
- | $itemRSS = array ( | ||
- | 'title' => substr($node->getElementsByTagName('title')->item(0)->nodeValue, 0, 100), // truncate the title to 100 character to fit in our layout | ||
- | 'link' => $node->getElementsByTagName('link')->item(0)->nodeValue | ||
- | ); | ||
- | $arrFeeds[] = $itemRSS; | ||
- | if (count($arrFeeds) >= $num_posts) | ||
- | continue; | ||
- | } | ||
- | |||
- | for ( $i = 0; $i < $num_posts; $i++) | ||
- | {?> | ||
- | |||
- | <div class="tickerText" id="tickerText<?php echo $i; ?>"> | ||
- | Latest Blog Posts: <a href="<?php echo $arrFeeds[$i]['link']; ?>"><?php echo $arrFeeds[$i]['title']; ?></a> | ||
- | </div> | ||
- | <?php | ||
- | } | ||
- | ?> | ||
- | <script language="javascript"> | ||
- | tickerFade(<?php echo $num_posts; ?>); | ||
- | </script> | ||
- | </div> | ||
- | </code> | ||
- | |||
- | Note that for now, you will have a javascript error since **tickerFade()** hasn't been defined. You could also use jQuery to call **tickerFade()** on page load, but its important that you call it AFTER the **div**s are created | ||
- | |||
- | Upload it and make sure that you're getting all the posts you want displayed in a row. | ||
- | |||
- | ==== CSS ==== | ||
- | |||
- | You'll need to CSS the divs so that they fit in to your own template, but if you want it fading in and out you should add to .tickerText | ||
- | |||
- | <code css> | ||
- | opacity: 0; | ||
- | display: none; | ||
- | </code> | ||
- | |||
- | This way they will all start out on top of each other, and invisible. display:none takes the object out of the css flow, so they'll also all take up 0 space. To combat this, add some height to #ticker | ||
- | |||
- | <code css> | ||
- | height: 15px | ||
- | </code> | ||
- | |||
- | |||
- | ==== Javascript ==== | ||
- | |||
- | We need to make the **tickerFade()** function now, which we can place in a new files called **includes/templates/YOUR_TEMPLATE/jscript/jscript_ticker.js** | ||
- | |||
- | Here's what our (slightly hacky) code looks like | ||
- | <code javascript> | ||
- | |||
- | ticker = 0; | ||
- | function tickerFade(num_posts) | ||
- | { | ||
- | for( i = 0; i < num_posts; i++) { | ||
- | stringName = 'tickerText' + i ; | ||
- | document.getElementById(stringName).style.display = 'none'; | ||
- | } | ||
- | tickerCycle(num_posts); | ||
- | } | ||
- | function tickerCycle(num_posts) | ||
- | { | ||
- | fade(ticker, num_posts); | ||
- | ticker++; | ||
- | ticker = ticker%num_posts; | ||
- | setTimeout("tickerCycle()", 5000); | ||
- | } | ||
- | |||
- | function fade(tickerNum, num_posts) | ||
- | { | ||
- | fadeIn(tickerNum); | ||
- | if(ticker == 0) { | ||
- | fadeOut(num_posts-1); | ||
- | outString = "tickerText" + num_posts - 1; | ||
- | } | ||
- | else { | ||
- | fadeOut(tickerNum-1); | ||
- | outString = "tickerText" + (tickerNum-1); | ||
- | } | ||
- | inString = "tickerText" + tickerNum; | ||
- | document.getElementById(inString).style.display = 'inline'; | ||
- | } | ||
- | alpha = 0; | ||
- | beta = 100; | ||
- | function fadeIn(tickerNum) | ||
- | { | ||
- | if( alpha < 100) { | ||
- | alpha += 10; | ||
- | thing = "tickerText" + tickerNum; | ||
- | document.getElementById(thing).style.opacity = alpha/100; | ||
- | document.getElementById(thing).style.filter = 'alpha(opacity=' + alpha + ')'; | ||
- | |||
- | |||
- | setTimeout("fadeIn("+ tickerNum +")", 50); | ||
- | } | ||
- | else { | ||
- | alpha = 0; | ||
- | } | ||
- | |||
- | } | ||
- | function fadeOut(tickerNum) | ||
- | { | ||
- | if( beta > 0 ) { | ||
- | beta -= 10; | ||
- | thing = "tickerText" + tickerNum; | ||
- | document.getElementById(thing).style.opacity = beta/100; | ||
- | document.getElementById(thing).style.filter = 'alpha(opacity=' + beta + ')'; | ||
- | setTimeout("fadeOut("+ tickerNum +")", 50); | ||
- | } | ||
- | else { | ||
- | beta = 100; | ||
- | thing = "tickerText" + tickerNum; | ||
- | document.getElementById(thing).style.display = 'none'; | ||
- | } | ||
- | |||
- | } | ||
- | </code> | ||
- | |||
- | |||