Upcoming events als rotator

Gregor · Post by **Gregor** » Wed Mar 24, 2010 5:22 am

Zie links 'Activiteiten' op de volgende site voor een voorbeeld:
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