Skip to content

Instantly share code, notes, and snippets.

@ThatGuySam
Created February 13, 2013 15:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThatGuySam/4945461 to your computer and use it in GitHub Desktop.
Save ThatGuySam/4945461 to your computer and use it in GitHub Desktop.
<?php if(get_field('posts_category') != ""): ?>
<?php $slide_posts = new WP_Query(); ?>
<?php $slide_posts->query('category_name=' . get_field(posts_category) ); ?>
<?php $count = $slide_posts->post_count; ?>
<section>
<div class="sliderContainer visibleNearby fullWidth clearfix royalSlider-preview">
<div class="rsHeight">
<div id="four-up-gallery" class="carousel-gallery royalSlider rsDefault">
<div class="carouselSlide">
<?php
while ($slide_posts->have_posts()) : $slide_posts->the_post();
if($post->ID != $sticky_1 && $post->ID != $sticky_2 && $post->ID != $sticky_3 && $post->ID != $sticky_4 ):
if($i != 0 && $i % 3 == 0) {echo '</div><div class="carouselSlide">';} ///* *****This splits a slide into 2****** */
?>
<div class="third carouselItem">
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$image = $thumb['0'];
?>
<a href="<?php echo get_permalink($post->ID); ?>">
<div class="carouselItemContent" style="background-image: url('/wp-content/themes/theme/images/gradient-shadow.png'), url('<?php echo $image; ?>');" >
<h3>
<?php echo get_the_title($post->ID); ?>
</h3>
</div>
<div class="shadow">
</div>
</a>
</div>
<?php
$i++;
endif;
endwhile;
echo '</div>';
?>
</div><!-- four-up-gallery -->
</div>
</div>
</section>
<?php
endif;
wp_reset_postdata();
?>
<script id="addJS">jQuery(document).ready(function($) {
var si = $('#four-up-gallery').royalSlider({
slidesSpacing: 0,
sliderDrag: false,
addActiveClass: true,
controlNavigation: 'none',
autoScaleSlider: true,
autoScaleSliderWidth: 1000,
autoScaleSliderHeight: 168,
loop: false,
fadeinLoadedSlide: false,
globalCaption: true,
arrowsNav: true,
arrowsNavAutoHide: false,
arrowsNavHideOnTouch: true,
keyboardNavEnabled: false,
navigateByClick: false
}).data('royalSlider');
// link to fifth slide from slider description.
$('.slide4link').click(function(e) {
si.goTo(4);
return false;
});
$('.rsNext').click(function() {
$('.royalSlider').royalSlider('next');
});
$('.rsPrev').click(function() {
$('.royalSlider').royalSlider('prev');
});
});
</script>
@vieira83
Copy link

vieira83 commented Feb 7, 2014

Hi Thatguy,
what does get_field(posts_category) grab? what field is that?
i have google and haven't found anything. I'm trying to do what you have done display grops of 3 images at once using royal slider.
Thanks

@vieira83
Copy link

vieira83 commented Feb 7, 2014

Also what's the value of $sticky_1, 2, etc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment