浏览正文的时候,点击图片可以直接跳到下一个,很多网站都有这样的功能,论坛上也有很多人需要此效果但都一直没人做出来,现应广大人民群众的要求,特地将教程做出。
第一步:打开内容页模板,确定正文容器的ID,以SF3.1默认文章模型模板为例,<div class="c_content_overflow" id="fontzoom">的ID即为fontzoom。
第二步:确认内容页模板HEAD是否引用了JQ库,否则插入:<script language="javascript" type="text/javascript" src="{PE.SiteConfig.ApplicationPath/}JS/jquery.pack.js"></script>
第三步:找到正文分页标签,以默认文章模型模板为例,{PE.Page id="内容分页" datasource="contentpage" span="span"/}为“内容分页”标签,修改该分页标签
第四步:在标签模板最后插入以下脚本
<script type="text/javascript"> jQuery().ready(function(){ var rep = 0; jQuery("#fontzoom img").each(function(){ var _width = jQuery(this).attr('width'); if(_width > 300 && !rep){ jQuery(this).wrap('<a href="'+ {$nexturl/} +'"></a>').attr('alt', '点击图片浏览下一页'); rep += 1; } }); }); </script>
其中jQuery("#fontzoom img").each(function(){ 的fontzoom替换为第一步所找到的ID _width > 300的300为添加链接图片的最小宽度,小于此宽度则不加链接 如果您懂JQ,选择器也可以使用其他方法
第五步:保存,该生成的生成,该更新缓存的更新缓存。
第六步:让我们一起高呼:伟大的受万人尊敬的小娃老师万岁! |