Shortcode to Flipbook openen by a button

[cvdw]

Hi!

I have this short code:

[flipbook-popup id=“cantharel_magazine_zomer_2019”]Open magazine.[/flipbook-popup]

This is working now by this textlink but I like to have a button to open this flipbook in this popup.

I can’t find how to do this because in a button I need a url to link to and not a shortcode.

Can you please help me out…?

Regards, Carel

[jade]

Hey Carel,

You can try using the Classic Button shortcode for this. Instead of adding the textlink between the flipbook shortcode, add the button shortcode:

http://demo.theme.co/integrity-1/shortcodes/buttons/

Hope this helps.

[cvdw]

Hi,

This is not working…

I have this code:

[flipbook-popup id="cantharel_magazine_zomer_2019"][button type="flat" shape="square" size="jumbo" href="#example" title="Example" icon_only="true"][icon type="hdd-o"]Open Magazine[/button][/flipbook-popup]```

And you can see at this page: http://www.vanderwyck.nl/wp/test/

The text link Open Magazine is working and the button won't.

[nabeel]

Hi @cvdw,

Please replace your shortcode with the following first:

[flipbook-popup id="cantharel_magazine_zomer_2019"][button class="flipbook-trigger" type="flat" shape="square" size="jumbo" href="#example" title="Example" icon_only="true"][icon type="hdd-o"]Open Magazine[/button][/flipbook-popup]

Then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.flipbook-trigger').click(function(e){
		e.preventDefault();
		$('a[data-fb-id="cantharel_magazine_zomer_2019"]').click();
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[cvdw]

Hi!

Thanks! Yes, this is working! Is this also possible with the Classic button or also with the newer Button element?

Regards, Carel

[nabeel]

Hey @cvdw,

Yes it is possible with the any button element, simply assign the class flipbook-trigger to your button and the JavaScript provided above will take care of the rest.

Cheers!

[cvdw]

Hi Nabeel,

In the button element I went to Customize and at the class field I Filled in flipbook-trigger but than it’s not working.

And something else, If I like to open a image or a video in the same lightbox style (backgroud, closing button), is this possible because the original lightbox of X theme looks complete different.

Thanks in advance!

Carel

[ruenel]

Hello Carel,

Sorry for the confusion. Please do the following.

• In your text element insert this:

[flipbook-popup id="cantharel_magazine_zomer_2019"] [/flipbook-popup]

• Insert a v2 button element, style it and then add a custom class flipbook-trigger

• And then you add the JS code:

jQuery(document).ready(function($){
	$('.flipbook-trigger').click(function(e){
		e.preventDefault();
		$('a[data-fb-id="cantharel_magazine_zomer_2019"]').click();
	});
});

If you want to open an image in a lightbox, please use the responsive lightbox shortcode or maybe you can insert a content area modal instead if you want to use the latest v2 modal element.

Hope this helps.

[cvdw]

Hi, yes I can open an image in the lightbox by a button, see http://www.vanderwyck.nl/wp/ the button “Plattegrond” but is it possible to haven the same closing cross in the right corner as the flipbook (button “Canrharel Magazine” has and get ride of the fullscreen button…?

Thank you for your patience!

Regards, Carel

[rad]

Hi Carel,

Unfortunately, that’s not possible. They are two different element that has different class name which also has different close trigger. It’s possible but it would need customization within the light box library which a 3rd party library which we can’t edit.

Thanks!