I'm using WooCommerce's Flexslider to, well, slide through a number of posts of a given category. Seen here: http://csl.nsta.org/development/
Hidden behind the image, is the slider's "flex-control-nav"...when styled, this shows as the dots at the bottom of the slider; without styling, they're just an numbered list, showing the number of the slide (1, 2, 3, 4, etc), not to be confused by the post's ID.
I'm trying to change the the content of the that control nav to display the post's title, and maybe even it's category.
I thought this might be done using data attributes for the posts in the slider, and then grabbing those via jquery. My problem is, I can't figure out how to loop through and get each of those post's attributes. I'm assuming I need to do some sort of "foreach" statement?
From the flexslider's jquery, here's the code for the control nav:
setupPaging: function() {
var type = (slider.vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging',
j = 1,
item,
slide;
slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');
if (slider.pagingCount > 1) {
for (var i = 0; i < slider.pagingCount; i++) {
slide = slider.slides.eq(i);
if ( undefined === slide.attr( 'data-thumb-alt' ) ) { slide.attr( 'data-thumb-alt', '' ); }
var altText = ( '' !== slide.attr( 'data-thumb-alt' ) ) ? altText = ' alt="' + slide.attr( 'data-thumb-alt' ) + '"' : '';
item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"' + altText + '/>' : '<a href="#">' + j + '</a>';
if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
var captn = slide.attr( 'data-thumbcaption' );
if ( '' !== captn && undefined !== captn ) { item += '<span class="' + namespace + 'caption">' + captn + '</span>'; }
}
slider.controlNavScaffold.append('<li>' + item + '</li>');
j++;
}
}
In the loop that is setup for the slider, here's the how the title is setup, in hopes of pulling their data attributes:
<h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
I thought if I could replace j with some sort of foreach variable that gets the data-title from the titles.
I'm not sure how to accomplish this. Any suggestions? Thanks!
edit: The slider loop is setup using this:
class genesis_responsive_sliderWidget extends WP_Widget {
function __construct() {
$widget_ops = array( 'classname' => 'genesis_responsive_slider', 'description' => __( 'Displays a slideshow inside a widget area', 'genesis-responsive-slider' ) );
$control_ops = array( 'width' => 200, 'height' => 250, 'id_base' => 'genesisresponsiveslider-widget' );
parent::__construct( 'genesisresponsiveslider-widget', __( 'Genesis - Responsive Slider', 'genesis-responsive-slider' ), $widget_ops, $control_ops );
}
function save_settings( $settings ) {
$settings['_multiwidget'] = 0;
update_option( $this->option_name, $settings );
}
// display widget
function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base );
if ( $title )
echo $before_title . $title . $after_title;
$term_args = array( );
if ( 'page' != genesis_get_responsive_slider_option( 'post_type' ) ) {
if ( genesis_get_responsive_slider_option( 'posts_term' ) ) {
$posts_term = explode( ',', genesis_get_responsive_slider_option( 'posts_term' ) );
if ( 'category' == $posts_term['0'] )
$posts_term['0'] = 'category_name';
if ( 'post_tag' == $posts_term['0'] )
$posts_term['0'] = 'tag';
if ( isset( $posts_term['1'] ) )
$term_args[$posts_term['0']] = $posts_term['1'];
}
if ( !empty( $posts_term['0'] ) ) {
if ( 'category' == $posts_term['0'] )
$taxonomy = 'category';
elseif ( 'post_tag' == $posts_term['0'] )
$taxonomy = 'post_tag';
else
$taxonomy = $posts_term['0'];
} else {
$taxonomy = 'category';
}
if ( genesis_get_responsive_slider_option( 'exclude_terms' ) ) {
$exclude_terms = explode( ',', str_replace( ' ', '', genesis_get_responsive_slider_option( 'exclude_terms' ) ) );
$term_args[$taxonomy . '__not_in'] = $exclude_terms;
}
}
if ( genesis_get_responsive_slider_option( 'posts_offset' ) ) {
$myOffset = genesis_get_responsive_slider_option( 'posts_offset' );
$term_args['offset'] = $myOffset;
}
if ( genesis_get_responsive_slider_option( 'post_id' ) ) {
$IDs = explode( ',', str_replace( ' ', '', genesis_get_responsive_slider_option( 'post_id' ) ) );
if ( 'include' == genesis_get_responsive_slider_option( 'include_exclude' ) )
$term_args['post__in'] = $IDs;
else
$term_args['post__not_in'] = $IDs;
}
$query_args = array_merge( $term_args, array(
'post_type' => genesis_get_responsive_slider_option( 'post_type' ),
'posts_per_page' => genesis_get_responsive_slider_option( 'posts_num' ),
'orderby' => genesis_get_responsive_slider_option( 'orderby' ),
'order' => genesis_get_responsive_slider_option( 'order' ),
'meta_key' => genesis_get_responsive_slider_option( 'meta_key' )
) );
$query_args = apply_filters( 'genesis_responsive_slider_query_args', $query_args );
add_filter( 'excerpt_more', 'genesis_responsive_slider_excerpt_more' );
?>
<div id="genesis-responsive-slider">
<div class="flexslider">
<ul class="slides">
<?php
$slider_posts = new WP_Query( $query_args );
if ( $slider_posts->have_posts() ) {
$show_excerpt = genesis_get_responsive_slider_option( 'slideshow_excerpt_show' );
$show_title = genesis_get_responsive_slider_option( 'slideshow_title_show' );
$show_type = genesis_get_responsive_slider_option( 'slideshow_excerpt_content' );
$show_limit = genesis_get_responsive_slider_option( 'slideshow_excerpt_content_limit' );
$more_text = genesis_get_responsive_slider_option( 'slideshow_more_text' );
$no_image_link = genesis_get_responsive_slider_option( 'slideshow_no_link' );
}
while ( $slider_posts->have_posts() ) : $slider_posts->the_post();
?>
<li>
<?php if ( $show_excerpt == 1 || $show_title == 1 ) { ?>
<div class="slide-excerpt slide-<?php the_ID(); ?>">
<div class="slide-background"></div><!-- end .slide-background -->
<div class="slide-excerpt-border ">
<?php
if ( $show_title == 1 ) {
?>
<h2 data-title="<?php the_title(); ?>" title="<?php the_title(); ?>" class="slider-post-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php
}
if ( $show_excerpt ) {
if ( $show_type != 'full' )
the_excerpt();
elseif ( $show_limit )
the_content_limit( (int)$show_limit, esc_html( $more_text ) );
else
the_content( esc_html( $more_text ) );
}
?>
</div><!-- end .slide-excerpt-border -->
</div><!-- end .slide-excerpt -->
<?php } ?>
<div class="slide-image">
<?php
if ( $no_image_link ) {
?>
<img src="<?php genesis_image( 'format=url&size=slider' ); ?>" alt="<?php the_title(); ?>" />
<?php
} else {
?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php genesis_image( 'format=url&size=slider' ); ?>" alt="<?php the_title(); ?>" /></a>
<?php
} // $no_image_link
?>
</div><!-- end .slide-image -->
</li>
<?php endwhile; ?>
</ul><!-- end ul.slides -->
</div><!-- end .flexslider -->
</div><!-- end #genesis-responsive-slider -->
<?php
echo $after_widget;
wp_reset_query();
remove_filter( 'excerpt_more', 'genesis_responsive_slider_excerpt_more' );
}
/** Widget options */
function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '') );
$title = $instance['title'];
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'genesis-responsive-slider' ); ?> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></label></p>
<?php
echo '<p>';
printf( __( 'To configure slider options, please go to the <a href="%s">Slider Settings</a> page.', 'genesis-responsive-slider' ), menu_page_url( 'genesis_responsive_slider', 0 ) );
echo '</p>';
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$new_instance = wp_parse_args( (array) $new_instance, array( 'title' => '' ) );
$instance['title'] = strip_tags( $new_instance['title'] );
return $instance;
}
}
