<?php
/**
* @package HikaShop for Joomla!
* @version 2.2.3
* @author hikashop.com
* @copyright (C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');
$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
$variant_name = $this->variant_name;
if(substr($variant_name, 0, 1) != '_')
$variant_name = '_' . $variant_name;
$variant_main = $variant_name;
$display_mode = 'display:none;';
}
?>
<div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
<div class="row-fluid">
<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div span8">
<?php
if (!empty($this->element->images) && count($this->element->images) > 1):
$firstThumb = true;
foreach ($this->element->images as $image) {
if($this->image->override) {
echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width, $height);
} else {
if(empty($this->popup))
$this->popup = hikashop_get('helper.popup');
$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
if($img->success) {
$id = null;
if($firstThunb) {
$id = 'hikashop_first_thumbnail';
$firstThunb = false;
}
$attr = 'onclick="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.@$image->file_description.'\', \''.@$image->file_name.'\');"';
$html = '<img class="hikashop_child_image" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'.$variant_name));
}
}
}
endif;
?>
</div>
<div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div zoom span4 pull-right">
<span>Grab Image To</span>
<?php if(!empty ($this->element->images)){
$image = reset($this->element->images);
}
$height = (int)$this->config->get('product_image_y');
$width = (int)$this->config->get('product_image_x');
if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
if(empty($width)) $width = (int)$this->config->get('thumbnail_x');
$divWidth = $width;
$divHeight = $height;
$this->image->checkSize($divWidth,$divHeight,$image);
if (true) {
if(!empty ($this->element->images)){
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" />';
}
} else {
$style = '';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
if (!empty($height)) {
$style = ' style="height:' . ($height + 20) . 'px;"';
}
}
$variant_name='';
if(isset($this->variant_name)){
$variant_name=$this->variant_name;
} ?>
<div class="hikashop_product_main_image_thumb zoom" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" >
<div class="hikashop_product_main_image">
<div class="hikashop_product_main_image_subdiv">
<?php
if($this->image->override) {
echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" ','id="hikashop_main_image_link"', $width, $height);
} else {
if(empty($this->popup))
$this->popup = hikashop_get('helper.popup');
$image_options = array('default' => true);
$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
if($img->success) {
$attr = '';
$html = '<span><img id="hikashop_main_image'.$variant_name.'" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/></span>';
if(!empty($this->element->badges))
$html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false);
echo $this->popup->image($html, $img->origin_url, null, $attr);
}
} ?>
</div>
</div>
</div>
<?php
} ?>
</div>
</div>
</div>
<script>
jQuery('.hikashop_child_image').click(function(){
jQuery('.hikashop_main_image_div').trigger('zoom.destroy');
});
jQuery('.hikashop_main_image_div').hover(function(){
jQuery(this).zoom({
on:'grab',
magnify: 1.5,
duration: 0,
});
});
jQuery('.hikashop_main_image_div').mousedown(function(){
jQuery('#hikashop_main_image').css('opacity', '0');
});
jQuery('.hikashop_main_image_div').mouseup(function(){
jQuery('#hikashop_main_image').css('opacity', '100')
});
jQuery('.hikashop_main_image_div').mouseout(function(){
jQuery('#hikashop_main_image').css('opacity', '100');
});
</script>
<script type="text/javascript">
if(!window.localPage)
window.localPage = {};
if(!window.localPage.images)
window.localPage.images = {};
window.localPage.changeImage = function(el, id, url, width, height, title, alt) {
var d = document, target = d.getElementById(id);
if(!target) return false;
target.src = url;
target.width = width;
target.height = height;
target.title = title;
target.alt = alt;
window.localPage.images[id] = el;
return false;
};
window.localPage.openImage = function(id) {
if(!window.localPage.images[id])
window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail');
window.localPage.images[id].click();
return false;
};
</script>
I also just noticed that when a variant is selected in the chosen box, it disable the ability to change the main image by clicking/hovering on the thumbnails.