Hi folks,

could You help me regarding to showing news on home page... I'd like to get 5 latest news on a home page [like in tutorial 2] but news should be displayed in one box but only one news should be displayed at the same time and news should change every 5 seconds... I'd like to get some kind of loop changing news information in news' div. Could somebody help me how could I receive this goal [how should I change code from tutorial 2]?

Many thanks in advance
Peter

Get the news as in tutorial 2 and then add some javascript to change which one is displayed. SilverStripe comes with jQuery, but you'll need to enable it.

In your HomePage.php

public function init(){
  parent::init();
  ... //some other stuff
  Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.min.js');
  Requirements::javascript('mysite/javascript/newsrotation.js');
}

<% if LatestNews %>
  <ul id="latest-news">
  <% loop LatestNews %>
    <li><% include ArticleTeaser %></li>
  <% end_loop %>
  </ul>
<% end_if %>

Now you'll need to create mysite/javascript/newsrotation.js, which will do the work:

var showNews = 1;
function rotateNews(){
  var newsItems =   jQuery('#latest-news li');
  newsItems.addClass('hide');
  jQuery('#latest-news li:nth-child(' +showNews+')').removeClass('hide');
  showNews = showNews + 1;
  if(showNews >   newsItems.length){
    showNews = 1;
  }
}
jQuery(function(){
  window.setInterval('rotateNews', 5000); //call rotate news every 5 seconds.
})

This assumes that in your CSS you somewhere defined a class hide:

.hide {
  display: none;
}

Have a look around jQuery, it's a great library that offers many possibilities.

Hi Jak,

many thanks for Your reply. I'm using SS 2.4.7 and question is if <% loop LatestNews %> will work overthere?

Rgds
Peter

Hi, for silverstripe 2.4 it's control instead of loop.

HTH
Jak

Thanks again Jak. I will try Your solution as soon as possible and I will let U know how it works.

Rgds
Peter

Hi Jak,

I have some problems, something doesn't work. Below i attached my codes.

// HomePage.php

<?php
/**
* Defines the HomePage page type
*/

class HomePage extends Page {
static $db = array(
);
static $has_one = array(
);
/* part changing icon in admin panel for 'home' */
static $icon = "themes/tutorial/images/treeicons/home";
}

class HomePage_Controller extends Page_Controller {

/*Function LatesNews simply runs a database query that gets the latest news articles
from the database. By default, this is five, but you can change it by passing a
number to the function. */

function LatestNews($num=2) {
$news = DataObject::get_one("ArticleHolder");
return ($news) ? DataObject::get("ArticlePage", "ParentID = $news->ID", "Date DESC", "", $num) : false;
}
function results($data, $form){
$data = array(
'Results' => $form->getResults(),
'Query' => $form->getSearchQuery(),
'Title' => 'WYNIKI WYSZUKIWANIA'
);
$this->Query = $form->getSearchQuery();

return $this->customise($data)->renderWith(array('Page_results', 'Page'));
}
parent::init();
Requirements::javascript('mysite/javascript/jquery-1.8.1.min.js');
Requirements::javascript('mysite/javascript/newsrotation.js');
}

}

// HomePage.ss

<div id="hcontent">
<div id="hcontent" class="linia1">
<div id="hcontent" class="komorka1">

</div>

<div id="hcontent" class="komorka2">
<div id="hcontent" class="baner">
</div>
<div id="hcontent" class="news">
<% if LatestNews %>
<ul id="NewsList">

<% control LatestNews %>
<div>
<li class="newsDateTitle" style="font-size: 1.2em"><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">$Title</a></li>
<li class="newsDateTitle" style="color: #949a94">$Date.Nice</li>
<li class="newsSummary">$Content.FirstParagraph<br /><br /><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">Wiecej &gt;&gt;</a></li>
</div>
<% end_control %>
</ul>
<% end_if %>
</div>
</div>
</div>
</div>

I use ss 2.4.7 and my code looks a bit different as You wrote... I don't know how to solved this issue...

Many thanks for help in advance
Peter

I don't see any obvious problems with the code. Can you be more specific? What does not work?

HI Jak,

thx for fast reply. I struggled a bit with code and it works finally. The problem was that after I made the changes, nothing really happend. I changed a bit HomePage.ss and newsrotation.js and it's ok.

This is my whole code:

//HomePage.ss

<div id="hcontent">
<div id="hcontent" class="linia1">
<div id="hcontent" class="komorka1">

</div>

<div id="hcontent" class="komorka2">
<div id="hcontent" class="baner">
</div>
<div id="hcontent" class="news">
<% if LatestNews %>
<ul id="NewsList">

<% control LatestNews %>
<div class="latest-news">
<li class="newsDateTitle" style="font-size: 1.2em"><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">$Title</a></li>
<li class="newsDateTitle" style="color: #949a94">$Date.Nice</li>
<li class="newsSummary">$Content.FirstParagraph<br /><br /><a href="$Link" title="Czytaj wiecej o&quot;{$Title}&quot;">Wiecej &gt;&gt;</a></li>
</div>
<% end_control %>
</ul>
<% end_if %>
</div>
</div>
</div>
</div>

// HomePage.php

<?php
/**
* Defines the HomePage page type
*/

class HomePage extends Page {
static $db = array(
);
static $has_one = array(
);
/* part changing icon in admin panel for 'home' */
static $icon = "themes/tutorial/images/treeicons/home";
}

class HomePage_Controller extends Page_Controller {

/*Function LatesNews simply runs a database query that gets the latest news articles
from the database. By default, this is five, but you can change it by passing a
number to the function. */

function LatestNews($num=2) {
$news = DataObject::get_one("ArticleHolder");
return ($news) ? DataObject::get("ArticlePage", "ParentID = $news->ID", "Date DESC", "", $num) : false;
}
function results($data, $form){
$data = array(
'Results' => $form->getResults(),
'Query' => $form->getSearchQuery(),
'Title' => 'WYNIKI WYSZUKIWANIA'
);
$this->Query = $form->getSearchQuery();

return $this->customise($data)->renderWith(array('Page_results', 'Page'));
}
public function init(){

parent::init();
Requirements::javascript('mysite/javascript/jquery-1.8.1.min.js');
Requirements::javascript('mysite/javascript/newsrotation.js');
}

}

// newsRotation.js

var showNews = 1;
function rotateNews(){
var newsItems = jQuery('.latest-news');
newsItems.addClass('hide');
jQuery('.latest-news:nth-child(' +showNews+')').removeClass('hide');
showNews = showNews + 1;
if(showNews > newsItems.length){
showNews = 1;
}
}
jQuery(function(){
window.setInterval(function(){rotateNews()}, 5000); //call rotate news every 5 seconds.
})

One more time many thanks for Your time.

BR
Peter