Enable Lightbox
The first step is to ensure that the Lightbox is enabled by going to WooCommerce > Settings > General > Styles and Scripts, and making sure that “Enable WooCommerce lightbox on the product page” is checked.Including Lightbox
If you want to use the lightbox on, say, a product page, you’re in luck, with the above setting enabled, the lightbox styles/scripts will be automatically included. If however you want to use the lightbox on a different part of your site, you will likely have to include those files with an action like the following: [php]add_action( 'wp_enqueue_scripts', 'frontend_scripts_include_lightbox' ); function frontend_scripts_include_lightbox() { global $woocommerce; $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; $lightbox_en = get_option( 'woocommerce_enable_lightbox' ) == 'yes' ? true : false; if ( $lightbox_en ) { wp_enqueue_script( 'fancybox', $woocommerce->plugin_url() . '/assets/js/fancybox/fancybox' . $suffix . '.js', array( 'jquery' ), '1.6', true ); wp_enqueue_style( 'woocommerce_fancybox_styles', $woocommerce->plugin_url() . '/assets/css/fancybox.css' ); } }[/php] This can be added to your theme’s functions.php in the usual manner (theme-name/functions.php), or perhaps to your custom site plugin. Note that this will have the effect of loading the lightbox script/style on every page of your site; if you want to limit it to certain pages/sections you can make use of the wide array of conditional tags available. Bring out the LIGHTBOX! Now that lightbox (really fancybox) is enabled and included, we can start using it. If you just want to display one or more images in their own popup or little gallery, it’s as simple as wrapping them in an anchor tag and adding the “zoom” class, and/or a “rel” name to group them into a slideshow: [html] <pre><a class="zoom" rel="my-gallery" title="My Picture 1" href="/path/to/image1.png"><img src="/path/to/image1.png" /></a> <a class="zoom" rel="my-gallery" title="My Picture 2" href="/path/to/image2.png"><img src="/path/to/image2.png" /></a></pre> [/html]Advanced Usage
If you need more control over the lightbox behavior, and/or wish to display content other than an image, you can make full use of the fancybox demos and api. You’ll just be responsible for injecting the relevant javascript into your page source, or including it in an external script, or whatever you prefer. I am a fan of using the WooCommerce classadd_inline_js() method, which can be used like so:
[php]
<pre><?php
ob_start();
?>
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
<?php
$javascript = ob_get_clean();
$woocommerce->add_inline_js( $javascript );
?></pre>
[/php]Revisions
- December 13, 2012 @ 02:11:48 [Current Revision] by PeterLugg
- December 13, 2012 @ 02:07:40 by PeterLugg
Revision Differences
| December 13, 2012 @ 02:07:40 | Current Revision | ||
|---|---|---|---|
| Content | |||
| Added: Taken form <a href="http:// www.foxrunsoftware.net/articles/ wordpress/how- to-use-woocommerces-lightbox/" target="_blank">Foxrun Software</a> | |||
| Added: <a href="http:// zfer.us/lh1Jh?d= http://www.woothemes.com/ woocommerce/" >WooCommerce</a> comes with <a href="http:// fancybox.net/ ">Fancybox</a>, a Lightbox implementation, bundled as part of the core. It’s used on the product pages to display the image gallery pictures, and a common question is “How do I use WooCommerce’s fancybox to do X”. This article will walk you through how to do just that. | |||
| Added: <h2>Enable Lightbox</h2> | |||
| Added: The first step is to ensure that the Lightbox is enabled by going to WooCommerce > Settings > General > Styles and Scripts, and making sure that “Enable WooCommerce lightbox on the product page” is checked. | |||
| Added: <h2>Including Lightbox</h2> | |||
| Added: If you want to use the lightbox on, say, a product page, you’re in luck, with the above setting enabled, the lightbox styles/scripts will be automatically included. If however you want to use the lightbox on a different part of your site, you will likely have to include those files with an action like the following: | |||
| Added: [php]add_action( 'wp_enqueue_scripts', 'frontend_scripts_ include_lightbox' ); | |||
| Added: function frontend_scripts_ include_lightbox() { | |||
| Added: global $woocommerce; | |||
| Added: $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; | |||
| Added: $lightbox_en = get_option( 'woocommerce_ enable_lightbox' ) == 'yes' ? true : false; | |||
| Added: if ( $lightbox_en ) { | |||
| Added: wp_enqueue_script( 'fancybox', $woocommerce- >plugin_url() . '/assets/js/fancybox/fancybox' . $suffix . '.js', array( 'jquery' ), '1.6', true ); | |||
| Added: wp_enqueue_style( 'woocommerce_ fancybox_styles', $woocommerce- >plugin_url() . '/assets/css/ fancybox.css' ); | |||
| Deleted: | Added: } | ||
| Added: }[/php] | |||
| Added: This can be added to your theme’s functions.php in the usual manner (theme-name/functions.php), or perhaps to your custom site plugin. Note that this will have the effect of loading the lightbox script/style on every page of your site; if you want to limit it to certain pages/sections you can make use of the wide array of conditional tags available. | |||
| Added: Bring out the LIGHTBOX! | |||
| Added: Now that lightbox (really fancybox) is enabled and included, we can start using it. If you just want to display one or more images in their own popup or little gallery, it’s as simple as wrapping them in an anchor tag and adding the “zoom” class, and/or a “rel” name to group them into a slideshow: | |||
| Added: [html] | |||
| Added: <pre><a class="zoom" rel="my- gallery" title="My Picture 1" href="/path/ to/image1.png"><img src="/path/ to/image1.png" /></a> | |||
| Added: <a class="zoom" rel="my- gallery" title="My Picture 2" href="/path/ to/image2.png"><img src="/path/ to/image2.png" /></a> </pre> | |||
| Added: [/html] | |||
| Added: <h2>Advanced Usage</h2> | |||
| Added: If you need more control over the lightbox behavior, and/or wish to display content other than an image, you can make full use of the <a href="http:// fancybox.net/ howto">fancybox demos</a> and <a href="http:// fancybox.net/ api">api</a>. You’ll just be responsible for injecting the relevant javascript into your page source, or including it in an external script, or whatever you prefer. I am a fan of using the WooCommerce class <code> add_inline_js( )</code> method, which can be used like so: | |||
| Added: [php] | |||
| Added: <pre><?php | |||
| Added: ob_start(); | |||
| Added: ?> | |||
| Added: $("a.group" ).fancybox({ | |||
| Added: 'transitionIn' : 'elastic', | |||
| Added: 'transitionOut' : 'elastic', | |||
| Added: 'speedIn' : 600, | |||
| Added: 'speedOut' : 200, | |||
| Added: 'overlayShow' : false | |||
| Added: }); | |||
| Added: <?php | |||
| Added: $javascript = ob_get_clean(); | |||
| Added: $woocommerce- >add_inline_js( $javascript ); | |||
| Added: ?></pre> | |||
| Added: [/php] | |||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.