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.