CMSMS Responsive Newsslider

CMSMS Responsive Newsslider

CMS Made Simple 1.11.x / 1.12 | 14-04-2014 | Pascal Merks | Reacties


Jullie kennen vast deze responsive image slider http://responsiveslides.com/.

Deze heb ik aangepast zodat het een Nieuws Slider wordt.

Link naar de demo: http://grid.pmkmedia.nl/newsslider/demo/
Zip bestand: http://grid.pmkmedia.nl/newsslider/newsslider.zip

 

Wat moet ik doen:

Allereerst download het zip-bestand en pak hem uit. Upload de 2 mappen "images" en "js" uit de map "demo" naar de root van je website.

 

Wat moet je doen in de nieuws module:

Maak in de nieuwsmodule een nieuwe Velddefinities aan met de naam "Foto" en als type "Bestand".

Maak een nieuw Samenvattingssjabloon aan met de naam "newsslider" en haal het sjabloon uit het Samenvattingssjabloon.txt bestand die in heb zip bestand zit of kopieer en plak deze code:

Code:

<div class="callbacks_container">

<ul class="rslides" id="slider">

{foreach from=$items item=entry}

<li>

<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">

{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
{if $field->type == 'file'}
<img src="{$entry->file_location}/{$field->value}" alt="{$entry->title|cms_escape}"/>
{/if}
{/foreach}
{/if}

<div class="caption"><h1>{$entry->title|cms_escape}</h1>

{if $entry->summary}

{eval var=$entry->summary|truncate:250}

{else if $entry->content}

{eval var=$entry->content|truncate:250}

{/if}</div>

</a>

</li>

{/foreach}

</ul>

</div>

 

Wat moet je doen bij Stylesheets:

Ga naar Opmaak/Stylesheets in het menu en maak een nieuwe stylesheet aan met de naam "newsslider" en zet daar de css uit het bestand "demo/css/responsiveslider.css" in "style.ccs" heb je niet nodig.

 

Wat moet ik doen bij Sjablonen:

Ga naar Opmaak/Sjablonen in het menu en open jou sjabloon. Zet in de head tag voor </head> de volgende code:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="js/responsiveslides.js" type="text/javascript"></script>

{literal__}<script type="text/javascript">
$(function () {

// Slideshow
$("#slider").responsiveSlides({
auto: true,
pager: false,
nav: true,
timeout: 5000,
speed: 500,
namespace: "callbacks"
});

});
</script>{/__literal}

 

Verwijder de 2 lage streepjes in {literal__} en {/__literal}.


Mocht je jquery al ingeladen hebben dan kan je die regel vergeten.

Koppel ook de stylesheet "newsslider" aan het Sjabloon.

 

Wat moet ik op de pagina doen waar ik de newsslider wil hebben:

Zet deze regel op de pagina waar je de newsslider wilt hebben (je kunt hem ook in je sjabloon verwerken op de plek waarje hem wilt hebben).

Code:

{news lang="nl_NL" summarytemplate="newsslider"}

 

Je kunt ook nog aangeven hoeveel nieuws berichten hij mag weergeven. Hier een voorbeeld dat hij de laatste 5 berichten weergeeft:

Code:

{news lang="nl_NL" number="5" summarytemplate="newsslider"}

 

Dat was het veel plezier er mee!

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets