Open desandro opened 6 years ago
@desandro - Have tried to implement this as per the above instructions, however I am getting a console error which is breaking the slider.
My code is below, and as you can see I've included the above code before initialisation.
Any idea how to resolve?
Flickity.defaults.viewFullscreenButtonShape = 'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z';
Flickity.defaults.exitFullscreenButtonShape = 'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z';
var svgURI = 'http://www.w3.org/2000/svg';
Flickity.FullscreenButton.prototype.createIcon = function() {
var svg = document.createElementNS( svgURI, 'svg');
svg.setAttribute( 'class', 'flickity-button-icon' );
svg.setAttribute( 'viewBox', '0 0 32 32' );
// path & direction
var path = document.createElementNS( svgURI, 'path');
direction = this.options[ this.name + 'FullscreenButtonShape' ];
path.setAttribute( 'd', direction );
// put it together
svg.appendChild( path );
this.element.appendChild( svg );
};
// Slideshow block
var slider = ('.custom-block.slideshow .flickity');
// Init
$(slider).flickity({
// Options
cellAlign: 'left',
imagesLoaded: true,
adaptiveHeight: true,
prevNextButtons: true,
arrowShape: 'M0,49.8l33.1-33.2h27L36.8,39.8h63.3v19.7H36.7l23.5,23.4H33.2L0,49.8z',
pageDots: false,
fullscreen: true,
viewFullscreenButtonShape: 'M64.8,63.9l0.2,36.1H34.9V63.9H0v-28h34.9V0h30.2v35.9H100v28H64.8z',
exitFullscreenButtonShape: 'M50,70.4L20.2,100L0,79.8l29.8-29.6L0,20.4L20.5,0L50,29.9L79.8,0L100,20.4L70.2,50L100,79.8L79.8,100L50,70.4z',
});
@kaleidografik Sorry about that. I've updated the top comment with correct code, instructions, and CodePen demo
Excellent, thanks @desandro - would love to see this added to core in future.
You may want to set your own custom icon shape for the fullscreen buttons, similar to how you can with
arrowShape
.Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.
I would implement this feature by add two new options:
viewFullscreenButtonShape
andexitFullscreenButtonShape
.Here's a duck-punch to implement custom buttons in your code. You can copy/paste this code before you initialize Flickity to use these options.
You'll need to
pathDirections.view
and.exit
to an SVG path, with a viewbox of 32 x 32. See demo on CodePen: https://codepen.io/desandro/pen/ZVpVYK?editors=0010