一地纸

 找回密码
 立即注册

把DZ帖内所有图片做成轮播幻灯(默认是一张张的)

[复制链接]
7
流年 发表于 2018-4-2 17:42:44

版主 |主题 |帖子 |积分 422

类似于把帖子内容页做成大多资源下载站内容页面都有的那种幻灯样式,而非默认的一张张平铺开。
效果图:
QQ截图20180402173631.png
幻灯部分已经写好了,右侧附件下载部分正在写,回头写好了再贴上来。
完整代码如下:作用于DZ内容页模板viewthread.htm
  1. <style>
  2. .fm .slideshow{padding:2px;border:1px solid #ccc}
  3. .fm .slideshow img{width:274px;height:280px}
  4. .fm .slidebar{width:280px;height:85px;margin-top:5px;display:inline-flex;overflow:auto}
  5. .fm .slidebar img{width:60px;height:60px;opacity:.6;border:1px solid #ccc;padding:2px;margin-right:5px}
  6. .fm .slidebar .on{opacity:10;border:1px solid #38f;padding:2px}
  7. </style>
  8.        
  9. <div class="fm">
  10.         <div class="slidebox"><!--幻灯片开始-->
  11.         <div class="slideshow">
  12.                         <!--{eval $tbid = DB::result(DB::query("SELECT tableid FROM ".DB::table('forum_attachment')." WHERE `tid`= $_G[tid]"));}-->
  13.                         <!--{if $tbid}-->
  14.                         <!--{eval $cover = DB::fetch_all("SELECT attachment FROM ".DB::table('forum_attachment_'.$tbid.'')." WHERE `tid`= $_G[tid] AND `isimage`=1;");}-->
  15.                         <!--{/if}-->
  16.                         <!--{loop $cover $thecover}-->
  17.                         <!--{if $thecover['attachment']}-->
  18.                         <a href="javascript:;"><img src="/data/attachment/forum/$thecover['attachment']" onclick="zoom(this, '/data/attachment/forum/$thecover['attachment']')" alt="<!--{if $thecover['description']}-->$thecover['description']<!--{else}--><!--{$_G[forum_thread][subject]}--><!--{/if}-->"/></a>
  19.                         <!--{/loop}-->
  20.                         <!--{else}-->
  21.                         <img src="$_G['style'][styleimgdir]/nopic.jpg" alt="暂无图片附件"/>
  22.                         <!--{/if}-->
  23.         </div>
  24.         <!--图片展示-->
  25.         <div class="slidebar">
  26.                         <!--{loop $cover $thecover}-->
  27.                         <!--{if $thecover['attachment']}-->
  28.                         <img src="/data/attachment/forum/$thecover['attachment']" alt="<!--{if $thecover['description']}-->$thecover['description']<!--{else}--><!--{$_G[forum_thread][subject]}--><!--{/if}-->"/>
  29.                         <!--{/loop}-->
  30.                         <!--{else}-->
  31.                         <img src="$_G['style'][styleimgdir]/nopic.jpg" alt="暂无图片附件"/>
  32.                         <!--{/if}-->
  33.         </div><!--幻灯片控制展示-->
  34.         </div><!--幻灯片结束-->

  35.         <script type="text/javascript">
  36.         runslideshow();
  37.         </script>
  38. </div>
复制代码


其中的图片附件数据是直接从数据库获取的,结合内置的幻灯效果即可实现需求了。

DZ内置的幻灯片特效代码
https://www.1-dz.com/thread-18973-1-1.html
(出处: 一地纸)


QQ|小黑屋|一地纸 ( 闽ICP备09072999号 )

GMT+8, 2018-4-21 12:05 , Processed in 0.134521 second(s), 27 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表