News scroller, JQuery ticker

Voor de door UpService ontwikkelde CMS website Kombijsport Atletiek is er een News scroller, JQuery ticker ingezet. Via de CMS module ListIt2 worden berichten ingegeven die op een dynamische wijze voorbij scrollen. Onlangs is er een nieuwe versie van ListIt2 uitgebracht een mooie gelegenheid om eens een voorbeeld onder de loep te nemen.

Stap 0: Voor je begint

Zorg ervoor dat de laatste versie van CMS Made Simple geïnstalleerd is en je de juiste rechten hebt om uitbreidingen te kunnen installeren.

Stap 1: Installeren van benodigde uitbreidingen ListIt2 en JQueryTools

Het ingegeven van ticker berichten verloopt via de ListIt2 module. Het scrolleffect is gebaseerd op JQuery, vandaar dat we deze 2 uitbreidingen gaan installeren.

• Login op het beheergedeelte van je website (/admin).
• Ga naar Uitbreidingen -> Module Manager

Uitbreiding 1: ListIt2

• Ga naar de beschikbare modules tab en selecteer de letter [L]
• ListIt2 Downloaden & Installeren
• Installeer

Uitbreiding 2: JQueryTools

JQueryTools is een module die het makkelijk maakt om de JavaScript bibliotheek JQuery aan je CMS-site toe te voegen.

• Ga naar de beschikbare modules tab en selecteer de letter [J]
• JQueryTools Downloaden & Installeren
• Installeer

Stap 2: Configureren van ListIt2

Met ListIt2 is het mogelijk om verschillende lijsten en velden aan te maken. Eerst defineert je de velden vervolgens worden deze gevuld met informatie.

Het opzetten van een nieuw veld

• Ga naar /admin Inhoud -> ListIt2
• Selecteer de "Velddefenities"-tab
• Klik op "Toevoegen Velddefenitie"
• Maak een nieuw "Tekstinvoer" veld aan:
  
  Naam: Inhoud
  Alias: inhoud
  Handige tip: Geef hier de inhoud weer, smart tags zijn ook toegestaan
  Type: Tekstinvoer
  Verplicht: [x]
  Extra: leeg

Het opzetten van categoriën

Met de ListIt2 module is het mogelijk om ticker items onder te brengen in een category. In deze uitleg wordt er maar van een categorie gebruik gemaakt maar uiteraard is het mogelijk om meerdere categoriën aan te maken, dit kan via de categoriën tab.

Het aanmaken van het samenvattingssjabloon

De ticker berichten worden weergegeven via een samenvattingssjabloon.

• Ga naar /admin -> Inhoud -> ListIt2
• Selecteerd de "Sjablonen" tab
• Klik op "Toevoegen Samenvattingssjabloon"
• Vul in:
  
  Naam sjabloon: ticker

Sjabloon code:

{strip}
{foreach from=$items item=item name=loop}
	{if $smarty.foreach.loop.first}
	{/if}

	{if !empty($item->fielddefs)}
		{foreach from=$item->fielddefs item=fielddef}
			{if $fielddef.name == 'Inhoud'}
<span class="txt_animated">{eval var=$fielddef.value}</span>
			{/if}
		{/foreach}
	{/if}
	{if $smarty.foreach.loop.last}
<span class="txt_animated">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
	{/if}
{/foreach}
{/strip}

Stap 3: ListIt2 toevoegen aan sjablonen

Om de ticker op een webpagina te kunnen weergeven dient deze toegevoegd te worden aan het sjabloon.

Ga naar /admin Opmaak -> Sjablonen en voeg de volgende code toe:

<div id="ticker-container">
    <div class="ticker"><span class="ticker-holder">{ListIt2 action="default" summarytemplate="ticker"}</span></div>{* <!-- /.ticker --> *}
</div>{* <!-- /#ticker-container --> *}

Stap 4: JavaScript code voor de ticker toevoegen

Buiten JQuery is er voor het scrolleffect een stukje JavaScript nodig deze ziet er als volgt uit:

{* voeg jquery toe aan je website *}
{JQueryTools action=incjs no_css=1 exclude="tablesorter,cluetip,form,fancybox,cgform,lightbox"}

{* JavaScript voor nieuwsticker *}

[literal]
<script type="text/javascript">
jQuery(document).ready(function($) {

	try {
				
		var ticker_holder = $('.ticker-holder').get(0);
		var ticker_text = $('.ticker').get(0);
		var ticker_pos = ticker_text.parentNode.offsetWidth;

		// width, height, direction (right, left, up, down) loop, bgcolor, behavior (scroll, slide, alternate), scrollamount
		
		var ticker_data = $(ticker_holder).html();
		$(ticker_text).parent().html('<marquee direction="left" scrollamount="3" scrolldelay="1" id="marker">' + ticker_data + '</marquee>');
				
		$('#ticker-container').hover
		(
			function() { 
			    $('marquee', this).get(0).stop();
			    $('#ticker-container span[class^="txt"]').attr('class', 'txt_static');    
			},
			function() { 
			    $('marquee', this).get(0).start();
			    $('#ticker-container span[class^="txt"]').attr('class', 'txt_animated');    
			}
		);

		
	}
	catch (o) {}
	
});
</script>
[/literal]

Stap 5: CSS code voor de de ticker toevoegen

Tussen iedere nieuwsbericht is een animerende gif afbeelding toegevoegd als je met de muis over een nieuwsbericht rolt wordt de animatie vervangen voor een statische afbeelding.

• /admin -> Opmaak -> Stylesheets

#ticker-container {
  display: inline;
  float: left;
  margin-top: 42px;
  margin-left: 34px;
  width: 420px;
  height: 26px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 85%;
}

#ticker-container .ticker-holder {
  float: left;
}

#ticker-container span.txt_animated {
  display: inline;
  padding-left: 36px;
  margin-right: 5px;
  padding-top: 36px;
  margin-top: 36px;
  line-height: 39px;
  width: 26px;
  height: 26px;
  background-image: url("/images/ticker_animated.gif");
  background-position: left bottom;
  background-repeat: no-repeat;
}

#ticker-container span.txt_static {
  display: inline;
  padding-left: 36px;
  margin-right: 5px;
  padding-top: 36px;
  margin-top: 36px;
  line-height: 39px;
  width: 26px;
  height: 26px;
  background-image: url("/images/ticker_static.gif");
  background-position: left bottom;
  background-repeat: no-repeat;
}

#ticker-container a,
#ticker-container a:visited,
#ticker-container a:active {
  text-decoration: none;
}

#ticker-container a:hover {
  text-decoration: underline;
}

Tot slot:

Voor een werkend voorbeeld kijk op de door UpService ontwikkelde website:

• Kombijsport Atletiek