looping field collection

node--services--full.tpl.php

$collections = array();
$field_collection_fields = field_get_items('node', $node, 'field_services');

$ids = array();

// Extract the field collection item ids
$ids = array();
foreach ($field_collection_fields as $fc_field) {
  $ids[] = $fc_field['value'];
}

// Load up the field collection items
$items = field_collection_item_load_multiple($ids);

// Loop through the items and extract field values
foreach ($items as $item) {
  $service_name = field_get_items('field_collection_item', $item, 'field_service_name');
  $service_name = array_shift($service_name);
  $service_name = '<h3 class="service__name">' . $service_name['value'] . '</h3>';

  $service_description = field_get_items('field_collection_item', $item, 'field_service_description');
  $service_description = array_shift($service_description);
  $service_description = '<div class="service__description">' . $service_description['value'] . '</div>';

  $service_image = field_get_items('field_collection_item', $item, 'field_image');
  $service_image = array_shift($service_image);

  if (isset($service_image)) {
    $options = array(
      'style_name' => 'service',
      'path' => $service_image['uri'],
      'alt' => '',
//      'attributes' => array(
//        'class' => array('flag__thumb')
//      ),
    );
    $service_image = '<div class="service__thumb flag__thumb" data-bottom="left: -200px; opacity: 0;" data--200-bottom="left: 0; opacity: 1;">' . theme('image_style', $options) . '</div>';
  }

  $services[] = '<div class="service flag">' . $service_image . '<div class="flag__content" data-bottom="padding-left: 0;" data--200-bottom="padding-left: 200px;">' . $service_name . $service_description . '</div></div>';

}