webkelder

Hello Nikola,

I have 5 different services (each last 1 hour). I want to let people book max 3 services (at the same time or with overlap) but all 3 services must be different services?
Is that possible?

Thank you very much!

Hi Brad, yes thank you. Thanks for your plugin and info!

Ok the script is still not showing despite you activated it.
So maybe you better disable and remove the plugin then and:

1) make a directory in your theme or child theme named ‘js’ (if not already exists)

2) make a file called ‘theme.js’ and put it in the directory ‘js’

3) put this code in the file ‘theme.js’:

jQuery( document ).ready( function( $ ) {
	// preload images
	$('.thumbnails a').each(function() {
		var photo_fullsize = $(this).attr('href');
		$( "body" ).append( '<img src="'+photo_fullsize+'" class="hide">' );
	})

	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );

	// Swap out the main image with the thumb
	$( '.thumbnails a' ).mouseover(
		function() {
			var photo_fullsize = $( this ).attr( 'href' );
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
			$( '.woocommerce-main-image img' ).attr( 'src', photo_fullsize );
		}
	);

	// Return the main image to the original
	$( '.thumbnails a' ).mouseout(
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
			$( '.woocommerce-main-image img' ).attr( 'src', wcih_main_imgage );
		}
	);
});

4) put this in your theme or child theme style.css file:

.hide { display: none; }

5) put this in your theme or child theme functions.php

// javascript image hover
function YourUniqueID_add_enqueue_scripts() {
  wp_enqueue_script( 'theme_js', trailingslashit( get_stylesheet_directory_uri() ) . 'js/theme.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'YourUniqueID_add_enqueue_scripts' );

Hi crashguru, the script (wcih.js) is not loaded on the page. Did you turn off the plugin?
By the way, I see that there has been an update of this plugin 2 weeks ago. When I look at the sourcecode of your page I think it should work without my customizations.

And another update, now its with preloading the images. Also put this in your css: .hide { display: none; }

jQuery( document ).ready( function( $ ) {
	// preload images
	// if you have the images all in the same size you could use this (with your own image size) to save some data loading...
	$('.thumbnails a').each(function() {
		var photo_smallsize = $(this).attr('href').replace('.jpg','-583x300.jpg');
		$( "body" ).append( '<img src="'+photo_smallsize+'" class="hide">' );
	})

	// ... otherwise use this
	//$('.thumbnails a').each(function() {
		//var photo_fullsize = $(this).attr('href');
		//$( "body" ).append( '<img src="'+photo_fullsize+'">' );
	//})

	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );
	// This is what will happen when you hover a product thumb
	$( '.thumbnails a' ).mouseover(
		// Swap out the main image with the thumb

		// if you have the images all in the same size you could use this (with your own image size) to save some data loading...
		function() {
			var photo_smallsize = $(this).attr('href').replace('.jpg','-583x300.jpg');
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_smallsize );
			$( '.woocommerce-main-image img' ).attr( 'src', photo_smallsize );
		}

		// ... otherwise use this
		//function() {
			//var photo_fullsize = $( this ).attr( 'href' );
			//$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
			//$( '.woocommerce-main-image img' ).attr( 'src', photo_fullsize );
		//}

	);
	$( '.thumbnails a' ).mouseout(
		// Return the main image to the original
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
			$( '.woocommerce-main-image img' ).attr( 'src', wcih_main_imgage );
		}
	);
});