Enlarging Option Image

[mirabelleza]

My client offers a few options of each item, and she wants the customers to see what those options looks like. So i have created the image option for her product pages, and everything looks fantastic. Except that the images are small, and you can't really see the details in the image. Is there a way to make these thumbnails enlarge, just like the product images.

I tried adding the fancy box code to the option image section in product.tpl, and it show the pop-up but of the product images and not the option image.

Code: Select all

<?php if ($option['type'] == 'image') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
            <table class="option-image">
              <?php foreach ($option['option_value'] as $option_value) { ?>
              <tr>
                <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" id="image" /></a></label></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label></td>
              </tr>
              <?php } ?>

[mirabelleza]

Ok so I realized that the href and the src didn't match, so now they both have the same line of code. The popup show up, but image is still really small.

here is the update i made:

Code: Select all

<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><a href="<?php echo $option_value['image']; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" id="image" /></a></label></td>

[mirabelleza]

I found this, in controller/product/product.php

Code: Select all

'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),

So I am able to change the thumb size, but i want to be able to make it enlarge in a popup. Any ideas? Anyone?

[Qphoria]

This may be what you are after:
viewtopic.php?f=123&t=42670#p204968

[Concept211]

I went ahead and created a vQmod for this since I couldn't find a proper solution anywhere else:
http://www.opencart.com/index.php?route ... on_id=4768

Enjoy!

[vince805]

Thanks Concept211 for that mod! I don't use fancybox though, so after I changed that to colorbox everything is working awesome!

[virtualgeorge]

I wanted to try this out so first tried it with option boost, I see a little square like its trying to pop up something but it didn't work. Saw this in Q's code so maybe that is not ready yet or is that just for the main image swap which does work?

Code: Select all

//(useSwatch NOT YET IMPLEMENTED yet. Leave false for now. WIll be updated in next release)
var useSwatch = false; // Set to true if you want to use smaller image for option image swapping. False to swap main image.

I am trying this in 1.5.2.1
Can someone tell me what I would need to change in Concept211's mod to so the popup works with colorbox?
Something here?

Code: Select all

<a href="<?php echo $option_value['popup']; ?>" title="<?php echo $option['name'] . ': ' . $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="fancybox" rel="fancybox-option-<?php echo $option['product_option_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></a>