Как прикрутить стандартный widgetkit Showcase Box Example к JoomShopping? - JoomShopping

<div class="product_images">
			<div id="showcase-37-53d1f799b55bc" class="wk-gallery-showcase" data-widgetkit="showcase" data-options="{&quot;style&quot;:&quot;showcase_box&quot;,&quot;autoplay&quot;:1,&quot;interval&quot;:5000,&quot;width&quot;:350,&quot;height&quot;:220,&quot;duration&quot;:1500,&quot;index&quot;:0,&quot;order&quot;:&quot;default&quot;,&quot;buttons&quot;:0,&quot;slices&quot;:20,&quot;animated&quot;:&quot;rotate&quot;,&quot;caption_animation_duration&quot;:500,&quot;effect&quot;:&quot;zoom&quot;,&quot;slideset_buttons&quot;:1,&quot;items_per_set&quot;:4,&quot;slideset_effect_duration&quot;:400}">
				<div id="showcase-37-53d1f799b55bc" class="wk-slideshow">
					<div class="slides-container">
						<div class="zoom-img"><i class="uk-icon-search-plus"></i></div>
						<?php print $this->_tmp_product_html_before_image;?>
						<?php if ($product->label_id){?>
							<?php if ($product->_label_image){?>
						<div class="uk-panel-badge" style="z-index:10; top:-1px; right: 10px;">
							<img src="<?php print $product->_label_image?>" alt="<?php print htmlspecialchars($product->_label_name)?>" /></div>
							<?php }else{?>
							<div class="uk-badge uk-panel-badge uk-badge-danger" style="z-index:10; right: 10px;"><?php print $product->_label_name;?></div>
							<?php }?>
						<?php }?>
						<?php print $this->_tmp_product_html_after_image;?>
						<ul class="slides" style="width: 100%; overflow: hidden; position: relative; height: 229px;">
							<?php foreach($this->images as $k=>$image){?>
							<li style="top: 0; left: 0; position: absolute; <?php if ($k != 0){ echo "display:none; z-index: 1; opacity: 0;"; } else { echo "display: list-item; z-index: 2; opacity: 1; ";}?> height: 229px; width: 229px;">
								<article class="wk-content clearfix">
									<a data-lightbox="transitionIn:elastic;transitionOut:elastic;group:mygroup1;titlePosition:over;padding:0" class="uk-overlay-toggle" href="<?php echo $this->image_product_path?>/<?php echo $image->image_full;?>" title="<?php echo htmlspecialchars($image->_title)?>" style="border-bottom:none;">
		<img itemprop="image" id="main_image_<?php echo $image->image_id?>" src="<?php echo $this->image_product_path?>/<?php echo $image->image_full;?>" alt="<?php echo htmlspecialchars($image->_title)?>" title="<?php echo htmlspecialchars($image->_title)?>"/>
  <div class="uk-overlay-area"></div>
									</a>
								</article>
							</li>
							<?php }?>
						</ul>
					</div>
				</div>	
				<?php if (count($this->images) > 1) { ?>
				<div id="slideset-37-53d1f799b55bc" class="wk-slideset " style="visibility: visible;">
					<div>
						<div class="sets">
							<?php $next_prev = true;?>
				<?php foreach($this->images as $k => $image){?>
							<?php if ($k%3 == 0){?>
								<?php if ($k){$next_prev = true;}?>
									<ul class="set" style="display: block; margin: 0 auto;">
								<?php }?>
							<li style="left: <?php echo $k * 80;?>px;" class="<?php echo $k ? "": "active";?>">
								<div><img src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" width="80" height="60" alt="<?php print htmlspecialchars($image->_title)?>"></div>
							</li>
							<?php if ($k%3 == 2){?>
									</ul>
								<?php }?>
							<?php }?>
						</div>
						<?php if($next_prev){ ?>
						<div class="next"></div>
						<div class="prev"></div>
						<?php }?>
					</div>
				</div>
				<?php }?>
			</div>
		</div>