CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Upcoming events als rotator

https://forum.cmsmadesimple.org/viewtopic.php?t=41642

Page 2 of 3

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 8:27 am
by Gregor
Calimer0 wrote: Hoi Gregor,

Je kan ook eens proberen gebruik te maken van jQuery, bijv: http://sixrevisions.com/tutorials/javas ... ng-jquery/

Groeten,
Michael
Hoi Michael,

Ik heb er naar gekeken en ziet er wel fraai uit :) Nu zag ik dit stukje code:

Code: Select all

<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!-- Content for slide 1 goes here -->
    </div>
    <div class="slide">
      <!-- Content for slide 2 goes here. -->
    </div>
    <div class="slide">
      <!-- Content for slide 3 goes here. -->
    </div>
    <div class="slide">
      <!-- Content for slide 4 goes here. -->
    </div>
  </div>
</div>
<!-- Slideshow HTML -->
en ben ik geneigd om de tag die de upcoming events genereerd, steeds 1 event te laten zien en een volgende tag het event enzo verder. Of is dat te eenvoudig?

Gregor

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 8:29 am
by Calimer0
Hoi Gregor,

De tag die die upcoming events laat zien, die laat je iig het eerste en laatste stuk uithoesten.
in een foreach met al je upcoming events kan je dan elke event laten echo'en:

Code: Select all

echo '    <div class="slide">
     Blal balbabal Over 3 dagen komt er weer een mooi iets aan
    </div>'

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 8:47 am
by Gregor
Calimer0 wrote: Hoi Gregor,

De tag die die upcoming events laat zien, die laat je iig het eerste en laatste stuk uithoesten.
in een foreach met al je upcoming events kan je dan elke event laten echo'en:

Code: Select all

echo '    <div class="slide">
     Blal balbabal Over 3 dagen komt er weer een mooi iets aan
    </div>'
Snelle reactie. Leuk! Ik denk dat ik je nog niet helemaal begrijp. In de template van de site heb ik nu staan:

Code: Select all

<!-- Start Navigation -->
       <div id="sidebar">
          {cms_module module='Calendar' display="upcominglist" limit="4"}
          <h2 class="accessibility">Navigation</h2>
          {menu template='CSSMenu_WSV'}
          <hr class="accessibility" />
Wat bedoel je met 'het eerste en het laatste stuk'? En is zit dan de tag {cms_module module='Calendar' display="upcominglist" limit="4"} in de foreach loop?

Klinkt voor mij als hogere cmsms-kunde ;)

Gregor

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 8:50 am
by Calimer0
Hoi Gregor,

Wat je kan doen is in je template van je Calendar dat stuk zetten wat ik net zei.

Dan tussen die {foreach} tags dat stukje wat ik net zei en dan ipv die Bla bla het stukje van je event.
Verder moet je nog de nodige javascripts in de header van je normale template zetten.

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 8:56 am
by Gregor
Ah, dank je wel Michael, deze uitleg begrijp ik. Dit gaat een avond klusje worden. Zal vast op dit forum worden vervolgd ;)

Gregor

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 9:23 am
by Gregor
Hoi Michael,

Ik lees nog even aandachtig je post en er is een vraag die bij me boven komt, nl.
Calimer0 wrote: Dan tussen die {foreach} tags dat stukje wat ik net zei en dan ipv die Bla bla het stukje van je event.
De events komen uit de Calendar vandaan en niet als losse tekst. Hoe vis ik dan de agenda-items als upcoming event uit die bewuste tag???

Gregor

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 9:25 am
by Calimer0
Als het goed is heeft je Calendar module een eigen template, daar kan je dit inzetten. CG Kalender heeft in ieder geval Sjablomen/Templates.

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 9:27 am
by Gregor
Dat klopt, er is een tabblad "upcoming events" met de volgende code:

Code: Select all

<div class="calendar-upcominglist" id="{$table_id}">
{if $compact_view neq 1}
<!-- <h2>{$lang.upcoming_events}</h2> -->
<h2>Activiteiten</h2>
{/if}
{foreach from=$events key=key item=event}
	<div class="calendar-event">
	<h6>{$event.event_title}</h6>

	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}</div>
	{else}
	{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
<!-- origineel met tot
<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%H:%M"}</div>
-->
	{else}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} </div>

<!-- origineel met tot
<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%d"} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%Y %H:%M"}</div>
-->
	{/if}
	{/if}
<!--	{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "<br />"))}
		<div class="calendar-summary"><span class="calendar-summary-title">{$lang.summary}: </span>{$event.event_summary}</div>
	{/if}
