Replace Image Machine closeup with ColorBox or other Lightbox?

[netblazon]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Other than rolling my own mini-module to spit back XML and coding against AJAX for that, I'm not sure. I kinda stopped looking hoping you had started that other thread and already had an answer. I'm guessing not... Hopefully I can look at it tomorrow.

[lesliekirk]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Arrrggghhh...I just want to include captions for these popup images!!! I suppose it would be easier if they weren't part of Inventory Variants. Guess I need to go over to the beg list and request an EASY way to add captions. Next I had better invest in more ibuprofen - I was also wanting to trigger a jquery like event when either the attribute drop down or clicking the swatch image would display a description (longer version of the caption).

On the bright side, I watched a news report on a new surgical procedure for Trigeminal Neuralgia being done in Houston - hubby said I should stop there on the way out to San Diego and have it done

[Matt Zimmermann]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

@Susan and @ Leslie

We have done some playing with using AJAX to pull variant custom product fields in the past, but not to populate a caption. Here is an example of what you may want to try. It does require the use of Ray Yates' Tool Belt module. Tool Kit cannot be used because it does not have a functin to access the mvDO function.

First, create a page called "AJAX_Variant_CustomFields", populate the template with the following code, then assign the Tool Belt and Product items.

<mvt:comment>Creates the functions and variables needed to access variant product information and custom product fields.</mvt:comment>
<mvt:item name="ry_toolbelt" param="do|g.module_library_db|g.result1|Runtime_Product_Load_Code( g.Product_Code, l.all_settings:master_product )" />
<mvt:item name="ry_toolbelt" param="do|g.module_library_db|g.result2|ProductList_Load_Variant( l.all_settings:master_product:id, g.Variant_ID, l.all_settings:part_products )" />
<mvt:item name="ry_toolbelt" param="custom_products|l.all_settings:customfields|l.all_settings:part_products[1]:id" />

<mvt:comment>Pulls the "FIELD_CODE" custom product field value from variant product, encodes the value and then formats the value to jQuery JSON format.</mvt:comment>
<mvt:item name="ry_toolbelt" param="do|g.module_json|g.temp|JSON_Encode( l.all_settings:customfields:value:FIELD_CODE )" />
<mvt:item name="ry_toolbelt" param="assign|l.all_settings:customfields:value_encoded:origPrice|glosub( g.temp, '\x', '\u00' )" />

{"FIELD_CODE": "&mvt:customfields:value_encoded:FIELD_CODE;"}

Second, add this script before the close of the HEAD tag on the PROD page.

<script type="text/javascript">
    MivaEvents.SubscribeToEvent('variant_changed', function (product_data) {
        $.getJSON('&mvt:global:sessionurl;Screen=AJAX_Variant_CustomFields&Product_Code=' + encodeURIComponent(product_data.product_code) + '&Variant_ID=' + encodeURIComponent(product_data.variant_id),
        function (data) {
            /* Checks "FIELD_CODE" Custom Product Field And Do Someting */
            if (data.FIELD_CODE.length != 0) {
                $('#CAPTION').html(data.FIELD_CODE);
            };
        });
    });
</script>

Hope this helps.

[lesliekirk]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Thanks Matt - will this work with the default popup? If it will, I'll get the Toolbelt module...

[Matt Zimmermann]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

@Leslie Although the example I gave isn't fully fleshed out, it should work. Theoretically it can be used for any dynamic population based on variant changes.

[netblazon]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Thanks Matt. In the example I've been working on, I simply wanted to set the caption to the option prompt + product name. I was able to do this by setting a javascript variable to the product name (using an SMT entity) and then overriding AttributeMachine.prototype.onswatchclick and setting the caption to option.prompt plus the product name, with a space in-between.

The customer would like this to work more like eBags though, who changes the main image onmouseover instead of onclick. Is it possible to add in this function and bind it somehow so it fires? I don't see a corresponding AttributeMachine.prototype.onswatchmouseover function. (Hopefully what I have done so far isn't a complete hack; I know enough OOP to shoot myself in the foot.)

[lesliekirk]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

