这和之前贴的分页效果是相同的,因为加了多图调用,所以再贴一下。
模板代码中使用了font awesome 4.5.0图标。
1.页面顶部放:
- <!--{eval require './source/function/function_post.php';}-->
- <!--{eval require './config/config_global.php';}-->
- <!--{eval $prefix=$_config['db']['1']['tablepre'] }-->
- <!--{eval $pagesize = 15;}-->
- <!--{eval $amount=0;}-->
- <!--{eval $res = mysql_query("SELECT COUNT(*) as count FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid WHERE t1.displayorder >- 1 AND t3.attachment <> ''");}-->
- <!--{eval while($re=mysql_fetch_array($res)) $amount=$re['count']}-->
- <!--{eval $pagecount = $amount ? (($amount < $pagesize) ? 1 : (($amount % $pagesize) ? ((int)($amount / $pagesize) + 1) : ($amount / $pagesize))) : 0; }-->
- <!--{eval $page = !empty($_G['gp_page']) ? max(1, intval($_G['gp_page'])) : 1;}-->
- <!--{eval $page = $page > $pagecount ? 1 : $page;}-->
- <!--{eval $startlimit = ($page - 1) * $pagesize;}-->
- <!--{eval $multipage = multi($amount, $pagesize, $page, 'portal.php?', $pagecount);}-->
- <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码 列表调用:
- <link href="$_G['style'][styleimgdir]/CSS/fsgallery.css" rel="stylesheet">
- <link href="$_G['style'][styleimgdir]/css/font-awesome.min.css" rel="stylesheet">
- <script type="text/javascript" src="$_G['style'][styleimgdir]/js/fs_forse.js"></script>
- <script src="$_G['style'][styleimgdir]/js/my.js" type="text/javascript"></script>
- <h2 class="g_tit">最新发布<li id="qinghideimg" {if $_G['cookie']['qinghideimg'] > 0}onclick="hideimg(1)"{else}onclick="hideimg(-1)" class="y qinghideimg_1" {/if}><i></i>图文</li></h2>
- <ul class="ui_list cl" id="itemContainer">
- <!--{eval while($re1=mysql_fetch_array($res)) {}-->
- <!--{eval}-->
- $acount = DB::result(DB::query("SELECT count(*) FROM ".DB::table('common_tagitem')." b LEFT JOIN ".DB::table('common_tag')." bf ON bf.tagid=b.tagid WHERE b.itemid='$re1[tid]' group by b.tagid"));
- //$alist
- $taglists = array();
- if ($acount) {
- $tag = DB::query("SELECT bf.*, b.* FROM ".DB::table('common_tagitem')." b LEFT JOIN ".DB::table('common_tag')." bf ON bf.tagid=b.tagid WHERE b.itemid='$re1[tid]' group by b.tagid ORDER BY b.tagid DESC ");
- while ($tags = DB::fetch($tag)) {
- $taglists[] = $tags;
- }
- }
- <!--{/eval}-->
- <!--{eval $tbid = DB::result(DB::query("SELECT tableid FROM ".DB::table('forum_attachment')." WHERE `tid`= '$re1[tid]'"));}-->
- <!--{if $tbid}-->
- <!--{eval $picount = DB::fetch_all("SELECT aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1;");}-->
- <!--{eval $picnum = count($picount);}-->
- <!--{if $picnum < 4}-->
- <!--{eval $litpicnum = '1';}-->
- <!--{elseif $picnum > 3 && $picnum < 8}-->
- <!--{eval $litpicnum = '4';}-->
- <!--{elseif $picnum > 7}-->
- <!--{eval $litpicnum = '8';}-->
- <!--{/if}-->
- <!--{if $picnum>0}-->
- <!--{eval $covers = DB::fetch_all("SELECT attachment,aid,description FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1 LIMIT 0,$litpicnum");}-->
- <!--{/if}-->
- <li class="ui_2_ul_li cl border_b_gray">
- <!--{if $litpicnum == 1}-->
- <div class="ui_2_ul_li_imgouter ovh position_a <!--{if $_G['cookie']['qinghideimg'] > 0}-->qnone_-1<!--{else}-->qnone_1<!--{/if}-->" id="gallery_$re1[tid]">
- <!--{loop $covers $thecover}-->
- <!--{eval $imagelistkey = getforumimg($thecover[aid], 0, 225, 0); }-->
- <a id="aimg_$thecover['aid']" aid="$thecover['aid']" target="_blank" class="flt ds_inlineB cdg" href="data/attachment/forum/$thecover['attachment']" <!--{if $thecover['description']}-->title="$thecover['description']"<!--{else}-->title="$re1[subject](图$keys)"<!--{/if}-->><img src="$imagelistkey" height="auto" width="200" <!--{if $thecover['description']}-->alt="$thecover['description']" title="$thecover['description']"<!--{else}-->alt="$re1[subject](图$keys)" title="$re1[subject](图$keys)"<!--{/if}-->></a>
- <!--{/loop}-->
- </div>
- <script language="javascript">
- jQuery(document).ready(function() {
- jQuery("#gallery_$re1['tid'] img").fsgallery()
- })
- </script>
- <div class="ui_2_ul_li_con lcon">
- <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a><!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}--></h3>
- <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
- <div class="ui_2_userinfo clg cl">
- <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
- <span class="xfg">/</span>
- <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
- <span class="xfg">/</span>
- <span>$re1[dateline]</span>
- <span class="xfg">/</span>
- <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
- <span class="xfg"></span>
- <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
- <!--{if $re1['digest'] == 1}-->
- <span class="xfg">/</span>
- <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
- <!--{/if}-->
- <span class="xfg">/</span>
- <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
- <!--{loop $taglists $key $tags}-->
- <a title="$tags[tagname]"
- href="misc.php?mod=tag&id=$tags[tagid]"
- target="_blank">$tags[tagname]</a>
- <!--{/loop}-->
- </em>
- </div>
- </div>
- <!--{else}-->
- <div class="ui_2_ul_li_con">
- <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a><!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}--></h3>
- <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
- <div class="ui_2_ul_li_imgouter ovh position_a <!--{if $_G['cookie']['qinghideimg'] > 0}-->qnone_-1<!--{else}-->qnone_1<!--{/if}-->" id="gallery_$re1[tid]">
- <!--{loop $covers $key $thecover}-->
- <!--{eval $keys = $key+1;}-->
- <!--{eval $imagelistkey = getforumimg($thecover[aid], 0, 225, 0); }-->
- <a id="aimg_$thecover['aid']" aid="$thecover['aid']" target="_blank" class="flt ds_inlineB cdg" href="data/attachment/forum/$thecover['attachment']" title="<!--{if $thecover['description']}-->$thecover['description']<!--{else}-->$re1[subject](图$keys)<!--{/if}-->"><img src="$imagelistkey" height="auto" width="200" <!--{if $thecover['description']}-->alt="$thecover['description']" title="$thecover['description']"<!--{else}-->alt="$re1[subject](图$keys)" title="$re1[subject](图$keys)"<!--{/if}-->></a>
- <!--{/loop}-->
- </div>
- <script language="javascript">
- jQuery(document).ready(function() {
- jQuery("#gallery_$re1['tid'] img").fsgallery()
- })
- </script>
- <div class="ui_2_userinfo clg cl">
- <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
- <span class="xfg">/</span>
- <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
- <span class="xfg">/</span>
- <span>$re1[dateline]</span>
- <span class="xfg">/</span>
- <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
- <span class="xfg"></span>
- <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
- <!--{if $re1['digest'] == 1}-->
- <span class="xfg">/</span>
- <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
- <!--{/if}-->
- <span class="xfg">/</span>
- <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
- <!--{loop $taglists $key $tags}-->
- <a title="$tags[tagname]" href="misc.php?mod=tag&id=$tags[tagid]" target="_blank">$tags[tagname]</a>
- <!--{/loop}-->
- </em>
- </div>
- </div>
- <!--{/if}-->
- </li>
- <!--{else}-->
- <li class="ui_2_ul_li cl border_b_gray">
- <div class="ui_2_ul_li_con lcon">
- <h3 class="clr"><a target="_blank" href="forum.php?mod=viewthread&tid=$re1[tid]" title="$re1[subject]" class="ui_colorG">$re1[subject]</a></h3>
- <p class="cdg ovh"><!--{eval echo messagecutstr($re1['message'],150)}-->...</p>
- <div class="ui_2_userinfo clg cl">
- <span><a href="forum.php?mod=forumdisplay&fid=$re1[fid]" class="article-info-cat z">$re1[name]</a></span>
- <span class="xfg">/</span>
- <span class="authors"><a href="home.php?mod=space&uid=$re1[authorid]">$re1[author]</a></span>
- <span class="xfg">/</span>
- <span>$re1[dateline]</span>
- <span class="xfg">/</span>
- <span class="views" title="已浏览$re1[views]次">$re1[views]</span>
- <span class="xfg"></span>
- <span class="replies" title="已有$re1[replies]条评论">$re1[replies]</span>
- <!--{if $re1['digest'] == 1}-->
- <span class="xfg">/</span>
- <span><i class="fa fa-diamond fa-fw" title="精华"></i>精华</span>
- <!--{/if}-->
- <span class="xfg">/</span>
- <em class="ptg xc_tag"><i class="fa fa-tag fa-fw"></i>
- <!--{loop $taglists $key $tags}-->
- <a title="$tags[tagname]" href="misc.php?mod=tag&id=$tags[tagid]" target="_blank">$tags[tagname]</a>
- <!--{/loop}-->
- </em>
- </div>
- </div>
- </li>
- <!--{/if}-->
- <!--{eval }}-->
- </ul>
- <div class="cl" style="background: #FFFFFF;">
- <div id="holder" class="holder">$multipage</div>
- </div>
复制代码 以上这两段就够了。
---------------------------------------------------------------------------------------------------
解释下这个列表里的多图,写有点乱,我写完再看都蒙圈:
- <!--{eval $tbid = DB::result(DB::query("SELECT tableid FROM ".DB::table('forum_attachment')." WHERE `tid`= '$re1[tid]'"));}-->
复制代码 是用帖子tid获取对应的表tableid。
接下来开始判断:
即如果存在tid,开始调用列表。原本没写这个判断,导致出错,获取不到附件分表id,琢磨好久才想到,没有附件的帖子就没有tableid,后面的查询找不到表。
接下来要先获取下每个帖子的图片附件数:- <!--{eval $picount = DB::fetch_all("SELECT aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1;");}-->
- <!--{eval $picnum = count($picount);}-->
复制代码 得到变量$picnum,直接使用就可以显示图片数,这里拿它做判断:- <!--{if $picnum < 4}-->
- <!--{eval $litpicnum = '1';}-->
- <!--{elseif $picnum > 3 && $picnum < 8}-->
- <!--{eval $litpicnum = '4';}-->
- <!--{elseif $picnum > 7}-->
- <!--{eval $litpicnum = '8';}-->
- <!--{/if}-->
复制代码 大于等于不会写,只好退一步用大于和小于来判断图片数:
如果小于4张,即只有1、2、3张,变量$litpicnum=1。
如果图片大于3张且小于8张,即4、5、6、7张,变量$litpicnum=4。
如果图片大于7张,即8张及8张以上,变量$litpicnum=8。到此为止不再判断,即最多让它显示8张。
这个变量$litpicnum下面要用,作为每帖调用的图片数,即LIMIT 0,$litpicnum
# 说下为何做这个图片数量判断,因为我的测试列表一排最多显示4张图,当图片数量不能铺满一行时,样式不好看。这个判断不能有逻辑错误,否则数量正好赶上空挡就出错。
下面是查询分表的的图片附件地址和aid,条数使用上面经过判断的变量$litpicnum
- <!--{eval $covers = DB::fetch_all("SELECT attachment,aid FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= '$re1[tid]' AND `isimage`=1 LIMIT 0,$litpicnum;");}-->
复制代码 判断下,如果只有一张图或多张图,示例:
- <!--{if $litpicnum == 1}-->单图列表html<!--{else}-->多图列表html<!--{/if}-->
复制代码 接下来是无图帖子,(对应开始的<!--{if $tbid}-->)
- <!--{else}-->无图帖子列表<!--{/if}-->
复制代码 哦,对了还有,帖子标题后面我都加了段代码:
- <!--{if !$picnum == 0}--><small><i class="fa fa-image fa-fw"></i><!--{$picnum}--></small><!--{/if}-->
复制代码 如果有图,就显示数量。
总结起来就是两层列表,3层判断:
外有帖子列表,内有帖子图片列表
关于图片列表获得流程:先判断帖子是否有图,有图再获取总张数,根据条件得出想要的数量,再拿这个数量调用图片,获得图片再判断是单张还是多张,单张什么样式、多张什么样式。
==========================更新记录=================================
更新 2016-09-12 21:41
修复图太大加载慢的问题,已加了个生成缩略图代码
更新 2016-09-13 19:44
解决了判断图片数量来控制样式的问题。
更新 2016-09-13 22:31
增加大图预览效果(可惜登录后会发生jq导致弹出失效)。
更新 2016-09-16 08:59
大图预览效果冲突已解决(与插件的jq冲突,关闭了一个群聊插件后正常)。
代码已经更新,需要增加一个css和一个js文件(见附件)。
注意代码里引用路径,我的是扩展图片目录下css和js目录。
更新 2016-09-16 11:58
重帖代码,增加:
1.<!--{eval $res = mysql_query加digest字段查询,以显示精华帖标志。
2.图片列表a标签title,优先图片描述,无描述显示标题(序号)。
3.图片alt和title,优先图片描述,无描述显示标题(序号)。
更新 2016-09-16 15:47
1.增加tag调用。
2.增加“图文”按钮,可用来控制显示或隐藏图片容器(js文件见附件)。
更新 2016-12-22 14:03
增加ajax点击加载更多。
方法:复制一份数据查询和调用部分代码,做成模板,使用自定义单页面可访问的形式。
使用jq代码:
- <div id="loading"><p>加载内容(接着列表放)</p></div>
- <script>
- jQuery(function () {
- var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
- jQuery('#loading').click(function () {
- p += 1; //下一页
- jQuery.ajax({
- url: '自定义php单页文件',
- data: { page: p },
- cache: false,
- dataType: 'html',
- beforeSend:function(){jQuery("#loading").html("<img src='$_G['style'][styleimgdir]/images/loading.gif' />");},
- error: function() {jQuery("#loading").text("请求出错,请重试")},
- success: function (html) {
- jQuery("#loading").html("<p>加载更多</p>");
- jQuery('#loading').before(html);
- } });
- return false;
- });
- });
- </script>
复制代码
更新 2017-10-28 18:56
修复了当没有附件的时候limit变量获取不到数值导致页面出现错误提示的问题。
调用头像和支持人数只需要很简单的改动。多说点,希望能够让你知道为什么这么做。
在最开始的代码:
- <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码 这段代码里,共调用了4个表,分表是表t1——pre_forum_thread,t2——pre_forum_forum,t3——pre_forum_threadimage,t4——pre_forum_post,查数据字典可知,帖子支持人数字段是表pre_forum_thread里的recommend_add,用t1代表,那么在SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies这段里加上个逗号t1.recommend_add即可。
完整即:- <!--{eval $res = mysql_query("SELECT t1.tid,t1.digest,t1.fid,t2.`name`,t1.author,t1.authorid,t1.`subject`,t4.message,t1.views,t1.replies,t1.recommend_add from_unixtime(t1.dateline) as dateline,t3.attachment FROM ".$prefix."forum_thread t1 LEFT OUTER JOIN ".$prefix."forum_forum t2 ON t1.fid = t2.fid LEFT OUTER JOIN ".$prefix."forum_threadimage t3 ON t1.tid = t3.tid LEFT OUTER JOIN ".$prefix."forum_post t4 ON t1.tid = t4.tid WHERE t1.displayorder >- 1<> '' AND t4.`first` > 0 ORDER BY t1.dateline DESC LIMIT $startlimit, $pagesize");}-->
复制代码 以上啰嗦的是帖子支持人数。使用$re1[recommend_add]调用。
至于头像,获取方式灰常简单,在任意页面,只要你能获取到会员的uid,使用
- <img src="uc_server/avatar.php?uid=会员UID&size=midlle"/>
复制代码
这样的形式就能获取这个uid的头像,这里已经有了t1.authorid,那么用
- <img src="uc_server/avatar.php?uid={$re1[authorid]}&size=midlle"/>
复制代码
可获取这个列表的头像,size=midlle是中等尺寸,size=small是小,size=big是大。最终显示尺寸最好用css来设定。
这是方法之一,这帖太长了,另开一帖写discuz 调用帖子列表带分页+多图显示(之二)。
多图的放大效果css js.zip
(4.06 KB, 下载次数: 403)
图文按钮js.zip
(613 Bytes, 下载次数: 419)
相关阅读:
discuz 门户文章列表多图显示
|