Skip to content

Instantly share code, notes, and snippets.

@scottnix
Created June 19, 2013 18:24
Show Gist options
  • Save scottnix/5816616 to your computer and use it in GitHub Desktop.
Save scottnix/5816616 to your computer and use it in GitHub Desktop.
caroufredsel slider setup for Thematic Theme responsive setup, images 1250x425 with post title as caption this runs by tagging a post featured.
/* css */
.slider {
margin: 1.625em 0;
}
.slider ul {
margin: 0;
padding: 0;
}
@media (min-width: 680px) {
.slider ul {
max-height: 425px;
overflow: hidden;
}
}
.slides li {
position: relative;
display: block;
float: left;
}
@media (min-width: 680px) {
.slides li {
opacity: 0.5;
}
}
@media (min-width: 680px) {
.slides li:first-child {
opacity: 1;
}
}
.slides img {
width: 100%;
max-width: 100%;
height: auto;
}
.slide-caption {
background: rgba(0, 0, 0, 0.8);
}
@media (min-width: 680px) {
.slide-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: right;
}
}
.slide-caption a {
display: block;
padding: 0.8125em 1.625em;
}
// php
// script manager template for registering and enqueuing files
function childtheme_slider_script_manager() {
// registers misc custom script, childtheme path, yes dependency is jquery, no version, loads in footer
wp_register_script('cfslider-js', get_stylesheet_directory_uri() . '/js/jquery.carouFredSel-6.2.1.js', array('jquery'), false, true);
if ( is_front_page() ) {
// enqueue the scripts for use in theme
wp_enqueue_script ('cfslider-js');
}
}
add_action('wp_enqueue_scripts', 'childtheme_slider_script_manager');
// post thumbnail sizing for the caroufredsel
// this is the size the images get cropped at on upload, must be 1250x425 at least
add_image_size( 'featured-slider', 1250, 425, true ); // width and height, hard crop
// caroufredsel slider
// reference - http://caroufredsel.dev7studios.com/
function childtheme_slider() {
if ( is_front_page() ) { ?>
<div class="slider">
<ul class="slides">
<?php
query_posts('tag=featured');
if(have_posts()) :
while(have_posts()) : the_post();
?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('featured-slider'); ?></a>
<p class="slide-caption"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><span>Featured:</span> <?php the_title(); ?></a></p>
</li>
<?php
endwhile;
endif;
wp_reset_query(); ?>
</ul>
</div>
<?php }
}
add_action('thematic_belowheader', 'childtheme_slider');
// shitty slider
// reference - http://stackoverflow.com/questions/15832293/issue-with-responsive-height-on-caroufredsel-image-carousel
function childtheme_slider_script() {
if ( is_front_page() ) { ?>
<script>
jQuery(document).ready(function($) {
function imageCarousel() {
var carousel = $('.slides');
var width = $(window).width();
if(width <=680) {
carousel.trigger('destroy');
}
else {
carousel.carouFredSel({
auto: true,
responsive: true,
height: 'auto',
scroll: {
items: 1,
delay: 1000,
easing: 'linear',
duration: 2000, // scroll speed
timeoutDuration: 5000, // how long it pauses on a image
pauseOnHover: 'immediate'
},
swipe: {
onTouch: true,
items: 1
},
items: {
visible: 1,
width: '1250',
height: "50%"
}
});
}
};
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(imageCarousel, 0);
}).resize();
});
</script>
<?php }
}
add_action('wp_head', 'childtheme_slider_script');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment