tessguefen
6/16/2015 - 10:38 PM
Lotus: Custom Photos Page (with wordpress & ajax)
Lotus: Custom Photos Page (with wordpress & ajax)
jsphotos: function() {
function makeSquares() {
$.each($('.photo-wrap'), function() {
var w = $(this).width();
$(this).css('height', w);
});
}
function imagePopUp() {
$('.photo').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
$('.video a').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
function makeSlider() {
$('#photo-cat-slider').slick({
draggable: false,
slidesToShow: 5,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
},
},
{
breakpoint: 640,
settings: {
slidesToShow: 2
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});
}
function ajaxedPhotos () {
$('#photo-categories a, .custom-pagination a').on('click', function(e) {
e.preventDefault();
$('#js-processing-purchase').show();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
success: function(data) {
$('.content-item').html(data);
}
}).done(function () {
$('#js-processing-purchase').hide();
cornerstoneUX.sharedFunctions.conformDisplay('.photos-hold');
makeSquares();
$(window).resize(function() {
makeSquares();
});
ajaxedPhotos();
makeSlider();
imagePopUp();
});
});
}
ajaxedPhotos();
$(window).resize(function() {
makeSquares();
});
makeSquares();
$.ajax({
cache: true,
crossDomain: true,
dataType: 'script',
url: '../js/jquery.slick.min.js'
}).done(function () {
makeSlider();
});
}<?php
/*
Template Name: Photo Posts -- DO NOT USE
*/
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
/* Custom Pagination */
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
/**
* This first part of our function is a fallback
* for custom pagination inside a regular loop that
* uses the global $paged and global $wp_query variables.
*
* It's good because we can now override default pagination
* in our theme, and use this function in default quries
* and custom queries.
*/
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
/**
* We construct the pagination arguments to enter into our paginate_links
* function.
*/
$pagination_args = array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '&paged=%#%',
'total' => $numpages,
'current' => $paged,
'show_all' => False,
'end_size' => 1,
'mid_size' => $pagerange,
'prev_next' => True,
'prev_text' => __('<span data-icon="8" class="orange prev-next arrow-prev"></span> <span class="txt prev">Previous</span>'),
'next_text' => __('<span class="txt next">Next</span> <span data-icon="9" class="orange arrow-next"></span>'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) {
echo '<div class="column medium-half medium-align-right">';
echo "<nav class='custom-pagination'>";
//echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
echo $paginate_links;
echo "</nav>";
echo '</div>';
}
}
?>
<div id="photo-wrap" class="clearfix">
<div id="photo-categories"<?php if(isset($_GET['photo-cat'])) { echo ' class="loaded"';}?>>
<div class="wrap">
<div class="column whole"><h1 class="orange uppercase fontin-sans bold">Pictures of Our Artisans</h1></div>
<?php
$args=array(
'hide_empty' => 1
);
// Get terms for the WordPress taxonomy
$taxterms = get_terms('photo_categories',$args);
// The aextra fields in the taxonomy are pod fields so you have to make a pod object
$podterms = pods('photo_categories');
//Loop trouhgh the WordPress taxonomy array
echo '<div id="photo-cat-slider" class="clearfix whole">';
foreach($taxterms as $taxterm){
//The WordPress taxonomy data
$tax_slug = $taxterm->slug;
$tax_name = $taxterm->name;
//$tax_description = $taxterm->description;
//$tax_count = $taxterm->count;
//Fetch pod data
$podterms->fetch($taxterm->term_id);
$tax_image = $podterms->get_field('photo_category_image');
$tax_image = $tax_image[0]['guid'];
if (!$tax_image) {
$args = array(
'posts_per_page' => 1,
'post_type' => 'photos',
'tax_query' => array(
array(
'taxonomy' => 'photo_categories',
'field' => 'slug',
'terms' => array($tax_slug)
),
),
);
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post();
$image_id = get_post_thumbnail_id();
$tax_image = wp_get_attachment_image_src($image_id,'medium', true);
$tax_image = $tax_image[0];
endwhile;
}
if (isset($_GET['photo-cat']) && $_GET['photo-cat'] == $tax_slug) {
echo '<div class="column clearfix align-center active photo-category-wrap" data-slug="'.$tax_slug.'" data-title="'.$tax_name.'">';
} else {
echo '<div class="column clearfix align-center inactive photo-category-wrap" data-slug="'.$tax_slug.'" data-title="'.$tax_name.'">';
}
echo '<a href="http://' .$_SERVER['HTTP_HOST'].'/blog/photos-miva/?photo-cat='.$tax_slug.'">';
echo '<div class="cat-image-wrap">';
echo '<img src="'.$tax_image.'" alt="'.$tax_name.'" />';
echo '<div class="on-hover-view uppercase fontin-sans">View All Photos</div>';
echo '</div>';
echo '<div class="category-name uppercase fontin-sans">'.$tax_name.'</div>';
echo '</a>';
echo '</div>';
}
echo '</div>';
?>
</div>
</div>
<!-- End Photo Categories -->
<?php
if (isset($_GET['photo-cat'])) {
$photocat = $_GET['photo-cat'];
$term = get_term_by('slug', $photocat, 'photo_categories');
$photocatName = $term->name;
$postargs = array (
'post_type' => 'photos',
'posts_per_page' => 20,
'photo_categories' => $photocat,
'paged' => $paged,
'page' => $paged,
);
echo '<div id="photos-layout" class="clearfix">';
echo '<div class="wrap">';
$my_query = new WP_Query($postargs);
echo '<div class="column whole row"><h2 class="column medium-half orange uppercase fontin-sans bold">'.$photocatName.'</h2>';
// Pagination
if (function_exists(custom_pagination)) {
custom_pagination($my_query->max_num_pages,2,$paged);
}
echo '</div>';
while ($my_query->have_posts()) : $my_query->the_post();
$text_below_image = get_post_meta( $post->ID, 'text_below_image', true );
$youtube_video = get_post_meta( $post->ID, 'youtube_video', true );
if ($youtube_video) {
// Youtube Video
?>
<div class="column large-one-fifth medium-one-third half video photos-hold">
<a href="http://www.youtube.com/watch?v=<?php echo $youtube_video; ?>">
<div class="video-wrap photo-wrap" data-icon="I">
<img src="https://i.ytimg.com/vi/<?php echo $youtube_video; ?>/hqdefault.jpg" alt="<?php the_title(); ?>" />
</div>
</a>
<div class="photo-text"><?php echo $text_below_image; ?></div>
</div>
<?php } else {
// Regular Photo ?>
<?php
$image_id = get_post_thumbnail_id();
$thumb = wp_get_attachment_image_src($image_id, 'medium', true);
$thumb = $thumb[0];
$large = wp_get_attachment_image_src($image_id, 'large', true);
$large = $large[0];
?>
<div class="column large-one-fifth medium-one-third half photo photos-hold" data-mfp-src="<?php echo $large; ?>" title="<?php echo $text_below_image; ?>">
<div class="photo-wrap">
<img src="<?php echo $thumb; ?>" />
</div>
<div class="photo-text"><?php echo $text_below_image; ?></div>
</div>
<?php } ?>
<?php endwhile;
echo '</div>';
echo '</div>';
wp_reset_postdata();
} // End Check for Photo Cat
?>
<div id="js-processing-purchase" class="processing-purchase" style="display: none;"><img src="../images/icons/reload.gif" alt="Processing..." title="Processing..."></div>
</div>