-->
	{if $detail == 1}
		{if $event.event_details !="" && $event.event_details != "<br />"}
		<div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
		{/if}
	{else}
		<a href="{$event.url}">{$moretext}</a>
	{/if}

	</div>
{/foreach}

{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
</div>

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 9:31 am
by Calimer0
Nu zit die slideshow erin, je moet alleen nog die javascript includen.

Code: Select all

<div class="calendar-upcominglist" id="{$table_id}">
{if $compact_view neq 1}
<!-- <h2>{$lang.upcoming_events}</h2> -->
<h2>Activiteiten</h2>
{/if}
<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
{foreach from=$events key=key item=event}
    <div class="slide">
	<div class="calendar-event">
	<h6>{$event.event_title}</h6>

	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}</div>
	{else}
	{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
<!-- origineel met tot
<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%H:%M"}</div>
-->
	{else}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} </div>

<!-- origineel met tot
<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"} {$lang.to} {$event.event_date_end|date_format:"%d"} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%Y %H:%M"}</div>
-->
	{/if}
	{/if}
<!--	{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" ||  $event.event_details == "<br />"))}
		<div class="calendar-summary"><span class="calendar-summary-title">{$lang.summary}: </span>{$event.event_summary}</div>
	{/if}
-->
	{if $detail == 1}
		{if $event.event_details !="" && $event.event_details != "<br />"}
		<div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
		{/if}
	{else}
		<a href="{$event.url}">{$moretext}</a>
	{/if}

	</div>
    </div>
{/foreach}
  </div>
</div>
<!-- Slideshow HTML -->
{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
</div>

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 9:52 am
by Gregor
Met zo'n voorzet, kan ik het niet laten een eerste poging te wagen ;)
Nog even zonder javascript, maar met scroll bars:
http://www.wsv-herkingen.nl/index.php

Gregor

Re: Upcoming events als rotator

Posted: Thu Mar 18, 2010 4:19 pm
by Gregor
Een eerste voorzet, de template Upcoming Events (binnen Calendar)

Code: Select all

<div class="calendar-upcominglist" id="{$table_id}">
{if $compact_view neq 1}
<!-- <h2>{$lang.upcoming_events}</h2> -->
<h2>Activiteiten</h2>
{/if}
<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
  {foreach from=$events key=key item=event}
    <div class="slide">
    <!-- <div class="calendar-event"> -->
	<h6>{$event.event_title}</h6>
	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}</div>
	{else}
	   {if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	   <div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
	   {else}
	   <div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
	   {/if}
	{/if}
	{if $detail == 1}
	   {if $event.event_details !="" && $event.event_details != "<br />"}
	   <div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
	   {/if}
	{else}
	   <a href="{$event.url}">{$moretext}</a>
	{/if}
	<!-- </div> -->
    </div>
    {/foreach}
  </div>
</div>

<!-- Slideshow HTML -->
{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
</div>
In de 3-kolommen template heb ik toegevoegd:

Code: Select all

{literal}
<!-- script voor upcoming events rotator op 1e pagina -->
<__script__ type="text/javascript" src="uploads/Javascripts/jquery.js"></__script>
<__script__ type="text/javascript" src="uploads/Javascripts/rotator.js"></__script>
rotator.js heeft de code die in de site waar Michael naar verwijst, is weergegeven.

Calendar wordt aangeroepen in de template met:
{cms_module module='Calendar' display="upcominglist" limit="8"}

In de stylesheet van de 3-kolommen template heb ik bovenin toegevoegd:

Code: Select all


#slideshow #slidesContainer {
  margin:0 auto;
  width:220px;
  height:130px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:200px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:auto;
}


/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:auto;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(/images/cms/arrow-l.gif) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(/images/cms/arrow-r.gif) no-repeat 0 0;
}
De site www.wsv-herkingen.nl blijft redelijk hardnekkig geen scoll bars o.i.d. tonen. Als ik een bijna lege template en pagina maak, dan geeft http://www.wsv-herkingen.nl/index.php?page=test wel een horizontale scroll mogelijkheid, alleen gebeurt dat handmatig.
jquery is versie 1.4.2, gedownload van de jquery-site.

Nog wat zoekwerk te doen....

Gregor

Re: Upcoming events als rotator

Posted: Sat Mar 20, 2010 1:23 pm
by Gregor
Het geheel ziet er werkend uit. Nog wat gedoe om de css juist in te stellen. Maar dat komt eraan.

Nu wordt er van links naar rechts gescrolled. Ik zou dit graag van boven naar beneden willen doen en automatisch. Iemand met js-ervaring die daar een oplossing voor heeft? De suggestie op de site van http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ voor een float:left; die werkt niet. Iemand?

Gregor

Re: Upcoming events als rotator

Posted: Sat Mar 20, 2010 1:29 pm
by Rolf
Gregor wrote: Het geheel ziet er werkend uit. Nog wat gedoe om de css juist in te stellen. Maar dat komt eraan.
We zien het wel verschijnen in de Forge  ;)

