189 lines
9.4 KiB
Smarty
189 lines
9.4 KiB
Smarty
{*
|
|
* @Module Name: AP Page Builder
|
|
* @Website: apollotheme.com - prestashop template provider
|
|
* @author Apollotheme <apollotheme@gmail.com>
|
|
* @copyright Apollotheme
|
|
* @description: ApPageBuilder is module help you can build content for your shop
|
|
*}
|
|
<!-- @file modules\appagebuilder\views\templates\hook\ApImage -->
|
|
{if isset($formAtts.lib_has_error) && $formAtts.lib_has_error}
|
|
{if isset($formAtts.lib_error) && $formAtts.lib_error}
|
|
<div class="alert alert-warning leo-lib-error">{$formAtts.lib_error}</div>
|
|
{/if}
|
|
{else}
|
|
<div id="image-{$formAtts.form_id|escape:'html':'UTF-8'}" class="block {(isset($formAtts.class)) ? $formAtts.class : ''|escape:'html':'UTF-8'} {(isset($formAtts.class) && $formAtts.class) ? $formAtts.class : ''|escape:'html':'UTF-8'}">
|
|
{($apLiveEdit)?$apLiveEdit:''}{* HTML form , no escape necessary *}
|
|
|
|
{if isset($formAtts.title) && $formAtts.title}
|
|
<h4 class="title_block">{$formAtts.title}{*contain html, no escape necessary*}</h4>
|
|
{/if}
|
|
{if isset($formAtts.sub_title) && $formAtts.sub_title}
|
|
<div class="sub-title-widget">{$formAtts.sub_title nofilter}</div>
|
|
{/if}
|
|
{if (isset($formAtts.image) && $formAtts.image) || (isset($formAtts.image_link) && $formAtts.image_link)}
|
|
{if isset($formAtts.url) && $formAtts.url}
|
|
<a href="{$formAtts.url}{*full url can not escape*}" {(isset($formAtts.is_open) && $formAtts.is_open) ? 'target="_blank"' : ''|escape:'html':'UTF-8'}>
|
|
{/if}
|
|
|
|
<div class="imagehotspot-container">
|
|
<div class="" style="position: relative">
|
|
{*<img style="position: absolute; top: 0px; left: 0px; z-index: 102;" alt="" src="images/ford-fusion.jpg" />*}
|
|
|
|
<img {if isset($aplazyload) && $aplazyload}class="lazy" data-src{else}src{/if}="{if isset($formAtts.image) && $formAtts.image}{$path|escape:'html':'UTF-8'}{$formAtts.image|escape:'html':'UTF-8'}{else}{if isset($formAtts.image_link)}{$formAtts.image_link|escape:'html':'UTF-8'}{/if}{/if}" class="{(isset($formAtts.animation) && $formAtts.animation != 'none') ? 'has-animation' : ''|escape:'html':'UTF-8'}"
|
|
{if isset($formAtts.animation) && $formAtts.animation != 'none'} data-animation="{$formAtts.animation|escape:'html':'UTF-8'}" {/if}
|
|
|
|
title="{((isset($formAtts.title) && $formAtts.title) ? $formAtts.title : '')|escape:'html':'UTF-8'}"
|
|
alt="{((isset($formAtts.alt) && $formAtts.alt) ? $formAtts.alt : '')|escape:'html':'UTF-8'}"
|
|
style=" width:{((isset($formAtts.width) && $formAtts.width) ? $formAtts.width : 'auto')|escape:'html':'UTF-8'};
|
|
height:{((isset($formAtts.height) && $formAtts.height) ? $formAtts.height : 'auto')|escape:'html':'UTF-8'}" />
|
|
|
|
|
|
{*{if isset($formAtts.title) && $formAtts.title=='White Cart'}
|
|
<div class="redhotspot" id="fhotspot1" style="position: absolute; z-index: 103; width: 1.667%; height: 3.472%; top: 74%; left: 8.9%;"></div>
|
|
<div class="redhotspot" id="fhotspot2" style="position: absolute; z-index: 103; width: 1.667%; height: 3.472%; top: 38%; left: 54%;"></div>
|
|
{/if}*}
|
|
|
|
{if isset($formAtts.items) && $formAtts.items}
|
|
{foreach from=$formAtts.items item=item}
|
|
<div class="redhotspot {$formAtts.form_id}_{$item.id}" id="hotspot_{$formAtts.form_id}_{$item.id}" style="position: absolute; z-index: 103; width: 1.667%; height: 3.472%; top: {$item.temp_top}%; left: {$item.temp_left}%;"><span>{$item.id}</span></div>
|
|
<script>
|
|
ap_list_functions.push(function(){
|
|
$("#hotspot_{$formAtts.form_id}_{$item.id}").LiteTooltip({
|
|
location : "{$item.temp_location}",
|
|
textalign: "{$item.temp_textalign}",
|
|
trigger: "{$item.temp_trigger}",
|
|
templatename: "{$item.temp_class}",
|
|
debug : false,
|
|
width : '{$item.temp_width}',
|
|
opacity : '{if $item.temp_opacity == '' || $item.temp_opacity == 0}1{else}{$item.temp_opacity}{/if}',
|
|
margin : '{$item.temp_margin}',
|
|
padding: '{$item.temp_padding}',
|
|
textcolor: '{$item.temp_textcolor}',
|
|
backcolor: '{$item.temp_backcolor}',
|
|
title:
|
|
'<div class="template"><p>'
|
|
{if isset($item.temp_image) && $item.temp_image}
|
|
+ '<img src="{$item.temp_image}" class="{if $item.temp_imagealign == 'right'}image-right{elseif $item.temp_imagealign == 'left'}image-left{/if}" style="width: 100%; max-width:200px" />'
|
|
{else}
|
|
{if isset($item.temp_image_link) && $item.temp_image_link}
|
|
+ '<img src="{$item.temp_image_link}" class="{if $item.temp_imagealign == 'right'}image-right{elseif $item.temp_imagealign == 'left'}image-left{/if}" style="width: 100%; max-width:200px" />'
|
|
{/if}
|
|
{/if}
|
|
+ '<span class="temp_description">{$item.temp_description nofilter}</span>'
|
|
+ '</p></div>'
|
|
|
|
});
|
|
|
|
$(".{$formAtts.form_id}_{$item.id}").css({
|
|
"background": "{$item.temp_hpcolor}",
|
|
"border-radius": "19.2px"
|
|
});
|
|
});
|
|
|
|
</script>
|
|
{/foreach}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{if isset($formAtts.url) && $formAtts.url}
|
|
</a>
|
|
{/if}
|
|
{/if}
|
|
|
|
|
|
{($apLiveEditEnd)?$apLiveEditEnd:''}{* HTML form , no escape necessary *}
|
|
{if isset($formAtts.description) && $formAtts.description}
|
|
<div class='image_description'>
|
|
{($formAtts.description) ? $formAtts.description:''}{* HTML form , no escape necessary *}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
ap_list_functions.push(function(){
|
|
{* var $window = $(window)*}
|
|
//window.prettyPrint();
|
|
|
|
$(".redhotspot").css({
|
|
{* "border": "solid 1px #990000",*}
|
|
"background": "#cc0000",
|
|
"border-radius": "19.2px"
|
|
});
|
|
|
|
function blink_hotspot() {
|
|
// car image
|
|
$('.redhotspot').animate({ "opacity": '1' }, 'slow')
|
|
.animate({ 'opacity': '1' }, 'fast', function () { blink_hotspot(); });
|
|
}
|
|
|
|
blink_hotspot();
|
|
});
|
|
|
|
|
|
// Dien config vao day
|
|
// có config : image-left, image-right
|
|
/*
|
|
$("#fhotspot1").LiteTooltip({
|
|
textalign: "left",
|
|
trigger: "hover", // click
|
|
templatename: "BostonBlue",
|
|
backcolor: '#ff0000',
|
|
delay : '1000',
|
|
title:
|
|
'<div class="template">' +
|
|
'<p style="padding: 15px; font-size: 11px; line-height: 20px;">' +
|
|
'<img src="animal_1920_1080_1.jpg" class="image-right" style="max-width: 75px; width: 100%;" />' +
|
|
'Take your pick of standard and available wheels on the 2013 Ford Fusion.' +
|
|
'</p>' +
|
|
'</div>'
|
|
});
|
|
|
|
$("#fhotspot2").LiteTooltip({
|
|
location : "left-bottom",
|
|
textalign: "center",
|
|
trigger: "hover",
|
|
templatename: "BostonBlue",
|
|
debug : true,
|
|
width : '500px',
|
|
delay : '1000',
|
|
opacity : '0.2',
|
|
margin : '50px',
|
|
padding: '10px',
|
|
textcolor: '#ff0000',
|
|
backcolor: '#ff0000',
|
|
title:
|
|
'<div class="template">' +
|
|
'<p style="padding: 15px; font-size: 11px; line-height: 20px;">' +
|
|
'<img src="animal_1920_1080_1.jpg" class="image-right" style="max-width: 75px; width: 100%;" />' +
|
|
'Ambient lighting in the Titanium with cool interior illumination.' +
|
|
'</p>' +
|
|
'</div>'
|
|
});
|
|
|
|
|
|
location: top | right | bottom | left | top-left | top-right | right-top | right-bottom |bottom-left | bottom-right | left-top | left-bottom
|
|
title:
|
|
backcolor: #ff0000
|
|
textalign: left, right, center
|
|
trigger: hoverable, hover, focus, click
|
|
textcolor: #ff0000
|
|
opacity:
|
|
templatename:
|
|
width:
|
|
margin:
|
|
padding:
|
|
delay:
|
|
issticky: true, false
|
|
container:
|
|
shadow:
|
|
debug:true
|
|
*/
|
|
|
|
</script>
|
|
{/if} |