list results in rotating view

13 posts by 2 authors in: Forums > CMS Builder
Last Post: September 26, 2013   (RSS)

Hi

I'm a bit stuck with displaying the list results in a rotating carousel (for example, the "events" here:  http://www.stpaulsburwood.org.au/home.php - with this code that should rotate / scroll to the next event if the arrow is clicked.


Here's the html code, but am at a loss to know where to insert <?php foreach ($eventsRecords as $record): ?> and "end it" with the <?php endforeach ?>

    <?php if (!$eventsRecords): ?>       No records were found!<br/><br/>     <?php endif ?>

list results so it can show 2 events, but then use the "next arrow" to progress to the next events.
 
 
<li>              
<!-- BEGIN .clearfix -->       
<div class="clearfix">            
  <!-- BEGIN .one-half -->      
  <div class="one-half blog-event-one-half">     
  <div class="event-preview">         
  <div class="event-date-wrapper">         
  <div class="event-month"><?php echo $record['month'] ?></div>         
  <div class="event-day"><?php echo $record['day'] ?></div>         
  </div>      
  <div class="event-entry-inner">          
  <h4><a href="<a href="<?php echo $record['_link'] ?>">"><?php echo htmlencode($record['title']) ?></a> <span>Event Time: <i><?php echo htmlencode($record['event_time']) ?></i> / Event Location: <i><?php echo htmlencode($record['event_location']) ?></i></span></h4>      
  <p><?php echo htmlencode($record['brief_event_summary']) ?></p>     
     </div>         
</div>      
       <!-- END .one-half -->       
  </div>        
    <!-- BEGIN .one-half -->     

   <div class="one-half last-col blog-event-one-half">       
        
 <div class="event-preview">         
  <div class="event-date-wrapper">         
  <div class="event-month"><?php echo $record['month'] ?></div>         
  <div class="event-day"><?php echo $record['day'] ?></div>         
  </div>      
  <div class="event-entry-inner">          
  <h4><a href="<a href="<?php echo $record['_link'] ?>">"><?php echo htmlencode($record['title']) ?></a> <span>Event Time: <i><?php echo htmlencode($record['event_time']) ?></i> / Event Location: <i><?php echo htmlencode($record['event_location']) ?></i></span></h4>      
  <p><?php echo htmlencode($record['brief_event_summary']) ?></p>     
     </div>         
</div>           
<!-- END .one-half -->  
       </div>

      <!-- END .clearfix -->       
</div>         
</li>

Many thanks

By Jason - September 16, 2013

Hi,

Is this the same site as your example?  Based on the HTML in the example you provided, it looks like your rotator script is looking for a format like this:

<div id="slider">
  <div class="slider">
    <ul class="slides">

      <?php foreach ($eventsRecords  as $record): ?>

        <li>

          <div class="slider-caption-wrapper">
            <div class="slider-caption">
                
               // put in slider information here
                
            </div>
          </div>

        </li>
      <?php endforeach ?>
      
   </ul>
        
  </div>
      
</div>

Does this look like what you are after?  Hope this helps

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Jason - September 17, 2013

Hi,

Thanks.  I've taken a look at the events carousel at the bottom of the page.  Current it is displaying 2 events at a time with next/previous buttons allowing the user to scroll through the list.  Can you provide some clarification on how you would need this to work differently?

As this is working with a 3rdParty slider script, we can only offer limited support for this.  If you need us to get more involved with integrating this script for events, you can send an email to consulting@interactivetools.com and we can go over some options.

Thanks

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Hi Jason

I don't need my script to work any differently, I just need to know how to insert the CMS builder list code (from my events) into this so it displays in this carosel method.  What I am asking again is how do I insert the script (using the list records) in this type of format?  Is this possible?

If not, how can I just display the two columns (without the next)?

Thanks

By Jason - September 18, 2013

Hi,

Okay, I see.  Are the event records that are currently displaying hardcoded in?  Can you attach the .php file you are currently working with?  If I can see the code that you are using, I should be able to give you a better example of how to do this.

Hope this helps,

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Hi Jason
I have attached the .php file.  Thanks

Attachments:

home.php 13K

By Jason - September 19, 2013

Hi,

