• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 6 posts ] 
Author Message
 Post subject: Responsive Nieuws Slider
PostPosted: Fri Jan 10, 2014 9:42 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 509
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:

\$1:
<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:


\$1:
<__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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Nieuws Slider
PostPosted: Mon Jan 13, 2014 10:57 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Tue Nov 21, 2006 5:05 pm
Posts: 731
Location: OH, USA
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.

\$1:
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:
\$1:
<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/jquery/1.8.3/jquery.min.js" type="text/javascript"></__script>
<__script__ src="js/responsiveslides.js" type="text/javascript"></__script>
\$1:
  {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

_________________
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo

--
LinkedIn profile
--
I only speak/write in English so I may not translate well on International posts.
--


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Nieuws Slider
PostPosted: Tue Jan 14, 2014 5:49 am 
Offline
Power Poster
Power Poster

Joined: Wed Mar 19, 2008 4:54 pm
Posts: 1050
\$1:
Also disconnect the stylesheet "news slider" to the template.


must be

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Nieuws Slider
PostPosted: Tue Jan 14, 2014 7:47 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 509
Thanks JohnnyB for the translation!

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Nieuws Slider
PostPosted: Thu Mar 13, 2014 4:31 pm 
Offline
Forum Members
Forum Members

Joined: Mon May 28, 2007 2:40 pm
Posts: 158
Location: Rome
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Nieuws Slider
PostPosted: Fri Apr 04, 2014 7:26 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 509
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:

\$1:
<!-- 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.


\$1:
<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

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: