I am working with a template that uses colour box. My problem is that the loop will only link to the featured image that I upload. I need to code the loop so that if I upload a video in the post the colorbox will open with a video player instead of the image. I need to add code to say if video display video link in colorbox. I hope this is clear.
loop.php
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<li><div id="post-<?php the_ID(); ?>">
<div class="post-home">
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
$url = $thumb['0'];
?>
<div class="view view-first">
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php echo $url ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('hp-thumb'); ?>
</a>
<?php endif; ?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p class="link-btn"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'responsive'), the_title_attribute('echo=0')); ?>"><i class="icon-link"></i></a>
<a href="<?php echo $url ?>" title="<?php the_title_attribute(); ?>" rel="colorbox"><i class=" icon-camera"></i></a>
</p>
</div>
</div>
</div><!-- end of .post-home-->
</div><!-- end of #post-<?php the_ID(); ?> -->
home.php
<script type="text/javascript">
jQuery(document).ready(function($) {
var count = 2;
var total = <?php echo $wp_query->max_num_pages; ?>;
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
if (count > total){
return false;
}else{
loadArticle(count);
}
count++;
}
});
function loadArticle(pageNumber){
$('a#inifiniteLoader').show('slow');
$.ajax({
url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
success: function(html){
$('a#inifiniteLoader').hide('1000');
$("#tiles").append(html); // This will be the div where our content will be loaded
$("a[rel='colorbox']").colorbox({
transition:'elastic',
opacity:'0.7',
maxHeight:'90%'
});
}
});
return false;
}
});
</script>