Replace Image Machine closeup with ColorBox or other Lightbox?

[lesliekirk]

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

Also did the adding captions to the Colorbox get resolved? I've got it working with the Image Machine, but now need it for Colorbox.

[lesliekirk]

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

Hey Greg - yeah that's what I have had to do for now. Trying to using the Image Machine is still very limiting. On another site where I used CSS for the "mouseover" I was able to link the thumbnail to the product.

The main reason I'm trying to switch to Colorbox (or Lightbox) is that I'm trying to place the popup closer to the thumbnail. I'm still working to tweak the CSS, but it's going to be tricky since it also affects the PROD (or at least until I create a second set of CSS for the CTGY page) - so you see why I find myself so frustrated with the Image Machine.

So if anyone has come up with better ways to use the Image Machine maybe we should start a whole new section for just for it, like the Store Morph Technology.

[emdub]

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

I've been using ColorBox with ImageMachine for a while, and it has been working well, but I am now trying to implement a link to the full-res image and running into problems.

From the ColorBox FAQ, it should be a matter of adding this code (or something similar).

$('a.gallery').colorbox({title:function () {
     return "To view full size, " + "click here!".link(this.href); 
}});

This should put a link to the full-size image in the title tag, which would show up as a caption when ColorBox is activated.

This snippet refers to an <a> tag with the class "gallery", but this doesn't exist in the ImageMachine setup (I am using Matt's third code block), and I'm having trouble determining what I need to change to get this to work, since all the calls to ColorBox seem to originate from the ImageMachine code block.

My ideal setup would be: click on the main image on a product page opens a larger version (say 800px wide, or 90% of browser window) of the image in a colorbox overlay. Then customers could click on the link to open the full resolution image in another window.

I would appreciate any guidance on getting this to work.

[emdub]

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

So I did some more tinkering, and found that by adding something like this to the ImageMachine.prototype.onmainimageclick function, I can get a caption that is a link to the image.

            title: function () {
                return "To view Full Size, " + "click here!".link($(this).attr('src'));
            },

The next wall I hit is that as is, this link only goes to whatever image is being shown in the ColorBox overlay, so if I set the ImageMachine closeup dimensions to 800x800, that link will go to the 800x800 image, not the full size original.

To get around this, I went back to my long-running issue of ImageMachine not respecting ColorBox's "maxHeight"/"maxWidth" parameters. The default code below doesn't work, but I am not sure what I need to do to change it.

        $(document).ready(function(){
            $("a[rel='closeups']").colorbox({transition:"fade", maxWidth: "90%", maxHeight: "90%", opacity: ".75" });
        });

In the mean time, I have hard-coded a 90% maxWidth/maxHeight into the jquery.colorbox.js file which works as I had hoped. I just wish I could figure out why the 'right way' of setting them doesn't work.

[mdurkee]

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

Susan, Did you ever get this working well with the swatches and the thumbs? I dropped it for awhile and never have made progress but I really need to. The built in zoom on my site looks dreadful and I can't fix it without getting a different program to do the light box. I really love all the options available with Magic Zoom.

Thanks for any insight . . .

[alphabet]

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

I have watched users testing the image machine initially try to click on the first thumbnail image which does nothing because its main image is already displayed. They click repeatedly, think that the image machine is broken and give up.

There ought to be a way to give the user feedback which thumbnail is active.

Here is some jquery code to add within the PROD > Product Display Image Machine Tab > Head

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

Then in style sheet add:

.thumbnails li.thumb_active  {border:1px solid red;}

[wcw]

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

I tried it and do not get a red border. Exactly where does that code go in the PROD > Product Display Image Machine Tab > Head input?

[alphabet]

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

I added it just before the closing bracket of the window.onload function:

// stuff above

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

// stuff below

    ImageMachine.prototype.onmainimageclick

[alphabet]

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

You can also change the cursor style on active thumbnail clicks:

.thumbnails li.thumb_active:active  {cursor:not-allowed;}

[kayakbabe]

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

How about the jquery-ui toggle?

[wcw]

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

Your code is entirely different from mine. My PROD > Product Display Layout Image Machine tab has this as the code in that input.

<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;
}

</script>

[alphabet]

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

Hi Bill,
It looks like you are using the default code and I am using the modified code from post #7.

The default code is javascript that extends the ImageMachine object with a method that creates the thumbnail element.

You can add the window.onload event function just above the closing script tag:

   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>

Hey Kelly,
You could probably use the toggle() function, I just went a different direction because I was having problems with ImageMachine.js psuedo active class, ie: thumb_active:active. Also it looked like ImageMachine.js assigns the first thumbnail with class="thumb_active" after it's first clicked, not onpageload.

[wcw]

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

Inserting it there caused all of the thumbs to disappear.

[alphabet]

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

That is strange because I tested it on my live site with the default code before I posted it.

Are you still using the default thumbnail stlye?

[wcw]

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

I haven't changed any of that code. It is still the default on the desktop view.