Blog Post Slider

Submitted by rinvizle on Friday, August 5, 2016 - 14:14.
In this tutorial we are going to create a Blog Post Slider that shows the latest post of your favorite blogs. We will be using jQuery, PHP and XSL. We will apply XSL to transform the feed into HTML and cache the result for subsequent use. We will be using a lot of CSS3 properties for a polished look.

Sample Code

Class.php
  1. <?php
  2. $source = $_GET['source'];
  3. $rss    = new RSS($source);
  4. $rss->getLatest();
  5.  
  6. class RSS{
  7.         private $cache_dir              = 'cache';
  8.         private $cache_lifetime = 300;
  9.         private $source;
  10.         private $xsl_file               = 'html.xsl';
  11.         public function __construct($source){
  12.                 $this->source = $source;
  13.         }
  14.         public function getLatest(){
  15.                 switch($this->source){
  16.                         case 'PHP':
  17.                                 $xml            = 'http://www.sourcecodester.com/php';
  18.                                 break;
  19.                         case 'C':
  20.                                 $xml            = 'http://www.sourcecodester.com/cpp';
  21.                                 break;
  22.                         case 'PYTHON':
  23.                                 $xml            = 'http://www.sourcecodester.com/other';
  24.                                 break; 
  25.                         case 'JAVASCRIPT':
  26.                                 $xml            = 'http://www.sourcecodester.com/javascript';
  27.                                 break; 
  28.                         case 'CC':
  29.                                 $xml            = 'http://www.sourcecodester.com/c-sharp';
  30.                                 break; 
  31.                         case 'CPROGRAMMING':
  32.                                 $xml            = 'http://www.sourcecodester.com/cpp';
  33.                                 break; 
  34.                         case 'JAVA':
  35.                                 $xml            = 'http://www.sourcecodester.com/java';
  36.                                 break;
  37.                                 case 'RUBY':
  38.                                 $xml            = 'http://www.sourcecodester.com/other';
  39.                                 break;
  40.                                 case 'SQL':
  41.                                 $xml            = 'http://www.sourcecodester.com/sql';
  42.                                 break;                                 
  43.                 }
  44.                 if($this->isCached($this->source . '.xml')){
  45.                         echo $this->getCache($this->source . '.xml');
  46.                 }
  47.         }
  48.         private function addCache($content, $file){
  49.                 $filename  = $this->cache_dir . '/' . basename($file);
  50.                 $directory = $this->cache_dir;
  51.                 mkdir($directory, 0775);
  52.                 if(file_put_contents($filename, $content) == FALSE){
  53.                         throw new Exception("Unable to write to cache");
  54.                 }
  55.         }
  56.         private function getCache($file){
  57.                 $filename       = $this->cache_dir . '/' . basename($file);
  58.                 $content        = file_get_contents($filename);
  59.                 return isset($content) ? $content : false;
  60.         }
  61.         public function isCached($file){
  62.                 $filename = $this->cache_dir . '/' . basename($file);
  63.                 if (is_file($filename)){
  64.                         clearstatcache();
  65.                         if (filemtime($filename) > (time() - $this->cache_lifetime)){
  66.                                 $isCached = true;
  67.                         }
  68.                 }
  69.                 return isset($isCached) ? true : false;
  70.         }
  71. }
  72. ?>
