Responsive Nieuws Slider

[pasmaskas]

Beste CMSMS leden,

Een klein cadeautje van mij. 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: Select all

<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: Select all

<__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 alle __ in de code voor je hem opslaat. Ik weet niet waarom ze er staan maar dat gebeurt automatisch als ik een javascript op dit forum zet.

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 waa rje hem wilt hebben).

{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:

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


Dat was het veel plezier er mee

Gr pascal

[JohnnyB]

Thanks for your post pasmaskas
I used Google.com/translate to read it in English and thought I'd paste the translation here for someone else.

CMSMS Dear members,

A little gift from me. You are familiar with this responsive image slider http://responsiveslides.com/.
I modified so that it is a News Slider.

Link to the demo: http://grid.pmkmedia.nl/newsslider/demo/
Zip file: http://grid.pmkmedia.nl/newsslider/newsslider.zip

What should I do:
First, the zip file and extract it from download. Upload the two folders "images" and "js" from the "demo" to the root of your website folder.

What should you do in the new module:
Create a new module in the new field definitions with the name "Photo" and as type "File".
Create a new summary template with the name "news slider" and remove the template from the file Samenvattingssjabloon.txt who have zip file is or copy and paste this code:

Code: Select all

<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>

What should you do with Style Sheets:
Go to Format / Style Sheets in the menu and create a new style sheet with the name "news slider" and puts the css file in the "demo / css / responsiveslider.css" in "style.ccs" you do not need.

What should I do with templates:
Go to Layout / Templates menu, and you open a template. Put in the head tag </ head> the following code:

<__script__ src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" type="text/javascript"></__script>
<__script__ src="js/responsiveslides.js" type="text/javascript"></__script>

Code: Select all

  {literal}<__script__ type="text/javascript">
    $(function () {

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

    });
  </__script>{/literal}

__ Remove the double underscores from all the code to use it. I do not know why they are there, but that happens automatically when I put a javascript on this forum.

If you have jquery already loaded, you can forget that line.
Also disconnect the stylesheet "news slider" to the template.

What should I do on the page where I want the news slider:
Put this line on the page where you want the news slider (you can also process it in your template on the place I. rje want him).
{news lang="en_US" summary template="news slider"}
You can also specify how many news reports he may display. Here is an example he shows the last 5 posts:
{news lang="en_US" number="5" summary template="news slider"}

That was a lot of fun with it
Gr pascal

[staartmees]

Also disconnect the stylesheet "news slider" to the template.

must be

Also connect the stylesheet "news slider" to the template.

[pasmaskas]

Thanks JohnnyB for the translation!

[farhadprm]

Thanks for your post pasmaskas.

I would like to know how we could modify your News Slider to get a result like this example:
http://tympanus.net/Development/Elastislide/index.html

Thank you very much

[pasmaskas]

Dear farhadprm,

Ik heb even gekeken in de html van de demo die je mij stuurde en ik zag het gedeelte die de foto’s laat zien:

I just looked in the html of the demo you sent me and I saw in the sections that must show the photographs the next lines:

Code: Select all

<!-- Elastislide Carousel -->
				<ul id="carousel" class="elastislide-list">
					<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
					<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
					<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
					<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
					<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
					<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
					<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
					<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
					<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
					<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
					<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
					<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
					<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
					<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
					<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
					<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
					<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
					<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
					<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
					<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
				</ul>
				<!-- End Elastislide Carousel -->

Ik weet niet waar je de bestanden kan downloaden voor deze slider. Maar als je alles netjes in je website verwerkt van deze slider en onderstaande als nieuws samenvatting sjabloon gebruikt dat hij werkt. Wel de afbeeldingen in het goede formaat snijden.


I do not know where you can download the files for this slider. But if you have everything neatly incorporated into your website and use the code below as news summary template than it may working.

Code: Select all

<ul id="carousel" class="elastislide-list">

   {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}

         </a>

      </li>

{/foreach}

</ul>

sorry for my bad english

gr Pascal