18038435860

JTBC_PHP解析函数格式化图片集,点图片集的小图看大图案例详细步骤

时间:2018-10-26 来源:东莞网站建设 点击:397

怎么调用 creplace 解析函数?
把要解析的模板包进去就可以啦,节点放在tpl_config里,在模板里用ii_ireplace调用节点应该就可以了。

1、网上下载个JS相册代码
http://www.lanrentuku.com/js/xiangce-559.html
把JS特效里的JS文件和css文件以及图片素材文件arrow_left.gif、arrow_right.gif放到网站根目录下的images文件夹里面

2、产品内容页模版加上
<link rel="stylesheet" href="{$=ii_get_actual_route('images')}/image-slideshow-5.css" type="text/css">
<script type="text/javascript" src="{$=ii_get_actual_route('images')}/image-slideshow-5.js">
</script>

3、产品图片列表页图片缩略图地址
<img src="{$=ii_get_actual_route('thumbnail/images')}/214-265-1-1/{$=#ngenre}/{$=ii_get_lrstr("{$content_images_list}", "|", "left")}" onerror="this.src = '{$=ii_get_actual_route('thumbnail')}?p={$=base64_encode('image=' . $GLOBALS['ngenre'] . '/' . ii_get_lrstr("{$content_images_list}", "|", "left") . ';width=214;height=265;scale=1;watermark=1')}';" height="265" width="214"/>

4、格式化图片集 common/incfiles/common.inc.php加上
function iven_get_images_list($iven)
{
if (!(ii_isnull($iven)))
{
$i_images_list = ii_itake('global.tpl_config.iven_images_list', 'tpl');
$tarys = explode('|', $iven);
$tmpstrs = '';
foreach ($tarys as $key => $val)
{
$tstrs = $i_images_list;
$tstrs = str_replace('{$value}', $val, $tstrs);
$tmpstrs .= $tstrs;
$tmpstrs = ii_creplace($tmpstrs);
}
return $tmpstrs;
}
}
function iven_get_images_list2($iven2)
{
if (!(ii_isnull($iven2)))
{
$i_images_list = ii_itake('global.tpl_config.iven_images_list2', 'tpl');
$tarys = explode('|', $iven2);
$tmpstrs = '';
foreach ($tarys as $key => $val)
{
$tstrs = $i_images_list;
$tstrs = str_replace('{$value}', $val, $tstrs);
$tmpstrs .= $tstrs;
$tmpstrs = ii_creplace($tmpstrs);
}
return $tmpstrs;
}
}

5、原特效的模版里小图列表如下
<div class="strip_of_thumbnails">
<div><a id="firstThumbnailLink" href="#" onclick="showPreview('images/image1_big.jpg',this);return false;"><img src="images/image1.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image2_big.jpg',this);return false;"><img src="images/image2.jpg"></a></div>
<div><a href="#" onclick="showPreview('images/image3_big.jpg',this);return false;"><img src="images/image3.jpg"></a></div>
</div>

6、把模版里的小图列表包进函数里面,然后才可以解析。包好的小图函数如下
common/template/tpl_config.jtbc加上以下代码:
<div><a id="firstThumbnailLink" href="#" onclick="showPreview('{$value}',this);return false;"><img src="{$=ii_get_actual_route('thumbnail/images')}/140-105-1-1/{$=#ngenre}/{$value}" onerror="this.src = '{$=ii_get_actual_route('thumbnail')}?p={$=base64_encode('image=' . $GLOBALS['ngenre'] . '/' . ii_get_lrstr("{$value}") . ';width=140;height=105;scale=1;watermark=1')}';" /></a></div>

注:{$value}是大图地址

7、现在要把大图地址写出来,这个特效始终是读取第一张大图地址,看页面源代码就知道,所以我们要截取图片集第一张大图地址,common/template/tpl_config.jtbc加上以下代码:
<item>

<name><![CDATA[iven_images_list2]]></name>

<tpl_default><![CDATA[<img src="{$=ii_get_lrstr('{$content_images_list}', '|', 'left')}">]]></tpl_default>

</item>

8、内容页模板大图地址也写上<img src="{$=ii_get_lrstr('{$content_images_list}', '|', 'left')}">

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
如果js特效是读取所有大图地址,不是始终读取第一张大图地址,大图地址应该这样写:
common/template/tpl_config.jtbc加上以下代码:

<item>

<name><![CDATA[iven_images_list2]]></name>

<tpl_default><![CDATA[<img style="z-index: 101; opacity: 1;" src="{$value}"/>]]></tpl_default>

</item>

内容页模版大图地址 {$=iven_get_images_list2("{$content_images_list}")}