Use this to create the html for the slider:
function jma_nivo($input = array() ){
$defaults = array(
'class' => '',
'acf_field' => 'gallery',
'image_size' => 'tb_grid',
'thumb_size' => 'tb_thumb',
'post_id' => '',
'image_ids' => '',
);
foreach($defaults as $var => $default){
$args[$var] = isset($input[$var]) && $input[$var]? $input[$var]: $default;
}
extract($args);
if(!$post_id){
global $post;
$post_id = $post->ID;
}
$return = '';
if($image_ids || $acf_field){
$return = '<div class="jma-port-slider">';
$return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">';
if($image_ids)
$image_ids = explode(',', $image_ids);
else
$image_ids = get_field($acf_field, $post_id, false);
if($image_ids){
foreach($image_ids as $image_id){
$image_attributes = wp_get_attachment_image_src( $image_id, $image_size );
$thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size );
if($image_attributes)
$return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />';
}
}
$return .= '</div><!--jma-nivo--></div>';
}
return $return;
}then this for shortcode (notice you can add the params to the shortcode directly).
image ids will over-write gallery id and show the images directly:
function nivo_slider($atts){
ob_start();
$x = '';
extract( shortcode_atts( array(
'class' => '',
'acf_field' => 'gallery',
'image_size' => 'tb_grid',
'thumb_size' => 'tb_thumb',
'post_id' => '',
'image_ids' => '',
), $atts ) );
echo jma_nivo(array(
'class'=> $class,
'acf_field'=> $acf_field,
'image_size'=> $image_size,
'thumb_size' => $thumb_size,
'post_id'=> $post_id,
'image_ids' => $image_ids,
));
$x = ob_get_contents();
ob_end_clean();
return str_replace("\r\n", '', $x);
}
add_shortcode('nivo_slider','nivo_slider');or this to add to content:
function jma_nivo_slider_content($content){
$new = jma_nivo(array('class'=> 'new'));
return $content . $new;
}
function jma_site_filters_hooks(){
if(is_singular('portfolio_item') ){
add_filter('the_content', 'jma_nivo_slider_content');
}
}
add_action('template_redirect', 'jma_site_filters_hooks');and this to add the files for nivo slider (http://www.jqueryscript.net/slider/nivo-slider.html)
function jma_nivo_files() {
wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) );
wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) );
wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) );
}
add_action( 'wp_enqueue_scripts', 'jma_nivo_files' );and include in the plugin root a file called jma_meta_js.js and populate it with this code:
jQuery(document).ready(function($){
$(window).load(function() {
$('.jma_nivo').each(function() {
$(this).nivoSlider({
effect: 'random',
animSpeed: 500,
pauseTime: 3000,
controlNav: false,
prevText: '',
nextText: '',
//controlNavThumbs: true,
});
});
});
});