tiabradford

Oh my goodness! Thank you so much! The code snippet worked perfectly. I appreciate your time and patience to work with me. ??

I disabled the lightbox in Xpro, but it still does not load correctly. And yes, as in my first post, it works fine when Xpro is disabled.

Hello,

I tried changing the to the Flexslider, but the same issue happens, even in no conflict mode. I’m not quite sure how to check if the CSS is loading correctly.

This is the error I get in the browser inspector:

JQMIGRATE: Migrate is installed, version 3.4.1. Missing data from PHP (wpNotesArgs). Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received.

I tried using all the methods listed under Easy Fancybox for conflict resolution, but none of them worked.

I also tried using different lightbox plugins, but the same issue persists.

Yes, the login requirement has been removed. Thank you for your help.

Hi itchybrain, Thank you! ?? Unfortunately I still have the issue. I will keep keep troubleshooting though and let you know the solution if I am successful.

Hello I am experiencing the exact same issue. I just updated to the new release that came out 1.3.8 but the issue still exists.

Nevermind. I figured it out. I had to change the default setting in WordPress to change the thumbnail size.

Thank you very much. I would not have thought to click the image to see the options.

Hello Ahmad.M.S,

I am running into the same issue today. I added class=”print-only” to div.images in product-image.php, but that only made the pictures show, the rest of the content disappeared. Would you mind sharing how you added the class?

