first commit
This commit is contained in:
189
modules/appagebuilder/views/templates/hook/ApImageHotspot.tpl
Normal file
189
modules/appagebuilder/views/templates/hook/ApImageHotspot.tpl
Normal file
@@ -0,0 +1,189 @@
|
||||
{*
|
||||
* @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}
|
||||
Reference in New Issue
Block a user