Slide Carousel class

gistfile1.php

<?php 

class Slide_Carousel {

	/**
	 * class base for this component
	 *
	 * @var string
	 **/
	static $id = 'slide-carousel';
	
	/**
	 * display
	 *
	 * Accepts an array of options, outputs a slide carousel
	 * $options['carousel'] - taxonomy term for selected slide carousel. required.
	 * $options['num_posts'] - maximum number of slides to display. if not specified, there's no limit
	 * $options['slide_order'] - order in which to display the slides. options are date_desc, date_asc, rand
	 * $options['transition'] - transition for the carousel, can be Slide or Fade. Defaults to slide
	 * $options['interval'] - interval for the carousel in ms. Defaults to 5000
	 *
	 * @param $options array
	 * @return void
	 * @author Jessica Yazbek
	 * @uses get_field (Advanced Custom Fields plugin), WP_Query
	**/
	static function display($options)
	{
		global $layout;
		$slide_size = $layout == 'full_width' ? 'full-width' : 'large';

		// get slides
		$args = array(
			'post_type' => 'slide',
			'posts_per_page' => -1,
			'tax_query' => array(
				'taxonomy' => 'carousel',
				'terms' => $options['carousel'],
			),
			
		);
		
		if ($options['num_posts'])
		{
			$args['posts_per_page'] = $options['num_posts'];
		}
		
		$args['orderby'] = 'date';

		switch($options['slide_order'])
		{
			case 'date_desc' :
				$args['order'] = 'DESC';
				break;
			case 'date_asc' : 
				$args['order'] = 'ASC';
				break;
			case 'rand' : 
				$args['orderby'] = 'rand';
				break;
		}
		$slides = new WP_Query($args); 
		
		// loop through results
		if ($slides->have_posts()) : ?>
			<?php $carousel_id = uniqid(); // generate a unique id for use in javascript ?>
			<?php if ($layout == 'full_width') : ?>
				<div class="row carousel-container">
					<div class="span8">
			<?php endif; ?>
			<div class="carousel carousel-component slide<?php echo $options['transition'] == 'Fade' ? ' carousel-fade' : '' ?> <?php echo $slide_size ?>" id="carousel-<?php echo $carousel_id ?>">
					<div class="carousel-inner">
					<!-- Carousel items -->
						<?php while ($slides->have_posts()) : $slides->the_post();
						
							// set up all slide properties and save to post object for use in possible 2nd loop
							$post->link = get_field('link');
							$post->video_url = get_field('video_url');
							if ($post->video_url) : 
								// video url has been specified, get video info
								if (preg_match('%(?:youtube\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i',$post->video_url, $code))
								{
									// youtube
									$post->video_poster = '<img src="https://img.youtube.com/vi/'.$code[1].'/maxresdefault.jpg" alt="Featured video" />';
									$post->video_thumb = '<img src="https://img.youtube.com/vi/'.$code[1].'/1.jpg" alt="Featured video" />';
									$post->provider = 'youtube';
								}
								else if (preg_match('%vimeo\.com\/([0-9]*)%', $post->video_url, $code))
								{
									// vimeo
									$imgid = $code[1];
									$hash = unserialize(file_get_contents("https://vimeo.com/api/v2/video/$imgid.php"));
									$post->video_poster = '<img src="'.$hash[0]["thumbnail_large"].'" alt="Featured video" />';
									$post->video_thumb = '<img src="'.$hash[0]["thumbnail_medium"].'" alt="Featured video" />';
									$post->provider = 'vimeo';
								}
								else
								{
									// video url didn't match youtube or vimeo
									$post->video_url = false;
								}
							endif; ?>
								<div class="<?php echo $slides->current_post == 0 ? 'active' : '' ?> item" data-slide-tag="slide-<?php echo $slides->current_post ?>">
									<?php if ( ! $post->video_url) : // no video, just show featured image ?>
										<?php echo $post->link ? '<a href="'.$post->link.'">' : ''; ?>
										<?php the_post_thumbnail('large') ?>
										<?php echo $post->link ? '</a>' : ''; ?>
									<?php else : // else show video + play button ?>
										<?php wp_enqueue_script('video') ?>
										<div class="video-slide">
											<a href="#modal-video" title="<?php the_title() ?>" class="video" data-provider="<?php echo $provider ?>" data-video_ref="<?php echo $code[1] ?>">
												<?php if (has_post_thumbnail()) :
													// always show featured image if they've selected one
													the_post_thumbnail('large');
												elseif ($post->video_poster) :	
													// attempt to show video service image
													echo $post->video_poster;
												endif; ?>
												<span class="btn"><i class="icon-play"></i> Play</span>
											</a>
										</div>
									<?php endif; ?>
			
									<!-- caption -->
									<div class="carousel-caption">
										<h4><?php echo $post->link ? '<a href="'.$post->link.'">' : ''; ?><?php the_title() ?><?php echo $post->link ? '</a>' : '' ?></h4>
										<?php the_content() ?>
									</div>
								</div>
						<?php endwhile; ?>
					</div>

				<?php if ($slides->post_count > 1) : // only show nav if there's more than one slide ?>
				<!-- Carousel nav -->
				<a class="carousel-control left" href="#carousel-<?php echo $carousel_id ?>" data-slide="prev">&lsaquo;</a>
				<a class="carousel-control right" href="#carousel-<?php echo $carousel_id ?>" data-slide="next">&rsaquo;</a>
				<?php endif; ?>

			</div>

			<?php if ($layout == 'full_width') : // show slide thumb navigation in 2nd loop ?>
					</div> <!-- /.span8 -->
					<div class="span4">
						<!-- Carousel thumbs -->
						<ol class="carousel-thumbs" id="carousel-<?php echo $carousel_id ?>-thumbs">
							<?php while ($slides->have_posts()) : $slides->the_post(); ?>
								<li data-slide-tag="slide-<?php echo $slides->current_post ?>">
									<a href="javascript:void(0);" class="clearfix" >
										<div class="thumb">
											<?php if (has_post_thumbnail()): ?>
												<span><?php the_post_thumbnail('thumb-wide'); ?></span>
											<?php elseif ($post->video_url): ?>	
												<span class="video-thumb"><?php echo $post->video_thumb; ?></span>
											<?php endif ?>
										</div>	
										<div class="title"><?php the_title() ?></div>
									</a>									
								</li>
							<?php endwhile ?>
						</ol>
					</div>
				</div>
			<?php endif ?>

			<?php if ($slides->post_count > 1) : // only bother with fade transition and javascript enqueue if there's more than one slide ?>
				<?php if ($options['transition'] == 'Fade') : ?>
					<?php $options['interval'] += 3000; ?>
				<?php endif; ?>
				
				<?php 
				// enqueue carousel script in footer, add carousel options to global variable for use in footer js
				wp_enqueue_script('gala-carousel');
				$options['carousel_id'] = $carousel_id;
				$GLOBALS['slide_carousels'][] = $options ?>
				<?php add_action('wp_print_footer_scripts', function(){
					global $layout;
					$options = array_shift($GLOBALS['slide_carousels'])
					?>
					<!-- init carousel -->
					<script type="text/javascript">
						$(document).ready(function() {
							gala.carousel = new gala.Carousel({
								<?php if ($layout == 'full_width'): ?>
									thumbs_container: $('#carousel-<?php echo $options['carousel_id'] ?>-thumbs'),
								<?php endif ?>
								interval: <?php echo $options['interval'] ? $options['interval'] : '5000' ?>,
								carousel_container: $('#carousel-<?php echo $options['carousel_id'] ?>')
							});
						});
					</script>
					<?php 
				}, 100); ?>
			<?php endif; ?>
		<?php
		endif;
	}
}

 ?>