PHP Classes

File: Application/Module/Core/View/options_widget_slider.tpl

Recommend this page to a friend!
  Classes of Duong Huynh Nghia   Lego PHP   Application/Module/Core/View/options_widget_slider.tpl   Download  
File: Application/Module/Core/View/options_widget_slider.tpl
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Lego PHP
Blog and shopping cart system
Author: By
Last change: Update Slider ( Add title + link)
Date: 6 years ago
Size: 4,204 bytes
 

Contents

Class file image Download
{% for key,aSetting in aSettings %} <div class="form-group"> <label>{{ Translate(aSetting.title) }}</label> {% if aSetting.type == 'text' %} <input type="text" id="params_{{ key }}" class="form-control" name="params[{{ key }}]" value="{{ aSetting.value}}" > {% endif %} {% if aSetting.type == 'slider' %} <script type="text/javascript"> CORE.POPUP.resize('{{ iPopupId }}','medium'); CORE.editor('#params_{{ key }}'); </script> <div class="image-slider-holder"> {%if aSetting.value %} {% for key,sImg in aSetting.value %} <div class="image-holder-item"> <p class="inline-image" style="float:left;"> <a class="js-remove-a" onclick="remove_item(this)" href="javascript:void(0)"> <i class="fa fa-trash"></i></a> <img src="{{ sImg.url|image_path('small-square') }}"/> <input type="hidden" name="params[{{ key }}][{{loop.index0}}][url]" value="{{ sImg.url }}"/> </p> <div class="img-content-holder" style="float:left;width:70%;"> <input class="form-control" type="text" value="{{sImg.title}}" name="params[{{ key }}][{{loop.index0}}][title]" placeholder="{{ Translate('core.title')}}"/> <input class="form-control" type="text" value="{{sImg.link}}" name="params[{{ key }}][{{loop.index0}}][link]" placeholder="{{ Translate('core.link')}}"/> </div> <div class="clear"></div> </div> {% endfor %} {% endif %} </div> <div class="file-manager"> <a href="javascript:void(0)" class="btn btn-info btn-xs" onclick="add_media_slider(this);" holder="image-slider-holder">{{ Translate('core.add_media') }}</a> <script type="text/javascript"> var key_slider_name = "{{ key }}"; function add_media_slider(element) { var container = $(element).parent().parent().find('.image-slider-holder'); var item = new CAPPEDITOR(element, container); item.onChooseCallBack = function(list){ var l = $('.image-slider-holder .image-holder-item').length; if (list.length > 0) { for (i = 0; i < list.length; i++) { var item = list[i]; var index = l + i; var html = ''; if (typeof item.thumb != 'undefined') { html = '<div class="image-holder-item"> <p class="inline-image" style="float:left;"><a class="js-remove-a" onclick="remove_item(this)" href="javascript:void(0)"><i class="fa fa-trash"></i></a><img src="' + item.thumb + '"/><input type="hidden" name="params['+key_slider_name+']['+index+'][url]" value="'+item.absolute_path+'"/></p>'; html+='<div class="img-content-holder" style="float:left;width:70%;">'; html+='<input class="form-control" type="text" value="" name="params['+key_slider_name+']['+index+'][title]" placeholder="{{ Translate('core.title')}}"/>'; html+='<input class="form-control" type="text" value="" name="params['+key_slider_name+']['+index+'][link]" placeholder="{{ Translate('core.link')}}"/>'; html+='<div class="clear"></div>'; html+='</div>'; html+='<div class="clear"></div>'; html+='</div>'; } this.container.append(html); } } }; CORE.showFileManager(item,'image'); } function remove_item(element){ var parent = $(element).parent().parent(); bootbox.confirm(_TL('core.are_you_sure'), function(result){ if(result){ parent.remove(); } }); } </script> </div> {% endif %} </div> {% endfor %} <style> .js-remove-a{ display:none; position: absolute; top:3px; right:3px; } .image-slider-holder{ margin-bottom:10px; } .image-slider-holder .inline-image:hover .js-remove-a{ display:block; } .image-slider-holder .inline-image{ width:80px; background:#fff; border:1px solid #dfdfdf; display:inline-block; margin:3px 5px; position: relative; } .image-slider-holder .inline-image span{ background:#efefef; display:block; padding:3px 5px; } .image-slider-holder .inline-image img{ width:100%; } .img-content-holder input{ margin-bottom:5px; } </style>