Get gallery images from a Wordpress page and show in a slideshow
//used with Backstretch JQ plugin http://srobbin.com/jquery-plugins/backstretch/
if ($('.cover-section').length) {
var $cover = $('.cover-section');
var imgs = unescape($cover.data('imgids'));
var titles = $cover.data('imgtitles');
var title = '';
var exploded = imgs.split(';');
var explodedtitles = titles.split(';');
$('.cover-section').backstretch(exploded, {duration: 4000, fade: 750});
if (exploded.length > 1) {
$cover.append('<ul class="pagination" />');
$pagn = $cover.find('.pagination');
$.each(exploded, function(i, val) {
if (explodedtitles[i]) {title = ' title="'+explodedtitles[i]+'"';} else {title = '';}
$pagn.append('<li><a href="javascript:;"'+title+'></a></li>');
$pagn.find('a:eq('+i+')').on('click', function() {
$('.cover-section').backstretch("show",i);
});
});
}
$pagn.find('a').first().addClass('current');
$(window).on("backstretch.before", function (e, instance, index) {
$pagn.find('a').removeClass('current');
$pagn.find('li:eq('+index+') a').addClass('current');
});
}
<?php
// Get gallery images from specific page so they could be used in a slideshow via JS and data-attribute
$pattern = get_shortcode_regex();
$imgurlstring = '';
$imgtitlestring = '';
$c = '';
$page_id = 228;
$page_data = get_page( $page_id );
if( preg_match_all( '/'. $pattern .'/s', $page_data->post_content, $matches )
&& array_key_exists( 2, $matches )
&& in_array( 'gallery', $matches[2] ) ):
$keys = array_keys( $matches[2], 'gallery' );
foreach( $keys as $key ):
$atts = shortcode_parse_atts( $matches[3][$key] );
if( array_key_exists( 'ids', $atts ) ) {
$imgarr = explode( ',', $atts['ids'] );
$n = 0;
foreach( $imgarr as $imgid ):
if ($n > 0) {$c = ';';}
$imgsrc = wp_get_attachment_image_src($imgid, 'cover_slideshow');
$imgmeta = wp_get_attachment($imgid);
$imgtitlestring .= $c.htmlspecialchars($imgmeta['caption']);
$imgurlstring .= $c.urlencode($imgsrc[0]);
$n = $n + 1;
endforeach;
$imgurlstring = ' data-imgids="'.$imgurlstring.'"';
$imgtitlestring = ' data-imgtitles="'.$imgtitlestring.'"';
}
endforeach;
endif; ?>
<div class="cover-section"<?php echo $imgurlstring.' '.$imgtitlestring; ?>></div>