Announcement

Collapse
No announcement yet.

How to display image machine thumbs inside a lightbox, as well as the prod page

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

  • How to display image machine thumbs inside a lightbox, as well as the prod page

    We are trying to replicate the gallery system found on newegg.com product pages. Clicking on the thumbs will change the main image, but after 4 images it displays a "..." if you click on that or the main image it opens the gallery shown in the screen cap.

    11-28-2012 4-18-30 PM.jpg

    I have used JQuery to add display none to all images past 4, and append "..." after the 4th image. (Couldn't figure out how to have Miva only display four thumbs, and not all)

    But the problem is that I cant display the thumbs again in the light box. It seems it will only populate the list once on a page.

    We don't want the zoom or any of that, we just want the large image in the light box to change when clicking the thumbs, just like a mini version of the default setup inside a light box.

    Any help would be much appreciated!!!!
    Calvin Nelson
    Director of Web Development
    2C Development Group

  • #2
    Re: How to display image machine thumbs inside a lightbox, as well as the prod page

    The best way to achieve this functionality would be to create a completely separate product page and then call that page into the light box via an iframe.

    This new product page would be a copy of the existing product page only stripped down to only display the product images and thumbnails. I would start with an exact copy with all the same items and code and make sure everything works. The start to strip out pieces one by one until your left with just the main image and thumbnails.

    Then have your lightbox display this new product page as an iframe.


    You can probably do it on the main product page without having to build a separate PROD page but it will require a lot of editing of the image machine JavaScript to get it to all work together.
    Brennan Heyde
    VP Developer Relations
    Miva, Inc.
    [email protected]
    http://www.miva.com

    Comment


    • #3
      Re: How to display image machine thumbs inside a lightbox, as well as the prod page

      How do I get the product images to show on 2 different prod display layouts at once? It is assigned to one prod layout but i dont know how to have it assigned to 2. Where do I point the iframe src so it will display the images for that same product?
      Calvin Nelson
      Director of Web Development
      2C Development Group

      Comment


      • #4
        Re: How to display image machine thumbs inside a lightbox, as well as the prod page

        Any ideas on this?
        Calvin Nelson
        Director of Web Development
        2C Development Group

        Comment


        • #5
          Re: How to display image machine thumbs inside a lightbox, as well as the prod page

          Like Brennan said, create a new page (e.g. PROD2), copy the template code from your current PROD page into it, and then go through and make sure all the same items are assigned. Make sure the page works correctly by going to http://www.domain.com/mm5/merchant.m...ourproductcode.

          Then go to your PROD2 template and start stripping the page down to the image machine elements. You'd call it into your iframe using a link like the one I gave above.

          You'll probably need to disable the lightbox feature from PROD2, otherwise you'll have a lightbox within a lightbox if someone clicks the large image.

          Comment


          • #6
            Re: How to display image machine thumbs inside a lightbox, as well as the prod page

            The first step would be to make a duplicate of PROD called PROD-IMAGE (or something similar). Assign all the same items and copy all the code from the real PROD page.

            Now that you have that you should be able to visit a product page and replace PROD with your new page code and it should work exactly like the product page with additional images and all. If not you make have some items or code missing.

            The URL would be something like this:

            http://www.domain.com/mm5/merchant.m...oduct_Code=123

            Once you have that working you can start stripping stuff off that page until all you are left with is the additional image functionality.

            The last step would be to iframe in this URL to your lightbox. The product code would need to be dynamic, but you can swap out the hard coded 123 with &mvte:product:code;

            Hope this helps - Brennan
            Brennan Heyde
            VP Developer Relations
            Miva, Inc.
            [email protected]
            http://www.miva.com

            Comment


            • #7
              Re: How to display image machine thumbs inside a lightbox, as well as the prod page

              Thanks! That really got me un-stuck!
              Calvin Nelson
              Director of Web Development
              2C Development Group

              Comment


              • #8
                Re: How to display image machine thumbs inside a lightbox, as well as the prod page

                Hey thanks for all the help!!!! I have made a test page for the client and it works great! Here is the link if you would like to take a look, and I will post the code for anyone who wants to do the same later!

                http://www.chessusa.com/product/new-...yout-test.html

                Here is the code for the light box page:

                HTML Code:
                <mvt:item name="head" param="head_tag" />
                <head>
                <mvt:item name="html_profile" />
                <base href="&mvt:global:basehref;" />
                <mvt:item name="head" param="css_list" /><mvt:item name="product_display_imagemachine" param="head" />
                </head>
                <body style="padding-top: 0;" class="PROD">
                <div style="width: 600px; height: 600px; float: left; border: 2px solid #ccc;"> <img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;"> </div>
                <div style="float: left; width: 350px;">
                  <ul id="thumbnails" class="thumbnails"></ul>
                  <mvt:item name="product_display_imagemachine" param="body:product:id" />
                </div>
                </div>
                </body>
                </html>
                Set the options accordingly on the image machine.

                I used fancybox for the lightbox iframe.

                Add the scripts for fancy box in the head of the regular prod page and these settings aswell:

                HTML Code:
                <script>
                $(document).ready(function() {
                    $(".various").fancybox({
                        maxWidth    : 990,
                        maxHeight    : 604,
                        fitToView    : false,
                        width        : '990',
                        height        : '604',
                        autoSize    : false,
                        closeClick    : false,
                        openEffect    : 'none',
                        closeEffect    : 'none'
                    });
                });
                </script>
                Then any place you want the light box to open add this a link:

                HTML Code:
                <a class="various" data-fancybox-type="iframe" href="/mm5/merchant.mvc?Screen=PROD-IFRAME&Product_Code=&mvt:product:code;"> </a>
                And your done!!

                Thanks again!!!
                Calvin Nelson
                Director of Web Development
                2C Development Group

                Comment

                Working...
                X