Cycle 2 Slider Plugin With wordpress
-
Hi there,
I am using the cycle2 plugin integrated into the wordpress gallery and works like a charm. What i would like it to do is when there is only 1 image to hide the controls and when more than one show them. I spoke to Mike on Github and he gave me a snippet of code and with my additional lines it doesn’t seem to work still. If anyone can spot how to resolve this i’d be grateful.
Maslap JQuery file: http://malsup.github.com/jquery.cycle2.js
Function to hide controls (this is in my header under the script links to jQuery and plugins)
$('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) { if ( opts.slideCount < 1 ) { $(".center").fadeToggle("display", "none"); } });
.cycle-slideshow { height:400px; z-index:0; } .cycle-slideshow img{ width:100%; height:100%; z-index:3; } .center { display:block; } .center a{ z-index:4; position:absolute; margin-top:-48px; } .center a:hover { display:block; } .center a#prev, .center a#next{ position:relative; width:4%; height:60px; width:60px; margin-top:-60px; font-size:40px; text-align:center; color:#FFF; } .center a#next{ float:right; background:url(images/next.png) center -2px no-repeat; } .center a#prev { float:left; background:url(images/prev.png) center -2px no-repeat; }
function custom_gallery( $output, $attr ){ global $post, $wp_locale; static $instance = 0; $instance++; // We're trusting author input, so let's at least make sure it looks like a valid orderby statement if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] ); if ( !$attr['orderby'] ) unset( $attr['orderby'] ); } extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'div', 'columns' => 1, 'size' => 'full', 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if ( 'RAND' == $order ) $orderby = 'none'; if ( !empty($include) ) { $include = preg_replace( '/[^0-9,]+/', '', $include ); $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); $attachments = array(); foreach ( $_attachments as $key => $val ) { $attachments[$val->ID] = $_attachments[$key]; } } elseif ( !empty($exclude) ) { $exclude = preg_replace( '/[^0-9,]+/', '', $exclude ); $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } else { $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } if ( empty($attachments) ) return ''; if ( is_feed() ) { $output = "\n"; foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link($att_id, $size, true) . "\n"; return $output; } $itemtag = tag_escape($itemtag); $captiontag = tag_escape($captiontag); $columns = intval($columns); $itemwidth = $columns > 0 ? floor(100/$columns) : 100; $float = is_rtl() ? 'right' : 'left'; $selector = "gallery-{$instance}"; $size_class = sanitize_html_class( $size ); $gallery_div = "<div class=\"cycle-slideshow\" data-cycle-fx=\"scrollHorz\" data-cycle-pause-on-hover=\"true\" data-cycle-speed=\"200\" data-cycle-next=\"#next\" data-cycle-prev=\"#prev\" data-cycle-swipe=\"true\">"; $output = apply_filters( 'gallery_style', $gallery_div ); $i = 0; foreach ( $attachments as $id => $attachment ) { $image = wp_get_attachment_image( $id, $size ); $output .= ""; $output .= $image; $output .= ""; } $output .= " </div> <div class='center'> <a href='javascript:void(0);' id='prev'> </a> <a href='javascript:void(0);' id='next'> </a> </div> \n"; return $output; } add_filter('post_gallery', 'custom_gallery', 11, 2);
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘Cycle 2 Slider Plugin With wordpress’ is closed to new replies.