Cycle2 Plugin hide controls

Cycle2 Plugin hide controls

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.



Function to hide controls (this is in my header under the script links to jQuery and plugins)

  1. $('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) {
  2. if ( opts.slideCount < 1 ) {
  3. $(".center").fadeToggle("display", "none");
  4. }
  5. });

CSS:

  1. .cycle-slideshow {
  2. height:400px;
  3. z-index:0;
  4. }
  5. .cycle-slideshow  img{
  6. width:100%;
  7. height:100%;
  8. z-index:3;
  9. }
  10. .center {
  11. display:block;
  12. }
  13. .center a{
  14. z-index:4;
  15. position:absolute;
  16. margin-top:-48px;
  17. }
  18. .center a:hover {
  19. display:block;
  20. }
  21. .center a#prev, .center a#next{
  22. position:relative;
  23. width:4%;
  24. height:60px;
  25. width:60px;
  26. margin-top:-60px;
  27. font-size:40px;
  28. text-align:center;
  29. color:#FFF;
  30. }
  31. .center a#next{
  32. float:right;
  33. background:url(images/next.png) center -2px no-repeat;
  34. }
  35. .center a#prev {
  36. float:left;
  37. background:url(images/prev.png) center -2px no-repeat;
  38. }



Integrated Slideshow in Wordpress Gallery (functions.php)

  1. function custom_gallery( $output, $attr ){
  2.     global $post, $wp_locale;

  4.     static $instance = 0;
  5. $instance++;

  7. // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
  8. if ( isset( $attr['orderby'] ) ) {
  9.     $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
  10.     if ( !$attr['orderby'] )
  11.         unset( $attr['orderby'] );
  12. }

  14. extract(shortcode_atts(array(
  15.     'order'      => 'ASC',
  16.     'orderby'    => 'menu_order ID',
  17.     'id'         => $post->ID,
  18.     'itemtag'    => 'div',
  19.     'columns'    => 1,
  20.     'size'       => 'full',
  21.     'include'    => '',
  22.     'exclude'    => ''
  23. ), $attr));

  25. $id = intval($id);
  26. if ( 'RAND' == $order )
  27.     $orderby = 'none';

  29. if ( !empty($include) ) {
  30.     $include = preg_replace( '/[^0-9,]+/', '', $include );
  31.     $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

  33.     $attachments = array();
  34.     foreach ( $_attachments as $key => $val ) {
  35.         $attachments[$val->ID] = $_attachments[$key];
  36.     }
  37. } elseif ( !empty($exclude) ) {
  38.     $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
  39.     $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
  40. } else {
  41.     $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
  42. }

  44. if ( empty($attachments) )
  45.     return '';

  47. if ( is_feed() ) {
  48.     $output = "\n";
  49.     foreach ( $attachments as $att_id => $attachment )
  50.         $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
  51.     return $output;
  52. }

  54. $itemtag = tag_escape($itemtag);
  55. $captiontag = tag_escape($captiontag);
  56. $columns = intval($columns);
  57. $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
  58. $float = is_rtl() ? 'right' : 'left';

  60. $selector = "gallery-{$instance}";


  63. $size_class = sanitize_html_class( $size );
  64. $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\">";
  65. $output = apply_filters( 'gallery_style', $gallery_div );

  67. $i = 0;
  68. foreach ( $attachments as $id => $attachment ) {
  69.     $image = wp_get_attachment_image( $id, $size );
  70.     $output .= "";
  71.     $output .= $image;
  72.     $output .= "";
  73. }

  75. $output .= "
  76.     </div>
  77. <div class='center'>
  78.         <a href='javascript:void(0);' id='prev'>&nbsp;</a> 
  79.         <a href='javascript:void(0);' id='next'>&nbsp;</a>
  80. </div>
  81. \n";

  83. return $output;
  84. }
  85. add_filter('post_gallery', 'custom_gallery', 11, 2);