shop-old/themes/easyshop_advanced/templates/content_box_manufacturers.tpl
2026-04-20 01:03:43 +02:00

119 lines
3.5 KiB
Smarty

{if $system_configuration.item_image_server_uri}
{assign var=SHOP_DIR value="{$system_configuration.item_image_server_uri}"}
{/if}
<div class="content_box_manufacturer_slider">
<div class="image_slider_title"><span class="text">Unsere Marken im &Uuml;berblick</span></div>
<div class="image_slider_content_outer_wrapper">
<div class="image_slider_content_inner_wrapper">
{foreach name=ManufacturerList item=manufacturer from=$manufacturers}
<div class="slider_item_box">
<a class="slider_item_box_info" href="{$serverProtocol}://{$servername}/kaufen/{$manufacturer->short_uri}/">{$manufacturer->name|truncate:27:"...":true}</a>
<div class="slider_item_box_image">
<a class="slider_image" href="{$serverProtocol}://{$servername}/kaufen/{$manufacturer->short_uri}/" style="background-image:url({$SHOP_DIR}images/manufacturers/{$manufacturer->logo});"></a>
</div>
<div class="slider_item_box_price">
<div class="slider_item_box_info_bull"></div>
</div>
</div>
{/foreach}
</div>
</div>
<a class="slider_image_slider_trigger_left">&lt;&lt;</a>
<a class="slider_image_slider_trigger_right">&gt;&gt;</a>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
var ManufacturersMax = {$manufacturers|@count};
$(document).ready(function() {
// Slider
var ItemWidth = $('.content_box_manufacturer_slider .slider_item_box').outerWidth(true);
var ItemMargin = parseInt($('.content_box_manufacturer_slider .slider_item_box').css('marginLeft').replace('px',''));
var HolderW = $('.content_box_manufacturer_slider .image_slider_content_outer_wrapper').width();
var ScrollMaxLeft = -(((ItemWidth + ItemMargin) * ManufacturersMax) - HolderW);
$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').css({
'width': ((ItemWidth + ItemMargin) * ManufacturersMax) + 'px'
});
var ScrollPosition = 0;
$('.content_box_manufacturer_slider .slider_image_slider_trigger_right').click(function() {
++ScrollPosition;
++ScrollPosition;
++ScrollPosition;
var scrollTo = -((ItemWidth + ItemMargin) * ScrollPosition);
if (scrollTo < ScrollMaxLeft) {
scrollTo = ScrollMaxLeft - ItemMargin;
--ScrollPosition;
--ScrollPosition;
--ScrollPosition;
}
$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').animate({
'left': scrollTo + 'px'
});
}).unbind('mouseenter').bind('mouseenter', function() {
$(this).css({
'opacity': '0.8'
});
}).unbind('mouseleave').bind('mouseleave', function() {
$(this).css({
'opacity': '1.0'
});
});
$('.content_box_manufacturer_slider .slider_image_slider_trigger_left').click(function() {
--ScrollPosition;
--ScrollPosition;
--ScrollPosition;
var scrollTo = -((ItemWidth + ItemMargin) * ScrollPosition);
if (scrollTo > 0) {
scrollTo = 0;
++ScrollPosition;
++ScrollPosition;
++ScrollPosition;
}
$('.content_box_manufacturer_slider .image_slider_content_inner_wrapper').animate({
'left': scrollTo + 'px'
});
}).unbind('mouseenter').bind('mouseenter', function() {
$(this).css({
'opacity': '0.8'
});
}).unbind('mouseleave').bind('mouseleave', function() {
$(this).css({
'opacity': '1.0'
});
});
});
</script>
{*
<div class="content_box_manufacturers">
<div class="header"><h3>Unsere Hersteller in der &Uuml;bersicht</h3></div>
<div class="content">
{foreach item=manufacturer from=$manufacturers}
<a style="float:left;width:25%;color:#000000;" href="/Kaufen/{$manufacturer->short_uri}/">{$manufacturer->name}</a>
{/foreach}
<br style="clear:left;" />
</div>
</div>*}