Replace Image Machine closeup with ColorBox or other Lightbox?

[emdub]

I just upgraded to PR8, while I like the multiple images and automatic thumbnails, I think the built-in lightbox is somewhat lacking.

I would like to replace the default closeups with ColorBox, but I'm having trouble implementing it. I still want the thumbnails to switch the main image on the product page, but I want that main image to open a ColorBox slideshow instead of the built-in closeup. In addition to looking nicer, ColorBox will allow customers to view all the closeup images in a slideshow, instead of closing each closeup, clicking the next thumbnail and opening another closeup.

I don't know where to make the changes to the code that I need, since I am totally unfamiliar with Image Machine, and I also don't want the store to get messed up when Miva gets updated.

Has anybody had any luck with this?

[lesliekirk]

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

If you get it figured out, would you please share?

[emdub]

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

So far, still having no luck at all.

I'm wondering if there's a way to pull the additional images with something like toolkit instead of relying on the built-in Image Machine, but I wouldn't even know where to begin looking for something like that.

[Rick Wilson]

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

We're going to write a blog post in the next week or so, showing how to swap out the built in lightbox with other common ones online, FYI.

[emdub]

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

That'd be great!

I'll be on the look out for that, thanks!

[lesliekirk]

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

Yup, definitely need this one. I've been needing to add a caption to all of the popup images like yesterday but I still haven't been able to. It was soooo easy to do before with a custom field, but with a product with 255 variant images, I don't even know where to begin.

[Matt Zimmermann]

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

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>

If you are looking for something more advanced, like being able to call all the close-up images for the product in a gallery, then you can relace your "Product Display Layout Image Machine" "Head Template" code with this:

<script>
    var global_closeups = [];
    var i;
    window.onload = function () {
        // On load, create a hidden DIV to hold all closeup images and append it to the BODY
        var cu = $('<div id="cu" />').hide();
        $('body').append(cu);
        // Iterate through all the closup image paths, create image entities from them and append them to the hidden DIV from above
        for (i = 0; i < global_closeups.length; i++) {
            var cu_img = $('<img />').attr({
                    'src': global_closeups[i],
                    'rel': 'closeups'
                });
            $('#cu').append(cu_img);
        };
        $('#main_image').click(function (e) {
            e.preventDefault();
        });
    };

    ImageMachine.prototype.onmainimageclick = function () {
        // Set an object to run ColorBox and iterate through all the images
        var $productGallery = $('#cu img').colorbox({
                            rel: 'closeups',
                            href: function () {
                                return $(this).attr('src')
                            }
                        });
        // Open the product image gallery on click of "main_image"
        $('#main_image').click(function () {
            $productGallery.eq(0).click();
        });

    };

    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);
        
        global_closeups.push(closeup_image); // On every page load and/or variant change, populate the array with all of the current closeup images
        return thumbnail;
    };
</script>

Lastly, if you are looking for something out of this world, like making the gallery start with the main image you just clicked on, then you can relace your "Product Display Layout Image Machine" "Head Template" code with this:

<script>
    var global_closeups = [];
    var i;
    var $productGallery;
    
    window.onload = function () {
        // On load, create a hidden DIV to hold all closeup images and append it to the BODY
        var cu = $('<div id="cu" />').hide();
        $('body').append(cu);
        
        // Iterate through all the closup image paths, create image entities from them and append them to the hidden DIV from above
        for (i = 0; i < global_closeups.length; i++) {
            var cu_img = $('<img />').attr({
                    'src': global_closeups[i],
                    'rel': 'closeups'
                });
            $('#cu').append(cu_img);
        };
        $('#main_image').click(function (e) {
            e.preventDefault();
        });
    };

    ImageMachine.prototype.onmainimageclick = function () {
        // Set an object to run ColorBox and iterate through all the images
        $productGallery = $('#cu img').colorbox({
            rel: 'closeups',
            current: '',
            href: function () {
                return $(this).attr('src')
            }
        });
        
        // Open the product image gallery on click of "main_image"
        $('#main_image').click(function () {
            $productGallery.eq(0).click();
        });

    };

    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);
        
        global_closeups.push( closeup_image ); // On every page load and/or variant change, populate the array with all of the current closeup images
        return thumbnail;
    };
    
    ImageMachine.prototype.onthumbnailimageclick = function (data) {
        var i;
        var selectedIndex;
        var new_global = [];
        var j;
    
        // Set the indexing for all images and pass it through
        for (i = 0; i < global_closeups.length; i++) {
            if (global_closeups[i] == data.image_data[this.closeup_index]) {
                selectedIndex = i;
                break;
            };
        };
        for (i; i < global_closeups.length; i++) {
            new_global.push(global_closeups[i]);
        };
        for (j = 0; j < selectedIndex; j++) {
            new_global.push(global_closeups[j]);
        };
        global_closeups = new_global;
        
        // Remove all existing closeup images, reiterate through all the closup image paths, create image entities from them and append them to the hidden DIV from above
        $('#cu img').remove();
        for (i = 0; i < new_global.length; i++) {
            var cu_img = $('<img />').attr({
                    'src': new_global[i],
                    'rel': 'closeups',
                    'data-imageIndex': i
                });
            $('#cu').append(cu_img);
        };

        // Reset the object to run ColorBox and iterate through all the images
        $productGallery = $('#cu img').colorbox({
            rel: 'closeups',
            current: '',
            href: function () {
                return $(this).attr('src')
            }
        });

        this.Thumbnail_Click(data);
    };
</script>

If you are looking at using a different script than ColorBox, you should be able to replace the relevant parts and still have this scripting to the job.

[emdub]

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

Awesome, thanks! I'm going to try this out right away!

[lesliekirk]

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

Thanks Matt - now how do I add captions to my popup images? That's what I'm really really needing.

[Matt Zimmermann]

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

@Leslie If you are using ColorBox, it will add a caption to your image if you assign a title to it.

[lesliekirk]

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

@Leslie If you are using ColorBox, it will add a caption to your image if you assign a title to it.

Well yeah - but I have 255 Inventory Variant images that need captions - do I add it to a custom field for ALL of them and then pull it in using that conditional? Or is there something easier than that?

Thanks!
Leslie

[lesliekirk]

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

ps...I wouldn't mind being able to do this with just the default Image Machine

[Matt Zimmermann]

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

@Leslie If you are looking to have a unique caption for each variant image, you would need to perform additional AJAX requests to pull the custom product fields you want to display. If you want the caption to be something like the product name, that is much simpler.

[lesliekirk]

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

@Matt - I've created a custom product field for the captions - they will vary by the color of the item, but because they are part of the size variants too - that's where the 255 variants come in. So I guess that means I need to know how to perform that additional AJAX request and since I'm asking for just the Image Machine it probably needs to be on a separate post (tagged with keywords to help make it more searchable for all).

Thanks!
Leslie

[Matt Zimmermann]

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

@Leslie You're right, probably be good to start a new thread for that one. I'm not sure at the moment all the working that would go into it, so it will need a bit of research. The solution may require the Tool Belt module as well.