Announcement

Collapse
No announcement yet.

Replace Image Machine closeup with ColorBox or other Lightbox?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #31
    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.
    Susan Petracco
    NetBlazon

    1.866.400.2444

    _____________________________________________

    Like us on Facebook

    Comment


      #32
      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
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #33
        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.
        Code:
        <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.
        Code:
        <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.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #34
          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...
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #35
            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.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #36
              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.)
              Susan Petracco
              NetBlazon

              1.866.400.2444

              _____________________________________________

              Like us on Facebook

              Comment


                #37
                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.
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #38
                  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:

                  Code:
                  	<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:

                  Code:
                  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:

                  Code:
                  	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 :)
                  Susan Petracco
                  NetBlazon

                  1.866.400.2444

                  _____________________________________________

                  Like us on Facebook

                  Comment


                    #39
                    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

                    Comment


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

                      Originally posted by Matt Zimmermann View Post
                      @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?

                      Comment


                        #41
                        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?
                        Maxanne Durkee
                        Heavyweight Collections - Premium Heavy T-Shirts
                        Facebook, Twitter, Blog

                        Comment


                          #42
                          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 Petracco
                          NetBlazon

                          1.866.400.2444

                          _____________________________________________

                          Like us on Facebook

                          Comment


                            #43
                            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:

                            Code:
                            <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

                            Comment


                              #44
                              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
                              Leslie Kirk
                              Miva Certified Developer
                              Miva Merchant Specialist since 1997
                              Previously of Webs Your Way
                              (aka Leslie Nord leslienord)

                              Email me: [email protected]
                              www.lesliekirk.com

                              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                              Comment


                                #45
                                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

                                Comment

                                Working...
                                X