I would like the ability for my clients to build a product and see what it looks like before buying. Here is such an example:
http://www.controllerchaos.com/xbox-build-your-own.html
I had installed this: https://amasty.com/color-swatches-pro.html
It worked, but seemed to screw up my media.phtml pages. Thumbnails weren't showing up, and only one image as being displayed.
Replacing the old media.phtml file made my images work again.
Here is the media.phtml in which my images display correctly.
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$use_zoom = themeOptions('use_zoom');
$use_carousel = themeOptions('use_carousel');
$thumbs_count = count($this->getGalleryImages());
$_i_thumbs = 0;
?>
<div class="zoom-container">
<?php include('labels.phtml') ?>
<div class="main-image" >
<a id="zoom" class="<?php if(!$use_zoom): ?> lightbox<?php endif;?> main-thumbnail" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
<?php
$_img = '<img class="zoom-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(390).'" width="390" height="390" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
<div class="lightbox-btn">
<a id="zoom" class="lightbox" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
<?php echo $this->__('Enlarge') ?>
</a>
</div>
</div>
<div class="more-views <?php if($use_carousel && $thumbs_count > 4): ?>touchcarousel grey-blue<?php endif; ?>" <?php if($use_carousel && $thumbs_count > 4): ?>style="height:70px;"<?php endif; ?>>
<div class="zoom-gallery slider">
<?php if($thumbs_count == 0): ?>
<div class="slide last">
<a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(390) ?>">
<?php
$_img = '<img class="zoom-image" src="'.$this->helper('catalog/image')->init($_product, 'thumbnail')->resize(60).'" width="60" height="60" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
</div>
<?php endif; ?>
<?php if ($thumbs_count > 0): ?>
<?php foreach ($this->getGalleryImages() as $_image): $_i_thumbs++; ?>
<div class="slide <?php if($thumbs_count == $_i_thumbs) echo 'last'; ?>">
<a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(390); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(63); ?>" width="63" height="63" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php if($use_carousel && $thumbs_count > 5): ?>
<div class="more-views-arrow prev"> </div>
<div class="more-views-arrow next"> </div>
<?php endif;?>
</div>
<script type="text/javascript">
<?php if($use_zoom): ?>
// Start easyZoom
jQuery('#zoom')
.easyZoom({
parent: 'div.zoom-container',
preload: '',
lightboxBtn: '.lightbox-btn .lightbox'
})
.data('easyZoom')
.gallery('a.zoom-thumbnail');
<?php endif;?>
<?php if($use_carousel && $thumbs_count > 4): ?>
// Start Carousel
jQuery('.more-views').iosSlider({
desktopClickDrag: true,
snapToChildren: true,
infiniteSlider: false,
navNextSelector: '.more-views-arrow.next',
navPrevSelector: '.more-views-arrow.prev'
});
<?php endif;?>
// Start lightbox
jQuery('a.lightbox').lightBox({
imageLoading : '<?php echo $this->getSkinUrl('images/lightbox-ico-loading.gif') ?>',
imageBtnClose : '<?php echo $this->getSkinUrl('images/lightbox-btn-close.gif') ?>',
imageBtnNext : '<?php echo $this->getSkinUrl('images/lightbox-btn-next.gif') ?>',
imageBtnPrev : '<?php echo $this->getSkinUrl('images/lightbox-btn-prev.gif') ?>',
imageBlank : '<?php echo $this->getSkinUrl('images/lightbox-blank.gif') ?>',
fixedNavigation : true
});
</script>
And here is the media.phtml file for the Color swatches pro:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$use_zoom = themeOptions('use_zoom');
$use_carousel = themeOptions('use_carousel');
$thumbs_count = count($this->getGalleryImages());
$_i_thumbs = 0;
?>
<div class="zoom-container">
<?php include('labels.phtml') ?>
<div class="main-image" >
<a id="zoom" class="<?php if(!$use_zoom): ?> lightbox<?php endif;?> main-thumbnail" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
<?php
$_img = '<img class="zoom-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(390).'" width="390" height="390" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
<div class="lightbox-btn">
<a id="zoom" class="lightbox" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>">
<?php echo $this->__('Enlarge') ?>
</a>
</div>
</div>
<div class="more-views <?php if($use_carousel && $thumbs_count > 4): ?>touchcarousel grey-blue<?php endif; ?>" <?php if($use_carousel && $thumbs_count > 4): ?>style="height:70px;"<?php endif; ?>>
<div class="zoom-gallery slider">
<?php if($thumbs_count == 0): ?>
<div class="slide last">
<a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(390) ?>">
<?php
$_img = '<img class="zoom-image" src="'.$this->helper('catalog/image')->init($_product, 'thumbnail')->resize(60).'" width="60" height="60" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
</div>
<?php endif; ?>
<?php if ($thumbs_count > 0): ?>
<?php foreach ($this->getGalleryImages() as $_image): $_i_thumbs++; ?>
<div class="slide <?php if($thumbs_count == $_i_thumbs) echo 'last'; ?>">
<a class="zoom-thumbnail<?php if(!$use_zoom): ?> lightbox<?php endif;?>" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" data-easyzoom-source="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(390); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(63); ?>" width="63" height="63" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<?php if($use_carousel && $thumbs_count > 5): ?>
<div class="more-views-arrow prev"> </div>
<div class="more-views-arrow next"> </div>
<?php endif;?>
</div>
<script type="text/javascript">
<?php if($use_zoom): ?>
// Start easyZoom
jQuery('#zoom')
.easyZoom({
parent: 'div.zoom-container',
preload: '',
lightboxBtn: '.lightbox-btn .lightbox'
})
.data('easyZoom')
.gallery('a.zoom-thumbnail');
<?php endif;?>
<?php if($use_carousel && $thumbs_count > 4): ?>
// Start Carousel
jQuery('.more-views').iosSlider({
desktopClickDrag: true,
snapToChildren: true,
infiniteSlider: false,
navNextSelector: '.more-views-arrow.next',
navPrevSelector: '.more-views-arrow.prev'
});
<?php endif;?>
// Start lightbox
jQuery('a.lightbox').lightBox({
imageLoading : '<?php echo $this->getSkinUrl('images/lightbox-ico-loading.gif') ?>',
imageBtnClose : '<?php echo $this->getSkinUrl('images/lightbox-btn-close.gif') ?>',
imageBtnNext : '<?php echo $this->getSkinUrl('images/lightbox-btn-next.gif') ?>',
imageBtnPrev : '<?php echo $this->getSkinUrl('images/lightbox-btn-prev.gif') ?>',
imageBlank : '<?php echo $this->getSkinUrl('images/lightbox-blank.gif') ?>',
fixedNavigation : true
});
</script>
I feel like there is some abnormality I am overseeing. Any ideas would be great. I tried reaching out to the developer but that hasn't led me anywhere.
Or does anyone know of any other programs out there to create the controller creator as my competitor has?
