Miva Merchant Community Forums

**cnelson** · 11-28-12 01:29 PM

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

**Brennan** · 11-28-12 04:07 PM

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.

**cnelson** · 12-03-12 10:32 AM

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?

**cnelson** · 12-06-12 08:07 AM

Any ideas on this?

**Leanne** · 12-06-12 09:20 AM

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.

**Brennan** · 12-06-12 09:26 AM

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

**cnelson** · 12-06-12 11:52 AM

Thanks! That really got me un-stuck!

**cnelson** · 12-07-12 09:48 AM

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

Miva Merchant Community Forums

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

Thread Tools

Display

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

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

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

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

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

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

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

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

Posting Rules

About Miva Merchant

Contact

Software

Developer Resources

Services

Support

Miva Merchant Community Forums

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

Thread Tools

Display

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

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

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

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

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

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

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

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

Posting Rules

About Miva Merchant

Contact

Software

Developer Resources

Services

Support

Connect With Us