<?php
/**
 * Single Product Image
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.14
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $post, $woocommerce, $product;

?>
<div class="images print-only">

	<?php
		if ( has_post_thumbnail() ) {

			$image_title 	= esc_attr( get_the_title( get_post_thumbnail_id() ) );
			$image_caption 	= get_post( get_post_thumbnail_id() )->post_excerpt;
			$image_link  	= wp_get_attachment_url( get_post_thumbnail_id() );
			$image       	= get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
				'title'	=> $image_title,
				'alt'	=> $image_title
				) );

			$attachment_count = count( $product->get_gallery_attachment_ids() );

			if ( $attachment_count > 0 ) {
				$gallery = '[product-gallery]';
			} else {
				$gallery = '';
			}

			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

		} else {

			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

		}
	?>

	<?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

Thank you,
Tia

Yes, when I hover over a thumbnail, I see the path to the correct image I changed it to. I even see the new image in the media library. When I right click the same image and choose Copy Image Location however I get a path to a cache folder within the uploads folder with what looks like a temporary name. Here is an example of the cache image it is pulling.

https://renaissancebuttons.com/wp-content/uploads/cache/2015/08/ccn_14-e1442692901118/834954099.jpg

After attempts at clearing the cache, regenerating thumbnails the only way I was able to get the correct new image to show was to change the image size by 1px. This forced the new image to load.

Tia

Hello Benjamin,

My theme recently had an update. I have updated the theme and the plugin appears to be working correctly now.

Thank you,
Tia

Here is the full code

[caption width="300" caption="Towing – Oil Spill Storage Towable Bladder (Panama)"]
<a class="foobox" href="https://www.youtube.com/embed/ynUjuuW5afA?autoplay=1" rel="foobox" data-caption-title="Towing – Oil Spill Storage Towable Bladder (Panama)"><img alt="" src="https://img.youtube.com/vi/ynUjuuW5afA/hqdefault.jpg" /></a>
[/caption]

[caption width="300" caption="Towing – Oil Spill Storage Towable Bladder (Hawaii-USCG)"]
<a class="foobox" href="https://www.youtube.com/embed/dDX8FbMg49s?autoplay=1" rel="foobox" data-caption-title="Towing – Oil Spill Storage Towable Bladder (Hawaii-USCG)"><img alt="" src="https://img.youtube.com/vi/dDX8FbMg49s/hqdefault.jpg" /></a>
[/caption]

[caption width="300" caption="Offloading – Oil Spill Storage Bladder"]
<a class="foobox" href="https://www.youtube.com/embed/2J4ekb0P9jo?autoplay=1" rel="foobox" data-caption-title="Offloading – Oil Spill Storage Bladder"><img alt="" src="https://img.youtube.com/vi/2J4ekb0P9jo/hqdefault.jpg" /></a>
[/caption]

Sorry still no styles on the carousel after the update. I have been using the default version with the white border and drop shadow.

https://canflex.howitworks.com/environmental-oil-spill-response/oil-spill-storage-towable-bladders/

I see the link above had the http at the end, so here is the corrected link.

I resolved my issue. I thought I would post it here in case anyone else ever has this issue.

I have been trying to resolve this issue for months now. I was only able to get it to display by:

1. Loading jquery library in the head.
2. Moving an older script by the previous developer to the head
3. Moving the existing scripts that were in the footer to the head.

Even with the scripts loading in the head, it does not seem to be affecting the load time too much.

This is how the header.php is loading now.

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title><?php wp_title(''); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jquery.sidr.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/foundation.css">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/app.css">
<?php if ( is_front_page() ) { ?>
<?php } else { ?>
<?php } ?>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/touch-icon.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	// $(document).ready(function () {
	jQuery(document).ready(function ($) { 

		// MOBILE MENU
		$("#sidr").hide();
		$("#sidr").fadeTo( "slow", 0.98 );
		$("#sidr a").click(function(event){
			$('#sidr').animate({scrollTop:0});
		});
		$("#sidr ul li").has("ul").find("a").click(function(event){
			$(this).next('ul').slideToggle(300);
			$('#sidr a').removeClass('active');
			// $(this).parent("li").find("a:first-child").addClass("active");
			$(this).addClass('active');
		});
		$("#sidr > ul > li > a").click(function(event){
			$("#sidr > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$("#sidr > ul > li > ul > li > a").click(function(event){
			$("#sidr > ul > li > ul > li > a").not(this).next('ul').slideUp(300);
		});
		$(".showhidemenu").click(function(event){
			$('#sidr').toggleClass('open');
		});
		$(".show-photo-gallery").click(function(event){
			$('#photo-gallery').slideDown(300);
			$('#photos-slider').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
			$('#video-gallery').slideUp(300);
		});
		$(".show-video-gallery").click(function(event){
			$('#photo-gallery').slideUp(300);
			$('#video-gallery').slideDown(300);
			$('#video-listing').owlCarousel_old({
			loop:false,
			margin:10,
				items: 4,
				nav: false,
				dots: true,
			responsiveClass:true,
			responsive:{
				0:{
					items:1,
								slideBy: 1
				},
						767:{
					items:2,
								slideBy: 2
				},
				992:{
					items:4,
								slideBy: 4
				}
			}
			});
		});
		// MOBILE MENU END

		// AUTO RESIZE VIDEOS
		$("iframe").wrap("<div class='flex-video'/>");
		// AUTO RESIZE VIDEOS END
	});
</script>
<script src="<?php bloginfo('template_url'); ?>/js/modernizr.foundation.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/foundation.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/app.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/fastclick.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/smoothscroll.js"></script>
<?php
if ( is_user_logged_in() ) {
?>
<style>
@media handheld, only screen and (max-width: 767px) {
html {margin-top:0px !important;}
}
</style>
<?php }
else { ?>
<?php } ?>
<!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
	wp_head();
?>
<?php wp_head(); ?>
</head>

This is how the footer appears now.

<!-- MOBILE NAVIGATION END -->

<?php if ( is_front_page() ) { ?>
<?php } else { ?>
<?php } ?>

<script>
	$(function() {
	    FastClick.attach(document.body);
	});
</script>

<?php
	wp_footer();
?>

This is the gallery now
https://canflex.oakharborwebdesign.com/foo-owl-carousel/

Hi,

Those divs were originally used for the Advanced Custom Fields plugin. Since the client had a design change, they were no longer needed. The plugin was already deactivated. I see there is a script remaining in the footer referring to them. I have commented them out, but the carousel still does not display. Using the Firefox debugger I see this error

TypeError: $(…).owlCarousel is not a function foo-owl-carousel:345:0

Not sure what this means.

Tia