Support ForumIframe on fancybox – Support Forum

Iframe on fancybox

lvmaster — Wed, 16 Jul 2014 21:37:49 +0000

Is there a way so I can open an Iframe (contact form or other html) inside the Fancybox?!

I already tried using this(extracted from the Fancybox site) with no success.
Iframe

And I saw that when you calls an image with Fancybox it uses “class=openfancybox-image”, different than the original sentence from Fancybox site “class=”fancybox”, can you explain me a little?!

Reply To: Iframe on fancybox

IshYoBoy — Thu, 17 Jul 2014 05:21:03 +0000

Hi Ivmaster,

Yes, we use class “openfancybox-image” to avoid collisions with other plugins which might be using the default fancybox classes.

The link regarding the iframe seems to be broken. Could you please double-check it please?

Doesn’t it work if you create a link containing the class “openfancybox-image” and in the “href” attribute a link to the HTML file that needs to be opened?

Please provide the code you are trying to use exactly. You can use the “CODE” button in this editor in order to wrap the code.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Iframe on fancybox

lvmaster — Thu, 17 Jul 2014 11:30:46 +0000

Hehe, the links isn’t broken, it’s just because what you said, I haven’t used the “CODE” button, sorry.

The code I tried was: Iframe

But it didn’t worked to! I tried what you said about usign the class “openfancybox-image” inside the link and I came with this: Iframe Teste

But it keeps opening in a new page.

Reply To: Iframe on fancybox

IshYoBoy — Thu, 17 Jul 2014 14:54:35 +0000

Hey,

just checked the code above. Seems like there are double quotes in it and one of them are not even regular quotes. Try this:

Iframe Teste

Also could you provide a link where we could see it implemented? Thanks

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Iframe on fancybox

lvmaster — Thu, 17 Jul 2014 15:44:45 +0000

This reply has been marked as private.

Reply To: Iframe on fancybox

lvmaster — Fri, 18 Jul 2014 20:40:52 +0000

Could you see whats going on?!

I sort of managed to do by adding this code:
Iframe

But then the iframe width and height goes weird, how can I set them on my stylesheet?!

Thanks.

Reply To: Iframe on fancybox

IshYoBoy — Mon, 21 Jul 2014 09:31:21 +0000

Hi Ivmaster,

Maybe it will be better not to use the “openfancybox-image” class but to add your custom one and them add javascript code which would setup fancybox for this class but it would also set the exact dimensionz. Maybe check this topic
https://stackoverflow.com/questions/2464870/fancybox-iframe-dimension

E.g.:

HTML:
Iframe

JavaScript:

jQuery(document).ready(function($) {
	jQuery('.my-iframe-link').fancybox({
		'width':300,
		'height':200,
		'type':'iframe',
		'autoScale':'false'
	});
});

jQuery(document).ready(function($) {

jQuery('.my-iframe-link').fancybox({

'width':300,

'height':200,

'type':'iframe',

'autoScale':'false'

});

The JavaScript code can be added either via child theme or using the “Raw JS” element on the exact page where the iframe is used.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Iframe on fancybox

lvmaster — Mon, 21 Jul 2014 15:14:52 +0000

I’m struggling to put it on my child theme, but I’m not familiar to javascript!!!

I tried creating a js folder with the following code:

function fancybox_person() {
jQuery(document).ready(function($) {
    jQuery('.news-form').fancybox({
        'width':300,
        'height':200,
        'type':'iframe',
        'autoScale':'false'
    });
});
}

function fancybox_person() {

jQuery(document).ready(function($) {

jQuery('.news-form').fancybox({

'width':300,

'height':200,

'type':'iframe',

'autoScale':'false'

});

}

And this on the functions.php to call the script:

wp_register_script( 'fancybox_person',  get_stylesheet_directory() . '/js/fancybox.js', 'jquery', "1", true);
wp_enqueue_script( 'fancybox_person' );

1 2	wp_register_script( 'fancybox_person', get_stylesheet_directory() . '/js/fancybox.js', 'jquery', "1", true); wp_enqueue_script( 'fancybox_person' );

But it’s not working.
Would you show me the path to do it?!

Reply To: Iframe on fancybox

IshYoBoy — Tue, 22 Jul 2014 05:17:12 +0000

Hey Ivmaster,

You need to do the following steps:

1. Create a javascript file in your child theme. E.g. “my-custom.js”

2. Enqueue this file in the right time. Add this function to your child theme’s functions.php file:

/* Enqueue your custom scripts */
function my_custom_scripts() {
	wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js");
	wp_enqueue_script( "my-custom-js" );
}
add_action( "wp_enqueue_scripts", "my_custom_scripts");

/* Enqueue your custom scripts */

function my_custom_scripts() {

wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js");

wp_enqueue_script( "my-custom-js" );

}

add_action( "wp_enqueue_scripts", "my_custom_scripts");

3. Make sure the “my-custom.js” file is in the correct path you are using in wp_regiter_script function an so “/assets/js/my-custom.js”.

4. Add the jQuery functionality to it:

jQuery(document).ready(function($) {
	jQuery('.my-iframe-link').fancybox({
		'width':300,
		'height':200,
		'type':'iframe',
		'autoScale':'false'
	});
});

jQuery(document).ready(function($) {

jQuery('.my-iframe-link').fancybox({

'width':300,

'height':200,

'type':'iframe',

'autoScale':'false'

});

This is the right way to do it.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market