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

All times are UTC




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Upcoming events als rotator
PostPosted: Wed Mar 24, 2010 5:22 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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
Quote:
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:
$(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:
{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:
<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:
#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:
<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


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  [ 1 post ] 

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:  
A2 Hosting