change wordpress gallery shortcode to slider

by

Hi I wanted to change the default WordPress gallery short-code and make it a slider.

   remove_shortcode( 'gallery' );
function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => 3,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'

        );
        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/lightbox.js"></script>
<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>
<link rel="stylesheet" href="'. get_bloginfo( 'template_directory' ) .'/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
';
        $output .= '
        <script type="text/javascript">
   jQuery(window).load(function() {
         jQuery(".gallery-slider").bjqs({

width : 639,
height : 300,
animtype : "slide", 
animduration : 450, 
animspeed : 4000, 
automatic : false,
showcontrols : true, 
centercontrols : false, 
nexttext : "Next", 
prevtext : "Prev",
showmarkers : false, 
centermarkers : false, 
keyboardnav : true, 
hoverpause : true, 
usecaptions : true, 
randomstart : true, 
responsive : true 
});
     });
</script>';

$output .= "<div class="gallery-slider" style="margin-bottom:10px;"><ul class="bjqs">";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
            $output .= "<a rel="example_group" href="".wp_get_attachment_url( $attachment->ID )."" title="". get_the_title()."">";
            $output .= "<img width="639px" height="300px" src="".wp_get_attachment_url( $attachment->ID )."" />";
            $output .= "</a>";
             $output .= "</li>";    


              }
             $output .= " </ul></div>";
  }
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );

3 Answers
3

this code removes the wordpress native gallery in which shows thumbnails and calls the permalink to attachment.php where it shows the image by itself.

the following code makes it a slider using a easy slider with limited animation and transition effects.

1. Calls the arguments for the transition effect and call the js

            $output .= '
            <script type="text/javascript">
       jQuery(window).load(function() {
             jQuery(".gallery-slider").bjqs({

    width : 639,
    height : 300,
    animtype : "slide", 
    animduration : 450, 
    animspeed : 4000, 
    automatic : false,
    showcontrols : true, 
    centercontrols : false, 
    nexttext : "Next", 
    prevtext : "Prev",
    showmarkers : false, 
    centermarkers : false, 
    keyboardnav : true, 
    hoverpause : true, 
    usecaptions : true, 
    randomstart : true, 
    responsive : true 
    });
         });
    </script>';

2. Output the slider effect.

$output .= "<div class="gallery-slider" style="margin-bottom:10px;"><ul class="bjqs">";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
             $output .= "<img src="".wp_get_attachment_url( $attachment->ID )."" />";
             $output .= "</li>";    
        }
             $output .= " </ul>";
  }
  return $output;

  }

below you put it all together. with the js and the arguments to set the transition effects.

remove_shortcode( 'gallery' );
    function gallery_filter( $atts, $content = null ) {

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'numberposts' => 3,
        'post_parent' => $post->ID,
        'order' => 'ASC',
        'orderby' => 'menu_order',
        'post_mime_type' => 'image'

        );
        $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
        $output .= '
        <script type="text/javascript">
   jQuery(window).load(function() {
         jQuery(".gallery-slider").bjqs({

width : 639,
height : 300,
animtype : "slide", 
animduration : 450, 
animspeed : 4000, 
automatic : false,
showcontrols : true, 
centercontrols : false, 
nexttext : "Next", 
prevtext : "Prev",
showmarkers : false, 
centermarkers : false, 
keyboardnav : true, 
hoverpause : true, 
usecaptions : true, 
randomstart : true, 
responsive : true 
});
     });
</script>';

$output .= "<div class="gallery-slider" style="margin-bottom:10px;"><ul class="bjqs">";

  $attachments = get_posts( $args );

    if ( $attachments )
    {
        foreach ( $attachments as $attachment )
        {                   
             $output .= "<li>";
             $output .= "<img src="".wp_get_attachment_url( $attachment->ID )."" />";
             $output .= "</li>";    
        }
             $output .= " </ul>";
  }
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );

now i am having an issue with it outputting 5 images instead of all 3 attachment images. Images are repeating twice. Any help would be appreciated and would update the final answer.

Leave a Comment