jQuery News Ticker Modification

PressTigers

jQuery News Ticker Modification

July 16, 2015
Leave a comment

For scrolling horizontal news tickers in your WordPress website, you can easily install jQuery News Ticker Plugin available at WordPress Repository. It only provides one liner functionality for displaying news.

For our Client’s local communities web portal, we had to convert it into a custom dual bar news ticker. Admin can add news to be shown on news ticker from admin panel and assign them in a particular group i.e; above one or below one. From admin panel, the color background of the ticker bar can be changed by admin. Also the font family and font color can be changed. A lot of custom code was written by our PressTigers for converting the default single ticker bar into a dual one by dividing it into multiple groups:

<?php 
 
   $Jntp = $Jntp . '<ul id="'.$Jntp_classname.'" class="gticker-hidden">';
   foreach ( $data as $data ) &nbsp;
   { 
             $Jntp_id = $data->Jntp_id; 
             $Jntp_text = stripslashes($data->Jntp_text); 
             $Jntp_link = $data->Jntp_link; 
if($Jntp_group == 'GROUP1') 
{ 
 $Jntp = $Jntp . '<li class="gticker-item"><a class="link-black" href="'.$Jntp_link.'">'.$Jntp_text.'</a></li>'; 
} 
else if($Jntp_group == 'GROUP2') 
{ 
 $Jntp = $Jntp . '<li class="gticker-item"><a class="link-white" href="'.$Jntp_link.'">'.$Jntp_text.'</a></li>'; 
} 
      }
      $Jntp = $Jntp . '</ul>'; 
      $Jntp = $Jntp . '<script type="text/javascript">';
      $Jntp = $Jntp . 'jQuery(function () {'; 
      $Jntp = $Jntp . "jQuery('#".$Jntp_classname."').ticker({"; 
      $Jntp = $Jntp . 'speed: '.$Jntp_speed.', '; 
      $Jntp = $Jntp . 'htmlFeed: true, '; 
      $Jntp = $Jntp . "titleText: '".$Jntp_title ."', "; 
      $Jntp = $Jntp . "direction: '".$Jntp_direction."', "; 
      $Jntp = $Jntp . 'controls: false,';
      $Jntp = $Jntp . "displayType: '".$Jntp_type."', ";
      $Jntp = $Jntp . 'pauseOnItems: '.$Jntp_pause.', '; 
      $Jntp = $Jntp . 'fadeInSpeed: 600,'; 
      $Jntp = $Jntp . 'fadeOutSpeed: 300, '; 
$Jntp = $Jntp . 'group: "'.$Jntp_group.'"'; 
      $Jntp = $Jntp . '});'; 
      $Jntp = $Jntp . '});'; 
      $Jntp = $Jntp . '</script>';

<?php

$Jntp = $Jntp . '<ul id="'.$Jntp_classname.'" class="gticker-hidden">';

foreach ( $data as $data )  

{

$Jntp_id = $data->Jntp_id;

$Jntp_text = stripslashes($data->Jntp_text);

$Jntp_link = $data->Jntp_link;

if($Jntp_group == 'GROUP1')

{

$Jntp = $Jntp . '<li class="gticker-item"><a class="link-black" href="'.$Jntp_link.'">'.$Jntp_text.'</a></li>';

}

else if($Jntp_group == 'GROUP2')

{

$Jntp = $Jntp . '<li class="gticker-item"><a class="link-white" href="'.$Jntp_link.'">'.$Jntp_text.'</a></li>';

}

$Jntp = $Jntp . '</ul>';

$Jntp = $Jntp . '<script type="text/javascript">';

$Jntp = $Jntp . 'jQuery(function () {';

$Jntp = $Jntp . "jQuery('#".$Jntp_classname."').ticker({";

$Jntp = $Jntp . 'speed: '.$Jntp_speed.', ';

$Jntp = $Jntp . 'htmlFeed: true, ';

$Jntp = $Jntp . "titleText: '".$Jntp_title ."', ";

$Jntp = $Jntp . "direction: '".$Jntp_direction."', ";

$Jntp = $Jntp . 'controls: false,';

$Jntp = $Jntp . "displayType: '".$Jntp_type."', ";

$Jntp = $Jntp . 'pauseOnItems: '.$Jntp_pause.', ';

$Jntp = $Jntp . 'fadeInSpeed: 600,';

$Jntp = $Jntp . 'fadeOutSpeed: 300, ';

$Jntp = $Jntp . 'group: "'.$Jntp_group.'"';

$Jntp = $Jntp . '});';

$Jntp = $Jntp . '</script>';