发布于 由影子

(PHP)JTBC1.0图片集功能增强教程

教程下载地址:

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];
//alert(img_arr);
  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">");
      //editor_insert(strid, "<img src="" + strbase + "/" + img_url + "" 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)">&nbsp;<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)">&nbsp;<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.注意点

以上教程只作为新站或新模块使用

如已有数据,不建议使用.

前台调用的方法,其实通过一个函数来进行输出比较好.可以自行修改.