Blog Page

I am using Fancybox for WordPress on my WordPress site. The fancybox is used two places - in blog posts and in product pages on my WooCommerce shop. The blog started using Fancybox automatically after installing the plugin. For WooCommerce, I had to add add a function in my functions.php, that made it use the Fancybox instead of the built in lightbox function.

Now, Fancybox is working correctly in both places, but it scales the images differently. The first photo below shows a picture scaled to screen on a blogpost, while the second shows a picture on the shop that doesn’t scale properly. I suppose this has to do with the different ways of implementing Fancybox. Can someone help me get it to scale the photos correctly on the products as well?

Product Page

My code from the functions.php that is adding Fancybox on products looks like this:

//Remove prettyPhoto lightbox
add_action( 'wp_enqueue_scripts', 'fc_remove_woo_lightbox', 99 );
function fc_remove_woo_lightbox() {
remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
    wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
    wp_dequeue_script( 'prettyPhoto' );
    wp_dequeue_script( 'prettyPhoto-init' );
//Add fancyBox lightbox
add_action( 'wp_enqueue_scripts', 'fc_add_fancybox' );
function fc_add_fancybox() {
wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() .     '../js/fancybox/jquery.fancybox.pack.js', false );
wp_enqueue_style( 'fancybox-style', get_stylesheet_directory_uri() . '../js/fancybox/jquery.fancybox.css' ); 

EDIT: It seems like the script in functions links to some other fancybox files than the ones in my wp-content/plugins/fancybox-for-wordpress, which the other pages are using. Would it help if I linked to those instead? And what would the correct path be?

Thanks already!

Read more here: Fancybox appears different


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:


Wordpress related questions and answers: