Replace Image Machine closeup with ColorBox or other Lightbox?

[alphabet]

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

If the thumbnail list isn't created then maybe something didn't get copied correctly in the Product Display Layout Image Machine head template. Here is the whole script:

<script>
ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function( thumbnail_image, main_image, closeup_image, type_code )
{
    var thumbnail, span, img;


    thumbnail    = document.createElement( 'li' );
    span        = document.createElement( 'span' ); // to vertically center the thumbnail images


    thumbnail.appendChild( span );


    if ( typeof( thumbnail_image ) == 'string' && thumbnail_image.length > 0 )
    {
        img        = document.createElement( 'img' );
        img.src    = thumbnail_image;
        
        thumbnail.appendChild( img );
    }


    return thumbnail;
}
    window.onload = function () {
        $("ul.thumbnails li:first").addClass("thumb_active");
        $("ul.thumbnails li").click(function() {
        $(this).siblings().removeClass('thumb_active');
        $(this).addClass("thumb_active");
    });
}
</script>

[wcw]

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

I was missing that last { character. The desktop view is working very nice. Thanks. I could not it to work in the mobile version though. I changed the layout.css file and inserted the code change in the Image Machine (mobile-images) tab but nothing happened. The thumbs still work but no border.

[alphabet]

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

I don't have an Image Machine (mobile-images) tab. Is that a content item?

If you are running jquery on your mobile site then you can include the thumb_active selectors within the jquery document function instead of the windows.onload function. Example:

    <script type="text/javascript">
      jQuery(document).ready(function($){    

       $("ul.thumbnails li:first").addClass("thumb_active");
            $("ul.thumbnails li").click(function() {
                  $(this).siblings().removeClass('thumb_active');
                  $(this).addClass("thumb_active");
            });

        // other jquery stuff below

         });
    </script>

[wcw]

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

It is a new tab exactly like the Product Display Layout Image Machine tab. But it lets you use different code in the head input. The default text in the input is:

<script>
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>

[alphabet]

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

Pretty cool. I don't have that module.

You should still be able to get it to work. Are you running jquery in your mobile version?

[wcw]

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

jquery is actively used in the store. It was worth a try. The desktop view is working good and that's the most important view. Thanks.

The mobile is not a module. It uses the Tool Kit but it is made possible with store morph code in a content tab.

[doakh]

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

Has anybody opened images in a lightbox and allows you to zoom in the lightbox? I came across some .js for Fancybox, but I do not think it will work their lightbox?

<style type="text/css">
.zoomContainer { z-index: 100000; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
}
});
});
</script>

[jsmirnow]

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

Matt -

How is global_closeups populated in this code?

What other events are available in addition to onmainimageclick and ImageMachine_Generate_Thumbnail?

Is there any documentation?

I'm on version 9, and working on modifications to an alternate display page.

Thanks!

[Matt Zimmermann]

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

@jsmirnow - global_closeups is an array being populated by image machine. All the code for this is located on page 1 of this thread. To the best of my knowledge, there are no additional events available. Unfortunately, this code is a couple of years old and has been replaced over the years.

[jsmirnow]

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

Thanks - I saw the line where global_closeups is populated after I posted.

Would be nice to have some sort of developer level documentation about how the Image Machine and Attribute Machine work. I'm spending way too much time digging through the image machine and attribute machine javascript to figure out what they are doing so I can make them dance. I shouldn't have to trace code or dig up old forum posts to find out about onmainimageclick and onswatchclick, for example.