result index.html - or the mark up.
  1. <!DOCTYPE html>
  4.         <title>Blog Post Slider</title>
  5.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  6. </head>
  8.         <div id="overlay" class="overlay" style="display:none;"></div>
  9.         <div id="modal" class="modal" style="display:none;">
  10.                 <a href="#" class="prev"></a>
  11.                 <a href="#" class="next"></a>
  12.                 <span class="close"></span>
  13.                 <h2 id="blog_info"></h2>
  14.                 <div id="latest_post" class="loading"></div>   
  15.         </div>
  16.         <div class="content">
  17.                 <h2 align="center">Blog Post Slider</h2>
  18.                 <ul id="friendsList" class="friendsList">
  19.                         <li class="JAVA"><a href="#"><em>JAVA</em><span>Java, in the context isn’t coffee, it is a computer programming language that has been around since the 1990’s. </span></a></li>
  20.                         <li class="CPROGRAMMING"><a href="#"><em>C PROGRAMMING</em><span>Many people in the programming community consider C to be the grandfather of all modern languages.</span></a></li>
  21.                         <li class="C"><a href="#"><em>C++</em><span>For all intents and purposes C++ is C with more features.</span></a></li>
  22.                         <li class="CC"><a href="#"><em>C#</em><span>C# is a programming language developed in the early 2000’s.</span></a></li>
  23.                         <li class="PYTHON"><a href="#"><em>PYTHON</em><span>Python is a general purpose language that first appeared in the 1990’s.</span></a></li>
  24.                         <li class="JAVASCRIPT"><a href="#"><em>JAVASCRIPT</em><span>People who are new to computer programming often don’t know there is a difference between Java and JavaScript. </span></a></li>
  25.                         <li class="PHP"><a href="#"><em>PHP</em><span>PHP is another C decedent; in fact PHP is written using the C language.</span></a></li>
  26.                         <li class="RUBY"><a href="#"><em>RUBY</em><span>Ruby (like Python) is a powerful yet easy to learn programming language.</span></a></li>
  27.                         <li class="SQL"><a href="#"><em>SQL</em><span>SQL is considered a special purpose programming language.</span></a></li>
  28.                 </ul>
  29.         </div>
  30.         <script type="text/javascript" src="js/jquery.min.js"></script>
  31.         <script type="text/javascript">
  32.                 $(function() {
  33.                         $.ajaxSetup({cache: false});
  34.                         var current = -1;
  35.                         var total       = $('#friendsList').children().length;
  36.                         $('#friendsList a').bind('click',function(e){
  37.                                 var $this = $(this);
  38.                                 show();
  39.                                 var $elem       = $this.parent();
  40.                                 current         = $elem.index() + 1;
  41.                                 var source      = $elem.attr('class');
  42.                                 $('#blog_info').empty()
  43.                                                            .html('<img src="images/' + source + '.png"></img>' + $this.find('em').html());     
  44.                                 $.get('class.php', {source:source} , function(data) {
  45.                                         $('#latest_post').removeClass('loading').html(data);
  46.                                 });
  47.                                 e.preventDefault();
  48.                         });
  49.                         function show(){
  50.                                 $('#overlay').show();
  51.                                 if(!$('#modal').is(':visible'))
  52.                                 $('#modal').css('left','-260px')
  53.                                                    .show()
  54.                                                    .stop()
  55.                                                            .animate({'left':'50%'}, 500);
  56.                         }
  57.                         function hide(){
  58.                                 $('#modal').stop()
  59.                                                    .animate({'left':'150%'}, 500, function(){
  60.                                                                 $(this).hide();
  61.                                                                 $('#overlay').hide();
  62.                                                                 $('#latest_post').empty();
  63.                                                    });
  64.                         }
  65.                         $('#modal .close').bind('click',function(){
  66.                                 hide();
  67.                         });
  68.                         $('#modal .next').bind('click',function(e){
  69.                                 if(current == total){
  70.                                         e.preventDefault();
  71.                                         return;
  72.                                 }      
  73.                                 $('#latest_post').empty().addClass('loading');
  74.                                 $('#friendsList li:nth-child('+ parseInt(current+1) +')').find('a').trigger('click');
  75.                                 e.preventDefault();
  76.                         });
  77.                         $('#modal .prev').bind('click',function(e){                                                                            
  78.                                 if(current == 1){
  79.                                         e.preventDefault();
  80.                                         return;
  81.                                 }      
  82.                                 $('#latest_post').empty().addClass('loading');
  83.                                 $('#friendsList li:nth-child('+ parseInt(current-1) +')').find('a').trigger('click');
  84.                                 e.preventDefault();
  85.                         });
  86.                 });
  87.         </script>
  88. </body>
  89. </html>
Hope that you learn in this tutorial and enjoy coding. Don't forget to LIKE & SHARE this website.
Tags
#PHP
#JavaScript #Web #Jquery
CSS3
#HTML

Add new comment

About text formats
  • 205 views