教程下载地址:
https://wdjacms.pipipan.com/fs/16922972-385595717
(PHP)JTBC1.0图片集默认是用竖线 | 隔开的图片地址字符串
为了增强其功能,可以为每张图片添加标题和介绍,我们再对每条图片地址进行扩展.
增加标题和介绍文字
原格式
1.jpg|2.jpg|3.png|4.gif
新格式
1#:#1介绍方案#:#1.jpg|2#:#2介绍方案#:#2.jpg|3#:#3介绍方案#:#3.png|4#:#4介绍方案#:#4.gif
为此,需要修改图片集上传图片的方式,修改预览图片集的方式,修改插入到内容中的方式
下面我们逐一进行操作:
1.添加语言
位置: /common/language/lng_config.jtbc
<item>
<disinfo><![CDATA[img_title]]></disinfo>
<chinese><![CDATA[图片标题]]></chinese>
</item>
<item>
<disinfo><![CDATA[img_desc]]></disinfo>
<chinese><![CDATA[图片介绍]]></chinese>
</item>
<item>
<disinfo><![CDATA[img_url]]></disinfo>
<chinese><![CDATA[图片链接]]></chinese>
</item>
说明:
这里的三个语言节点是作为后台添加和编辑模板中调用的.
2.添加函数
位置: /common/incfiles/common.inc.php
复制一份function mm_get_images_list($strers)函数
修改成如下
function mm_get_img_list($strers)
{
if (!(ii_isnull($strers)))
{
$option_unselected = ii_itake('global.tpl_config.option_unselect', 'tpl');
$tary = explode('|', $strers);
$tmpstr = '';
foreach ($tary as $key => $val)
{
$sary = explode('#:#', $val);
$tstr = $option_unselected;
$tstr = str_replace('{$explain}', $sary[0], $tstr);
$tstr = str_replace('{$value}', $sary[0].'#:#'.$sary[1].'#:#'.$sary[2], $tstr);
$tmpstr .= $tstr;
}
return $tmpstr;
}
}
说明:
这里的mm_get_img_list函数是用来格式化图片集字段的.
如果前台输出的话,也可以参考此函数进行处理.
3.添加js
3.1 位置: /common/images/js/preview_images.js
最下面添加代码
function preview_img(strurl, e)
{
var curPosX, curPosY
var img_arr = strurl.split("#:#");
var img_arr_len = img_arr.length - 1;
var img_url = img_arr[img_arr_len];
var img_desc = img_arr[1];
if(window.event){
curPosX = document.body.scrollLeft + event.x;
curPosY = document.body.scrollTop + event.y;
} else{
curPosX = e.pageX;
curPosY = e.pageY;
}
if (curPosX + 340 > document.body.clientWidth) {curPosX = curPosX - 340;}
if (curPosY + 220 > document.body.clientHeight + document.body.scrollTop) {curPosY = curPosY - 220;}
with(get_id("preview_images"))
{
style.display = "block";
style.left = curPosX + "px";
style.top = curPosY + "px";
}
get_id("preview_images_bottom").innerHTML = "<img src="" + img_url + "" border="0" onload="if (this.width > 300)this.width = 300;if (this.height > 180)this.height = 180;" alt="" + img_url + "">";
}
说明:
这里的js是用来进行预览图片集中的图片的,因为更改了图片集的存储格式,需要使用新方法进行预览.
3.2 位置: /common/images/js/manage.js
最下面添加以下代码
function img_info(){
var img_title = get_id("img_title").value ;
var img_desc = get_id("img_desc").value ;
var img_url = get_id("img_url").value ;
var opname = img_title ;
var opvalue = img_title+"#:#"+img_desc+"#:#"+img_url ;
if (img_title == "" || img_title.length == 0){
alert('标题不可为空');
}
else if (img_url == "" || img_url.length == 0){
alert('图片不可为空');
}
else{
selects.add(get_id("content_images"), opname, opvalue);
get_id("img_title").value = '';
get_id("img_desc").value = '';
get_id("img_url").value = '';
alert('增加成功');
}
}
function insert_img(strid, strurl, strntype, strtype, strbase)
{
var tstrtype;
var img_arr = strurl.split("#:#");
var img_arr_len = img_arr.length - 1;
var img_url = img_arr[img_arr_len];
var img_desc = img_arr[1];
if (strtype == -1)
{tstrtype = strntype;}
else
{
var thtype = request["htype"];
if (thtype == undefined)
{tstrtype = strtype;}
else
{tstrtype = get_num(thtype);}
}
switch (tstrtype)
{
case 0:
editor_insert(strid, "<img src="" + img_url + "" alt="" + img_desc + "" border="0">");
break;
case 1:
itextner(strid, "[img]" + img_url + "[/img]");
break;
case 3:
itextner(strid, "<img src="" + img_url + "" border="0">");
break;
}
}
说明:
img_info()是插入图片集表单内容到图片集的js函数.
insert_img是插入选择的图片集图片到内容编辑框中.
4.模块中的修改
位置: /模块/common/template/manage.jtbc
4.1节点add修改如下:
修改图片集表单代码
<tr>
<td height="25">{$=ii_itake('global.lng_config.images','lng')}</td>
<td><input type="hidden" name="content_images_list" id="content_images_list"><select name="content_images" id="content_images" class="select" onkeydown="selects.displace(this, this.selectedIndex, event.keyCode)"></select> <input type="button" class="button" value="{$=ii_itake('global.lng_config.preview','lng')}" onclick="preview_img(get_id('content_images').value, event)"> <input type="button" class="button" value="{$=ii_itake('global.lng_config.delete','lng')}" onclick="selects.remove(get_id('content_images'))"> <input type="button" class="button" value="{$=ii_itake('global.lng_config.insert','lng')}" onclick="insert_img('content', get_id('content_images').value, {$=#ncttype}, 0, '{$=ii_get_lrstr($GLOBALS['nuri'], "/", "leftr")}')"></td>
</tr>
说明:
这里的preview_img和insert_img是更改后的js方法.用来重新处理图片集的新格式,实现原预览和插入功能.
替换图片集上传代码为:
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_title','lng')}</td>
<td><input type="text" id="img_title" name="img_title" size="40" value=""></td>
</tr>
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_desc','lng')}</td>
<td><input type="text" id="img_desc" name="img_desc" size="40" value=""></td>
</tr>
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_url','lng')}</td>
<td><input type="text" id="img_url" name="img_url" size="30" value="" ondblclick="preview_images(this.value, event)"> <iframe src="?type=upload&upform=form&uptext=img_url&upsimg={$upsimg}" style="vertical-align: middle;" width="250" height="25" scrolling="no" marginwidth="0" marginheight="0" align="middle" name="upload" frameborder="0"></iframe></td>
</tr>
<tr>
<td height="25"></td>
<td><a onclick="img_info()" class="button">增加</a></td>
</tr>
说明:
这里的三个表单是新图片集格式的三个参数,用来组成新的图片集.
4.2节点edit修改如下:
修改图片集表单代码
<tr>
<td height="25">{$=ii_itake('global.lng_config.images','lng')}</td>
<td><input type="hidden" name="content_images_list" id="content_images_list"><select name="content_images" id="content_images" class="select" onkeydown="selects.displace(this, this.selectedIndex, event.keyCode)">{$=mm_get_img_list('{$content_images_list}')}</select> <input type="button" class="button" value="{$=ii_itake('global.lng_config.preview','lng')}" onclick="preview_img(get_id('content_images').value, event)"> <input type="button" class="button" value="{$=ii_itake('global.lng_config.delete','lng')}" onclick="selects.remove(get_id('content_images'))"> <input type="button" class="button" value="{$=ii_itake('global.lng_config.insert','lng')}" onclick="insert_img('content', get_id('content_images').value, {$=#ncttype}, 0, '{$=ii_get_lrstr($GLOBALS['nuri'], "/", "leftr")}')"></td>
</tr>
说明:
这里的preview_img和insert_img是更改后的js方法.用来重新处理图片集的新格式,实现原预览和插入功能.
其中mm_get_img_list函数是通过php来处理新的图片集格式进行输出.
替换图片集上传代码为:
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_title','lng')}</td>
<td><input type="text" id="img_title" name="img_title" size="40" value=""></td>
</tr>
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_desc','lng')}</td>
<td><input type="text" id="img_desc" name="img_desc" size="40" value=""></td>
</tr>
<tr>
<td height="25">{$=ii_itake('global.lng_config.img_url','lng')}</td>
<td><input type="text" id="img_url" name="img_url" size="30" value="" ondblclick="preview_images(this.value, event)"> <iframe src="?type=upload&upform=form&uptext=img_url&upsimg={$upsimg}" style="vertical-align: middle;" width="250" height="25" scrolling="no" marginwidth="0" marginheight="0" align="middle" name="upload" frameborder="0"></iframe></td>
</tr>
<tr>
<td height="25"></td>
<td><a onclick="img_info()" class="button">增加</a></td>
</tr>
说明:
这里的三个表单是新图片集格式的三个参数,用来组成新的图片集.
5.注意点
以上教程只作为新站或新模块使用
如已有数据,不建议使用.
前台调用的方法,其实通过一个函数来进行输出比较好.可以自行修改.
