Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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' );
share|improve this question
    
Which foreach? I don't recognize gallery_first_image. Where did that come from from? Based on the way you are using it I'd expect it to return a string... just a guess though. –  s_ha_dum Dec 6 '12 at 5:07
    
for each gallery image it outputs the following. I know I am using it wrong thought. –  wordpress_designer Dec 6 '12 at 5:11
    
No. You use foreach several times. Which time triggers the error? Do you know? If so, please narrow the problem down. –  s_ha_dum Dec 6 '12 at 5:14
    
That is probably a new question. It would be nice of you to answer your own question and show the solution, for the sake of anyone else with a similar problem. –  s_ha_dum Dec 6 '12 at 19:06
    
the li causes this error, if you remove the li it shows 3 images and function works perfectly, with li this works but it repeats the images –  wordpress_designer Dec 6 '12 at 20:40
add comment

2 Answers

up vote 0 down vote accepted

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.

share|improve this answer
add comment

Based on what you have above... I would change "numberposts" to "posts_per_page". And then I would change the "get_posts" to "new WP_Query"

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

  extract(shortcode_atts(array('gallery_name' => ''), $args));
    $args = array(
        'post_type'   => 'attachment',
        'posts_per_page' => 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 = new WP_Query( $args );
while ($attachments->have_posts()) : $attachments->the_post(); $do_not_duplicate = $post->ID;               
             $output .= "<li>";
             $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
             $output .= "</li>";    
             endwhile;
             $output .= " </ul>";
             endif;
  return $output;

  }
add_shortcode( 'gallery' , 'gallery_filter' );
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.