Code:
<?php
/**
* @package HikaShop for Joomla!
* @version 2.6.1
* @author hikashop.com
* @copyright (C) 2010-2016 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');
?><?php
$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="show_block_img row-fluid hikashop_global_image_div hidden-phone hidden-tablet" style="<?php echo $display_mode;?>">
<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="JMProductThumbImg span2 hidden-phone hidden-tablet">
<?php if (count($this->element->images) == 1) { ?> <?php }?>
<?php
if (!empty ($this->element->images) && count($this->element->images) > 1) {
$firstThunb = 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="JMProductImgList"','', $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 = 'class="" onmouseover="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="JMProductImgList" 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));
}
}
}
}
?>
</div>
<div id="hikashop_main_image_div<?php echo $variant_name;?>" class="JMProductMainImg span10">
<?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 (!$this->config->get('thumbnail')) {
if(!empty ($this->element->images)){
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" class="JMProductImgMain" style="vertical-align:middle" />';
}
} 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" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
<div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
<div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto; max-width:100%;" 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.'" class="JMProductImgMain" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','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 = '';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
$attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image\');"';
}
$html = '<img id="hikashop_main_image'.$variant_name.'" class="JMProductImgMain" style="vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
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 id="carousel-example-generic" class="carousel slide hidden-desktop" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" style="visibility:hidden;">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<?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 (!$this->config->get('thumbnail')) {
if(!empty ($this->element->images)){
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" class="JMProductImgMain" style="vertical-align:middle" />';
}
} 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" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
<div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
<div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto; max-width:100%;" 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.'" class="JMProductImgMain" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','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 = '';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
$attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image\');"';
}
$html = '<img id="hikashop_main_image'.$variant_name.'" class="JMProductImgMain" style="vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
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>
<?php
if (!empty ($this->element->images) && count($this->element->images) > 2) {
$firstThunb = true;
$thumbs = $this->element->images;
array_shift($thumbs);
foreach($thumbs as $image){
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 = true; }
$attr = 'class="item"';
$html = '<img class="JMProductImgList" 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));
}
}
}
?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="fa fa-angle-left glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="fa fa-angle-right glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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>
The mobile carousel works for ALL products without variants and displays multiple pictures. For example, this one has no variants and 5 images:
As you can see, the mobile carousel only displays 1 image instead of 2. This seems to be an issue with either (1) variants or (2) how i'm looping over images for the carousel.
However, it's strange that it will work for all products without variants though?
If there's an easier way to pull the images into the carousel, I'm open to suggestions.
Topic Author