I've taken a look at your code and create this example code.  I've had to make a number of assumptions in this code:

  • You have an event section and create a record set called $eventRecords
  • The event section has a field called date, for the date of the event
  • There is a field called time, location, and description

You may have to alter the code to fit with your current set up.

<?php
  $eventsPerSlide = 2;
  $eventCount     = 0;

?>
<div class="text-slider">
<ul class="slides">

<li>

  <?php foreach ($eventRecords as $event): ?>
    <?php
       $eventMonth = date("M", strtotime($event['date']));
       $eventDay   = date("d", strtotime($event['date']));
    ?>
<!-- BEGIN .clearfix -->
<div class="clearfix"> 

<!-- BEGIN .one-half -->
<div class="one-half blog-event-one-half">

<div class="event-preview"> 
  <div class="event-date-wrapper">
    <div class="event-month"><?php echo $eventMonth;?></div>
    <div class="event-day"><?php echo $eventDay;?></div>
   </div>

  <div class="event-entry-inner"> 
    <h4><a href="<?php echo $event['_link'];?>"><?php echo $event['title'];?></a> <span>Event Time: <i><?php echo $event['time'];?></i> / Event Location: <i><?php echo $event['location'];?></i></span></h4>
    <?php echo $event['description'];?>
  </div>
</div>

<!-- END .one-half --> 
</div>
              
   <?php if (++$eventCount % $eventsPerSlide == 0): ?>
     </li><li>
   <?php endif ?>
              
<?php endforeach ?>
        
        </li>
        
      </ul>
</div>



Give this a try and let me know if you have any questions.

Thanks,

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Hi Jason

Thanks for this, but it doesn't allow me to display it in 2 columns - see http://www.stpaulsburwood.org.au/home3.php

The code I have working so far is

   <!-- BEGIN .slider --> <?php   $eventsPerSlide = 2;   $eventCount     = 0;

?>    <div class="text-slider">     <ul class="slides">


     <li>         <?php foreach ($eventsRecords as $record): ?>


      <!-- BEGIN .clearfix -->       <div class="clearfix">              <!-- BEGIN .one-half -->        <div class="one-half">              <div class="event-preview">           <div class="event-date-wrapper">               <div class="event-month"><?php echo $record['month'] ?></div>                <div class="event-day"><?php echo $record['day'] ?></div>


         </div>          <div class="event-entry-inner">            <h4><a href="<?php echo $record['_link'] ?>"><?php echo htmlencode($record['title']) ?></a> <span>Event Time: <i><?php echo htmlencode($record['event_time']) ?></i> / Event Location: <i><?php echo htmlencode($record['event_location']) ?></i></span></h4>           <p><?php echo htmlencode($record['brief_event_summary']) ?></p>          </div>         </div>             <!-- END .one-half -->         </div>                            <?php if (++$eventCount % $eventsPerSlide == 0): ?>      </li><li>    <?php endif ?>               <?php endforeach ?>                 </li>               </ul> </div>                <!-- END .text-slider -->

By Jason - September 24, 2013

Hi,

It looks like we are missing a closing div tag inside the foreach loop.  Try this:

<?php
  $eventsPerSlide = 2;   
  $eventCount     = 0;
?>
<div class="text-slider">
  <ul class="slides">
    <li>
    
    <?php foreach ($eventsRecords as $record): ?>
      <div class="clearfix">
        <div class="one-half">
          <div class="event-preview">
            
            <div class="event-date-wrapper">
              
              <div class="event-month"><?php echo $record['month'] ?></div>
              <div class="event-day"><?php echo $record['day'] ?></div>
               
            </div>
            
            <div class="event-entry-inner">
              <h4><a href="<?php echo $record['_link'] ?>"><?php echo htmlencode($record['title']) ?></a> <span>Event Time: <i><?php echo htmlencode($record['event_time']) ?></i> / Event Location: <i><?php echo htmlencode($record['event_location']) ?></i></span></h4>
              <p><?php echo htmlencode($record['brief_event_summary']) ?></p>
            </div>
            
          </div>
          
        </div>

      </div>
        
        <?php if (++$eventCount % $eventsPerSlide == 0): ?>
          </li><li>
        <?php endif ?>
        
    <?php endforeach ?>
    </li>
  </ul>
</div>

Hope this helps

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/