®  :D

Re: Upcoming events als rotator

Posted: Mon Mar 22, 2010 7:27 am
by Gregor
Rolf wrote: We zien het wel verschijnen in de Forge  ;)

®  :D
met alle plezier. Dit heb ik nog niet eerder gedaan... Maar als ik het werkend heb, zal ik zien hoe ik dat kan plaatsen :)

Gregor

Re: Upcoming events als rotator

Posted: Mon Mar 22, 2010 11:25 am
by Gregor
Got it working  :D (m.b.v. mede-forumers)

Zie links 'Activiteiten':
www.wsv-herkingen.nl

De site draait op versie 1.6.7

In detail:

De benodigde cylce.js heb ik gehaald van http://malsup.com/jquery/cycle/begin.html en na downloaden geplaatst in
uploads/Javascripts
hier staan al mijn .js-files in.

Plaats de volgende code in rotator.js en upload die file naar voornoemde folder. De code van rotator.js is:

Code: Select all

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 165;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert left and right arrow controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // Set the scrolling of the slides http://malsup.com/jquery/cycle/begin.html
  $('#slideInner').cycle({ 
	   fx:     'scrollDown'
	});
	
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });
In de template:

Code: Select all

{literal}
<!-- script voor upcoming events rotator op 1e pagina -->
<__script__ type="text/javascript" src="uploads/Javascripts/jquery.js"></__script>
<__script__ type="text/javascript" src="uploads/Javascripts/jquery.cycle.all.min.js"></__script>
<__script__ type="text/javascript" src="uploads/Javascripts/rotator.js"></__script>
Het onderstaande dat tussen {} staat, kan ook in een pagina:

Code: Select all

<div id="sidebar">
          {cms_module module='Calendar' display="upcominglist" limit="6"}
Mijn suggestie is om 'limit=x' niet een te hoog aantal te geven, dit i.v.m. de duur voordat een event weer zichtbaar wordt.

In de bij de template behorende stylesheet:

Code: Select all

#slideshow #slidesContainer {
   margin: 0 auto 0 10px;
   overflow:auto; /* allow scrollbar */
   position:relative;
   width: 90%;
   height: 60px;
   left: 5px;
}

#slideshow #slidesContainer .slide {
   width:210px; /* reduce by 20 pixels to avoid horizontal scroll */
float:left;
   height: 45px;
   margin-top: 0;
   margin-left: 5px;
   margin-bottom: 5px;
   padding-bottom: 10px;
}


/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:auto; 
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

/* both control options might be back in place when no rotator function is required
#leftControl {
  top:10;
  left:10;
  background:transparent url(/images/cms/arrow-l.gif) no-repeat 0 0;
  position:relative;
}
#rightControl {
  top:10;
  right:10;
  background:transparent url(/images/cms/arrow-r.gif) no-repeat 0 0;
  position:relative;
}
*/
In de 'Upcoming Event' template van Calendar, is de volgende code geplaatst, ter vervanging van de oorspronkelijke code:

Code: Select all

<div class="calendar-upcominglist" id="{$table_id}">
{if $compact_view neq 1}
<!-- <h2>{$lang.upcoming_events}</h2> -->
<h2>Activiteiten</h2>
{/if}
<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
  {foreach from=$events key=key item=event}
    <div class="slide">
    <!-- <div class="calendar-event"> -->
	<h6>{$event.event_title}</h6>
	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
	{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}</div>
	{else}
	   {if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	   <div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
	   {else}
	   <div class="calendar-date-from"><span class="calendar-date-title">{$lang.date}: </span>{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y %H:%M"}</div>
	   {/if}
	{/if}
	{if $detail == 1}
	   {if $event.event_details !="" && $event.event_details != "<br />"}
	   <div class="calendar-details"><span class="calendar-details-title">{$lang.details}: </span>{$event.event_details}</div>
	   {/if}
	{else}
	   <a href="{$event.url}">{$moretext}</a>
	{/if}
	<!-- </div> -->
    </div>
    {/foreach}
  </div>
</div>

<!-- Slideshow HTML -->
{if $return_url != ""}
<div class="calendar-returnlink">{$return_url}</div>
{/if}
</div>
Gregor
All times are UTC
Page 2 of 3

Powered by phpBB® Forum Software © phpBB Limited