I sort of want to do what Susan is trying to do - I need a caption that is triggered by the option prompt. The problem is all of my "options" are attribute variants.

[netblazon]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Mine are inventory variants too, but I'm using the option's prompt to set the caption. Here's what I have done so far. Remember this is MagicZoom though...

In the PROD template, I added this to the head tag to make a variable that contains the product name (At some point I'll need to go back in and add a toolkit function to escape any single quotes:

	<script type="text/javascript">
		var productName = '&mvt:product:name;';
	</script>

In PROD > Attribute Machine > Head Template I added this. The first line is what's in the source code of AttributeMachine.js already. After that I added the comment and then the line that sets the <a> tag's title attribute to the option prompt plus a space plus the variable called productName that was set in the template above:

AttributeMachine.prototype.onswatchclick = function( input, attribute, option )
{
	this.Swatch_Click( input, attribute, option );

	// set promptCaption to value of option prompt so we can use it for the MagicZoom caption in the ImageMachine code
	$('#mainprodimg').attr('title',option.prompt+' '+productName);
}

Finally, in PROD > Product Display Layout Image Machine > Head Template I have added this:

	ImageMachine.prototype.oninitialize = function (data) {
		this.Initialize( data );

		// Set the href for the <a> tag around the main image to the source for the closeup image
		$('#mainprodimg').attr('href',this.closeup_image.src);

		// refresh magiczoomplus
		$(document).ready(function() {
			MagicZoomPlus.refresh('mainprodimg');
		});
	};

One sets the href attribute of the <a> tag to the correct closeup image, and then after making sure the document has been loaded (so it doesn't fire during the initial page load) I call MagicZoomPlus.refresh to refresh the zoom to use the new color's images.

I'm quite open to any suggestions on how to better accomplish this - I'm more of a JavaScript duct-taper than a JavaScript guru :)

[ballyhoo]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Matt, Want to thank you for putting the code up for this. I was able to implement the third version without too much work. Just a matter of uploading some files and getting the paths correct to the .js and css. BTW I tried all three versions and the final one is best for us as we have multiple product images.
greg
Unique Vintage Clothing
www.ballyhoovintage.com

[ADS]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

@emdub Sorry for the late reply on this, I was able to track down the bug. The code has been updated with the change.

Matt,

Where is the updated code, when I copy example 2 & 3 from page 1 of this post, I still have to click twice for it to work?

[mdurkee]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Nice Susan @NetBlazon ~ Do you have this live on a site where we can see it working right now?

[netblazon]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Maxanne,
Thank you. I don't have it live yet - waiting on the client whom I originally designed it for. I have a test product there, but access is limited to my account. I'll email the owner and see if it's ok for me to share it with you.
Susan

[rcm1234]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

[QUOTE=Matt Zimmermann;389676]If you are looking for a way to replace the built-in Miva product light-box with ColorBox, here's what you've been looking for.

After uploading and configuring ColorBox to your liking, replace your "Product Display Layout Image Machine" "Head Template" code with the following:

<script>
    ImageMachine.prototype.onmainimageclick = function () {
        // Set the source for ColorBox to the current closeup image and replace the default click function with ColorBox
        var closeupImageSRC = $('#closeup_image').attr('src');
        $('#main_image').colorbox({
            href: closeupImageSRC
        });
    };

    ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
        var thumbnail = document.createElement('li');
        var span = document.createElement('span'); // to vertically center the thumbnail images
        var img = document.createElement('img');
        img.src = thumbnail_image;
    
        thumbnail.appendChild(span);
        thumbnail.appendChild(img);
    
        return thumbnail;
    };
</script>

Hi,
How do I edit the code example you gave above to use another version of lightbox?
I have a perfect version of lightbox working already (*but not with image machine yet).

Thanks in advance

[lesliekirk]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

This works great on the PROD screen - has anyone tweaked this for the CTGY page?

Thanks!
Leslie

[ballyhoo]

Re: Replace Image Machine closeup with ColorBox or other Lightbox?

Leslie, great idea. I would love to see how this would be done. How would the link to the prod page be dealt with? just on the item name?
greg