dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

Getting it to work with WordPress #534

Open paaljoachim opened 10 years ago

paaljoachim commented 10 years ago

Hi

I have been testing out Fluidbox and got that to work. But Magnific seems even better and I would like to get it to work with WordPress.

With Fluidbox I just needed one file to get it working and that was the CSS stylesheet with a few important tags.

Inside the functions file:

//* Enqueue Fluidbox add_action( 'wp_enqueue_scripts', 'enqueue_fluidbox' ); function enqueue_fluidbox() {

wp_enqueue_style( 'fluidbox-css', get_bloginfo( 'stylesheet_directory' ) . '/fluidbox/fluidbox.css', array(), CHILD_THEME_VERSION );
/* Works without the following code */
wp_enqueue_script( 'fluidbox', get_bloginfo( 'stylesheet_directory' ) . '/fluidbox/mmjquery.fluidbox.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'fluidbox-init',  get_stylesheet_directory_uri() . '/fluidbox/mmfluidbox-init.js', array( 'fluidbox' ), '1.0.0', true );

}

In addition I added the code from this page into the functions file: http://wpsnipp.com/index.php/functions-php/add-rel-lightbox-to-all-images-embedded-in-a-post/

With the above code and the fluidbox.css it worked fine with all the images of the site.

Is there a way to only add code to the functions file like I did for fluidbox and the extra files to get it working? It would be nice to not have to add additional code to the header and footer.

janeks commented 10 years ago

There is a WordPress plugin that uses Magnific-Popup script. Easy to add to any page or post - just insert a shortcode.

Andora Lighbox: https://wordpress.org/plugins/andora-lightbox/

Documentation and live previews: http://abcfolio.com/help/andora-lightbox/