Tutorial for WordPress

[paaljoachim]

Hi

I am renewing my "Adding a lightbox to WordPress without using a plugin" and further down the page I have earlier mentioned Fancybox 3 which it seems It worked back when I wrote the tutorial.
https://www.easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

Here are the steps mentioned in the tutorial:

The process is very similar to colorbox and Magnific.

1. Download 3.0.zip from one of the above links.
2. Unzip and open fancybox-3.0 -> dist and copy jquery.fancybox.css and jquery.fancybox.min.js.
3. Create a new folder (I called mine lightbox) in the root of the theme you are using. Paste in the css and js files.
4. Create a new js file save it as jquery.fancybox-init.js.
   Add the following js to the init file:

jQuery(function( $ ){
 $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').fancybox({
 }); 
});

The above is the bare bones code to get it to work.

5. Add the following code to your functions.php file:

/* Fancybox 3 - https://fancyapps.com/fancybox/3/ */
add_action('wp_enqueue_scripts', 'enqueue_fancybox_styles');
function enqueue_fancybox_styles() {
 wp_enqueue_style('fancybox_style', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox.css', array());
}
 
add_action('wp_enqueue_scripts', 'enqueue_fancybox_scripts');
function enqueue_fancybox_scripts() {
 wp_enqueue_script('fancybox_script', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox.min.js', array('jquery'));
 
 wp_enqueue_script('fancybox_init_script', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox-init.js', array('jquery'));
}

As Fancybox has switched to fancyapps4.
I copied the code from https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js into a jquery.fancybox.min.js
and
copied the code from https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css into a jquery.fancybox.css file.
and
added a jquery.fancybox-init.js.

It looks like there is something I am not doing right.
Can you help me get the missing pieces in place? I will then add Fancyapps 4 lightbox to my updated tutorial.

[fancyapps]

Hi,

Simply replace

jQuery(function( $ ){
 $(YOUR_SELECTOR).fancybox({
  // Your options
 }); 
});

with

Fancybox.bind(YOUR_SELECTOR, {
  // Your options
});

[paaljoachim]

Thank you @fancyapps !

Can something similar to this work?

Fancybox.bind('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]') {
  // Your options
  Image: {
    zoom: false,
  },
  Panzoom: {
    maxScale: 2,
  },
});

[fancyapps]

Yes, it would work, except for the Panzoom option. If your goal is to resize images to custom maximum level, this would not be possible at this time.

[paaljoachim]

It is still not working for me.

Here is a walk through of what I wrote in a note that I am hoping to add to the tutorial.

Fancybox
https://github.com/fancyapps/fancybox

Download the zip file and unzip.

in the dist folder:
Duplicate: jquery.fancybox.min.js and jquery.fancybox.min.css to a new folder called fancybox.

Add an init js file to the fancybox folder. I called mine fancybox-init.js.
Add the following code to use fancybox lightbox on all images that have a link to the media file:

Fancybox.bind('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]') {
  // Your options -- here I should add some example options to show what these look like.
});

Move the fancybox folder into the root of the child theme.

Enqueue the files with the following code inside the child theme functions.php file or a code plugin.

/* Enqueue fancyapps */
add_action( 'wp_enqueue_scripts', 'enqueue_fancyapps' );
function enqueue_fancyapps() {
 wp_enqueue_style( 'fancybox-css', get_template_directory_uri(). '/fancybox/jquery.fancybox.min.css' );
 wp_enqueue_script( 'fancybox',get_template_directory_uri() . ‘/fancybox/jquery.fancybox.min.js', array( 'jquery' ), '', true );
 wp_enqueue_script( 'fancybox-init', get_template_directory_uri() . '/fancybox/fancybox-init.js', array( 'fancybox' ), '', true );
}

Ps the readme here in the repo and in the download still links to version 3.

[fancyapps]

Ps the readme here in the repo and in the download still links to version 3.

Because that repository is for Fancybox v3, but this repository for Fancyapps UI that contains the latest generation of Fancybox.

[paaljoachim]

Going to: https://github.com/fancyapps

I see this text:
fancybox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

ui
JavaScript UI Component Library

Please update the descriptions to reflect what each are. Adding in the version number to each.

I have retested and also done some more research. The result can be seen here:
https://www.easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

I have yet to be able to get Fancybox v4 to work. I believe I might be mixing up the files that I am to use. It would be nice to get this cleared up. To have a clear difference between Fancybox v3 and the Fancybox v4 repos and the code each is to use. When I get this working then we will have a nice tutorial for using Fancybox v4.

Btw the main reason why I am updating the tutorial is that I am updating the web site with a new design and using Gutenberg. I am redoing many of the existing tutorials and adding these to the new site I am developing.