Ask your WordPress questions! Pay money and get answers fast! (more info)

Display Native Wordpress Gallery as Slideshow WordPress

  • SOLVED

Wondering if there is a plugin or another way to display the native Wordpress gallery as a very simple slideshow - no thumbnails, no dots, just arrows on the sides. I am also wondering if it is possible for it to be 100% responsive and also NOT crop images - just resize them to a specified height. Does anybody know of a plugin or workaround to make this happen?

Thank you! Site is www.amandahakan.com - no slideshow yet but should be about that size.

Answers (3)

2015-05-23

Dbranes answers:

If you're using JetPack, then you get extra options regarding the native gallery shortcode:

[[LINK href="http://jetpack.me/tag/slideshows/"]]http://jetpack.me/tag/slideshows/[[/LINK]]


paulwagenblast comments:

Is there any way to style that Jetpack slideshow?


paulwagenblast comments:

This slideshow is also not responsive - any other suggestions?


Dbranes comments:

It's supposed to be responsive, check for example:

[[LINK href="https://wordpress.org/support/topic/slideshow-not-responsive"]]https://wordpress.org/support/topic/slideshow-not-responsive[[/LINK]]

and [[LINK href="http://bit.ly/1GvSrYc"]]here's[[/LINK]] the site mentioned in that thread. It uses the slideshow and it looks responsive with some style modifications.


paulwagenblast comments:

It is not fully responsive - seems to have a minimum width set and stops resizing after that. I am interested in something more like this:

http://www.danielpshea.com

Any ideas?


Dbranes comments:

Most likely you've got $content_width that restricts it.

---

Another plugins that transform [gallery] to slideshow:

[[LINK href="https://wordpress.org/plugins/gallery-slideshow/"]]https://wordpress.org/plugins/gallery-slideshow/[[/LINK]]

[[LINK href="https://wordpress.org/plugins/photospace-responsive/"]]https://wordpress.org/plugins/photospace-responsive/[[/LINK]]

[[LINK href="https://wordpress.org/plugins/jsj-gallery-slideshow/"]]https://wordpress.org/plugins/jsj-gallery-slideshow/[[/LINK]]

[[LINK href="https://wordpress.org/plugins/rps-image-gallery/"]]https://wordpress.org/plugins/rps-image-gallery/[[/LINK]]

but I haven't tested them.

2015-05-23

timDesain Nanang answers:

put the following code into theme's functions.php

add_filter('use_default_gallery_style', '__return_false');
add_filter('post_gallery', 'wpq_wp_gallery', 1, 2);
function wpq_wp_gallery($empty, $attr){
$post = get_post();

if( ! empty( $attr['ids'] ) ) {
if( empty( $attr['orderby'] ) ) $attr['orderby'] = 'post__in';
$attr['include'] = $attr['ids'];
}

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 ? $post->ID : 0,
'captiontag' => '',
'include' => '',
'exclude' => '',
'columns' => '1'
), $attr, 'gallery'));

$id = intval($id);

if( !empty($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) ) {
$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;
}
$output = '';
$output .= '<ul class="bxslider">';
foreach ( $attachments as $att_id => $attachment ) {
$output .= '<li><img src="'.wp_get_attachment_url( $att_id ).'" title="'.esc_attr($attachment->post_title).'" /></li>';
}
$output .= '</ul>';
return $output;
}

add_action('wp_enqueue_scripts', 'wpq_scripts_bxslider' , 999);
function wpq_scripts_bxslider() {
wp_enqueue_style('bxslider-css', 'http://bxslider.com/lib/jquery.bxslider.css', '', '4.1.2', true);
wp_enqueue_script('bxslider-js', 'http://bxslider.com/lib/jquery.bxslider.js', array('jquery'), '4.1.2', true);
}

add_filter('wp_footer', 'wpq_footer_bxslider', 9999);
function wpq_footer_bxslider() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.bxslider').bxSlider({
mode: 'fade',
pager: false
});
});//jQuery(document)
</script>
<?php
}


Ps: similar with http://www.wpquestions.com/question/showChronoLoggedIn/id/10130


paulwagenblast comments:

Something about this does not work; it keeps saying syntax error and displaying the code on my dashboard or wiping out my site? Is something missing?


timDesain Nanang comments:

hmm, It works on my environment and I can't open your website


paulwagenblast comments:

the website link is [[LINK href="http://www.amandahakan.com"]]http:www.amandahakan.com[[/LINK]] it is opening on my screen? i can't get around the syntax error with your code...