I just want to share my image gallery slider mod.
Yes, this theme has a slider but you have to add each slide separately. Yes, this theme has a image gallery but it doesn't have slider effect. It's very easy when you add images as image gallery.
I changed gallery shortcode masonry style to slider effect. If you select masonry, your images shown as slider.
It's for version 21.3.7 and i'm using it.
---
Example:
Yes, this theme has a slider but you have to add each slide separately. Yes, this theme has a image gallery but it doesn't have slider effect. It's very easy when you add images as image gallery.
I changed gallery shortcode masonry style to slider effect. If you select masonry, your images shown as slider.
It's for version 21.3.7 and i'm using it.
EASY METHOD
Add these codes to functions.php in child theme. Because we don't want to break parent theme. Then activate child theme.
Add these codes to functions.php in child theme. Because we don't want to break parent theme. Then activate child theme.
PHP:
/*
Gallery Mod - Start --->
*/
if (! function_exists('sc_gallery')) {
function sc_gallery($attr)
{
$post = get_post();
static $instance = 0;
$instance++;
if (! empty($attr['ids'])) {
// 'ids' is explicitly ordered, unless you specify otherwise.
if (empty($attr['orderby'])) {
$attr['orderby'] = 'post__in';
}
$attr['include'] = $attr['ids'];
}
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (! $attr['orderby']) {
unset($attr['orderby']);
}
}
$html5 = current_theme_supports('html5', 'gallery');
$atts = shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0,
'itemtag' => $html5 ? 'figure' : 'dl',
'icontag' => $html5 ? 'div' : 'dt',
'captiontag' => $html5 ? 'figcaption' : 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => '',
'link' => '',
'slidesToShow' => '3',
'slidesToScroll' => '1',
'autoplaySpeed' => '3000',
// mfn custom ---------------------------
'style' => '', // [default], flat, fancy, masonry, slider!
'greyscale' => '',
), $attr, 'gallery');
// Muffin | Custom Classes -----------------
if ($atts['style'] == 'masonry') {
$atts['style'] == 'slider';
$atts['itemtag'] = 'div';
$atts['icontag'] = 'div';
$atts['slidesToShow'] = $atts['columns'];
$atts['columns'] = 1;
}
$class = $atts['link'];
if ($atts['style']) {
$class .= ' '. $atts['style'];
}
if ($atts['greyscale']) {
$class .= ' greyscale';
}
$id = intval($atts['id'], 10);
if ('RAND' == $atts['order']) {
$atts['orderby'] = 'none';
}
if (! empty($atts['include'])) {
$_attachments = get_posts(array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif (! empty($atts['exclude'])) {
$attachments = get_children(array( 'post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ));
} else {
$attachments = get_children(array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ));
}
if (empty($attachments)) {
return '';
}
if (is_feed()) {
$output = "\n";
foreach ($attachments as $att_id => $attachment) {
$output .= wp_get_attachment_link($att_id, $atts['size'], true) . "\n";
}
return $output;
}
$itemtag = tag_escape($atts['itemtag']);
$captiontag = tag_escape($atts['captiontag']);
$icontag = tag_escape($atts['icontag']);
$valid_tags = wp_kses_allowed_html('post');
if (! isset($valid_tags[ $itemtag ])) {
$itemtag = 'dl';
}
if (! isset($valid_tags[ $captiontag ])) {
$captiontag = 'dd';
}
if (! isset($valid_tags[ $icontag ])) {
$icontag = 'dt';
}
$columns = intval($atts['columns'], 10);
$itemwidth = $columns > 0 ? (ceil(100/$columns*100)/100 - 0.01) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "sc_gallery-{$instance}";
$gallery_style = '';
if (apply_filters('use_default_gallery_style', ! $html5)) {
$gallery_style = "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}
#{$selector} img {
border: 2px solid #cfcfcf;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
/* see sc_gallery() in functions/theme-shortcodes.php */
</style>\n\t\t";
}
$size_class = sanitize_html_class($atts['size']);
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class} {$class}'>";
$output = apply_filters('gallery_style', $gallery_style . $gallery_div);
$i = 0;
foreach ($attachments as $id => $attachment) {
if (! empty($atts['link']) && 'file' === $atts['link']) {
$image_output = wp_get_attachment_link($id, $atts['size'], false, false);
} elseif (! empty($atts['link']) && 'none' === $atts['link']) {
$image_output = wp_get_attachment_image($id, $atts['size'], false);
} else {
$image_output = wp_get_attachment_link($id, $atts['size'], true, false);
}
$image_meta = wp_get_attachment_metadata($id);
$orientation = '';
if (isset($image_meta['height'], $image_meta['width'])) {
$orientation = ($image_meta['height'] > $image_meta['width']) ? 'portrait' : 'landscape';
}
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon {$orientation}'>
$image_output
</{$icontag}>";
if ($captiontag && trim($attachment->post_excerpt)) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ($atts['style'] !== 'slider' && ! $html5 && $columns > 0 && ++$i % $columns == 0) {
$output .= '<br style="clear: both" />';
}
}
if ($atts['style'] !== 'slider' && ! $html5 && $columns > 0 && $i % $columns !== 0) {
$output .= "
<br style='clear: both' />";
}
$output .= "
</div>\n";
if ($atts['style'] == 'slider') {
$output .= "<script type=\"text/javascript\">
jQuery(document).ready(function(){
var slider = jQuery(\"#{$selector}\");
slider.slick({
slidesToShow:{$atts['slidesToShow']},
slidesToScroll:{$atts['slidesToScroll']},
autoplay: true,
autoplaySpeed:{$atts['autoplaySpeed']},
arrows: false
});
// Lightbox | disable on dragstart | childdan geliyoruz
var clickEvent = false;
slider.on('dragstart', '.slick-slide a[rel^=\"lightbox\"]', function(event) {
var events = jQuery(this).data('events');
clickEvent = events.click[0];
jQuery(this).addClass('off-click').off('click');
});
// Lightbox | enable after change
slider.on('afterChange', function(event, slick, currentSlide, nextSlide) {
jQuery('a.off-click[rel^=\"lightbox\"]', slider).removeClass('off-click').on('click', clickEvent);
});
});
</script>";
}
return $output;
}
}
/*
<--- Gallery Mod - End
*/ADVANCED METHOD
Caution: If you don't have experience with php, please do not do this. You have been warned.
You can implement this mod directly to parent theme. With this method, you will add slider option to image gallery object. So you can use masonry and slider separately.
.
Change gallery shortcode in /functions/theme-shortcodes.php with above codes, and;
find this line:
change to this
open /functions/builder/class-mfn-builder-fields.php
find this line 3787:
change to this
Caution: If you don't have experience with php, please do not do this. You have been warned.
You can implement this mod directly to parent theme. With this method, you will add slider option to image gallery object. So you can use masonry and slider separately.
.
Change gallery shortcode in /functions/theme-shortcodes.php with above codes, and;
find this line:
if ($atts['style'] == 'masonry') { change to this
if ($atts['style'] == 'slider') { open /functions/builder/class-mfn-builder-fields.php
find this line 3787:
Code:
'options' => array(
'' => __('Default', 'mfn-opts'),
'flat' => __('Flat', 'mfn-opts'),
'fancy' => __('Fancy', 'mfn-opts'),
'masonry' => __('Masonry', 'mfn-opts'),
),change to this
Code:
'options' => array(
'' => __('Default', 'mfn-opts'),
'flat' => __('Flat', 'mfn-opts'),
'fancy' => __('Fancy', 'mfn-opts'),
'masonry' => __('Masonry', 'mfn-opts'),
'slider' => 'Slider',
),Example:
Last edited:
