tutorials:zencartmods:blog_ticker.html
Differences
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> | ||
| - | |||
| - | |||
/home/ladyada/public_html/wiki/data/pages/tutorials/zencartmods/blog_ticker.html.txt · Last modified: 2016/01/28 18:05 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
