Implementing for Wordpress

[chasdevlin68]

First timer here, so apologies if this has been addressed elsewhere.

Is there a current link to how to implement for WP? I'm in the process of hiring a developer to integrate fancybox into a new WP theme, but want to get the most current information and any special considerations etc.

For what it's worth, the lightbox the WP theme has does not include zoom/full screen and merely shrinks large images down (which doesn't work for me) - which is why I want to replace with fancybox.

Anyway, last known link here on this subject was 2017. Also, is this the place to go? Not sure if this is quite the same thing (despite the name).

Thank you.

[fancyapps]

Hi,

If you are looking for official WP plugin, then it is not currently available. You can add fancybox the usual way.

[MrMerkin]

Putting fancybox into a wordpress theme is actually easy and probably more efficient than using a plug-in. You just need to enqueue the stylesheet and the javascript. After that, you code it the way you would on any html page in your theme. With the barebones theme I build off of, I add it to a file other than functions.php, and place the code inside a function that loads all the scripts and styles I need, so put it where it needs to be. Just lookup how to enqueue css and javascript in WordPress. Tons of info on how to do it. You do the same for Jquery if you want a different version than what comes bundled with Wordpress.

// For Fancybox...
add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 999 );
function my_scripts_and_styles() {
	if (!is_admin()) {
		// Fancybox Stylesheet
		wp_enqueue_style( 'fancybox-style', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css' );

		/// Fancybox Script
		wp_enqueue_script( 'fancybox', 'https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js', array(), '3.5.7', true );
	}
}

// And for Jquery...
add_action('wp_enqueue_scripts', 'my_register_script_method');
function my_register_script_method () {
	wp_deregister_script('jquery');
	wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
}

[chasdevlin]

Much appreciate the response! Will definitely refer to this in time. Good stuff, thank you :)

[paaljoachim]

I am updating this tutorial: https://www.easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

I went ahead and added a tutorial for fancyapps4, but I am not yet getting it to work.

Fancybox 4 –> Not yet working.

https://github.com/fancyapps/fancybox https://fancyapps.com/docs/ui/fancybox/

Go to one of the CDN links. I went to: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/

Right clicked and select “Save Link As…” (Download): fancybox.css and fancybox.umd.js

I made a new folder I called fancybox. Added both files into it.

Create a new fancybox-init.js file to initialize fancybox. Add it to the fancybox folder. Add the following code:

<script>
$(document).ready(function() {
$('.fancybox').fancybox({
padding : 0,
openEffect : 'elastic'
});
});
</script>

With the above code one will need to add the CSS class to the image it will be used with. Another approach is to add fancybox to all images:

<script>
$(document).ready(function() {
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
padding : 0,
openEffect : 'elastic'
});
});
</script>

Resource: https://github.com/Feoni4/fancybox

Add the fancybox folder containing fancybox.css, fancybox.umd.js and fancybox-init.js into the root of your child theme. Add the following code to your functions.php file or a code plugin.

/* Enqueue Fancybox */
add_action( 'wp_enqueue_scripts', 'enqueue_fancybox' );
function enqueue_fancybox() {
wp_enqueue_style( 'fancybox-css', get_template_directory_uri(). '/fancybox/fancybox.css' );
wp_enqueue_script( 'fancybox',get_template_directory_uri() . '/fancybox/fancybox.umd.js', array( '' ), '', true );
wp_enqueue_script( 'fancybox-init', get_template_directory_uri() . '/fancybox/fancybox-init.js', array( 'fancybox' ), '', true ); 
}

In WordPress go to a post/page. Add an image and link it to the media file. Test the frontend and see if the lightbox shows up. What obvious error have I made?