【窝居郑州】超漂亮霸气的带遮罩图集列表DIY免费分享 图片显示更给力！

不少网友一直在问这个效果，今天早晨凌晨编辑到5点贴子后被防水墙过滤了！提交给管理，竟然没有人管，在这儿再发一次原文，希望对网友有所帮助！如果再被过滤，请移步至http://www.wj371.com/thread-28437-1-1.html  进行查看本贴！以下是今天早上5点贴子原文，我想这应该没有问题吧，咋能被过滤了呢！

　　现在已近凌晨四点半了，加班加点给大家分享点资料，希望对新手有所帮助！
　　高手勿喷，全当路过！根据以前的经验，对个别别有用心的人我会敬而远之，就不费您老浪费时间打字无中生有了！

老规矩：先附效果图！
演示地址：http://www.wj371.com/



超霸气漂亮的带遮罩图集列表实现步骤说明：

step 1:模板的建立

　　管理员进入论坛后台，切换至“门户”选项卡，选择左侧对应菜单下的“模块模板”进入到模块模板管理页，添加模板，模板名称自行定义，在此以“窝居郑州遮罩图片列表”为模板名为例(DIY的时候要用到)，模板代码如下：

1. [loop]
   
2. <a title="{title}" href="{url}" target="_blank"><img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}" /><span>{title}</span></a>
   
3. [/loop]

复制代码

　　保存模板，至此，模板建立成功！


step 2:前台所需JS,CSS,图片等素材的部署

　　将素材中的"jquery.min.js”及"jfade.js"两个JS文件复制到您的现用模板中的"images"文件夹中;
　　将素材中的"recommend_icon.png”及"picMap_title_img.png"两个图片也复制到您的现用模板中的"images"文件夹中;
　　将素材中"piclist.css"中的内容复制并追加到您的模板中的"extend_common.css"最后面；

　　至此，素材内容部署完毕！

　　注：对于复制到具体路径，和您的模板路径相关，调用时保证js路径及css的图片的路径引用正确即可，此案中CSS的图片路径我用的绝对路径，网友可根据实际情况进行修改！

素材请留下您的邮箱，我会逐一发于您，别拿这说事，熬夜写原创贴子很辛苦，回复一下也是对劳动者的认可！

step ３:前台代码部署
　　
　　１：js文件部署：

　　打开您当前的模板中的"discuz.htm",在"<!--{subtemplate common/header}-->"的后面添加JS的调用代码：

1. <script type="text/javascript" src="$_G['style']['styleimgdir']/jquery.min.js?{VERHASH}"></script>
   
2. <script type="text/javascript" src="$_G['style']['styleimgdir']/jquery.jfade.js?{VERHASH}"></script>
   
3. <script language="javascript">
   
4. jQuery.noConflict();
   
5. </script>

复制代码

　　注：对于已将JUERY引用的网友不要再次引入jquery.js文件了

　　2：DIY代码的嵌入：

　　在您需要放置此遮罩图集列表的地方添加如下代码：

1. <div class="wj371PicMap">
   
2. <ul class="picMap">
   
3. <li class="title"><img alt="绝对美眉" src="$_G['style']['styleimgdir']/picMap_title_img.png" width=158 height=79></li>
   
4. <li class="pic1"><!--[diy=picMap_1]--><div id="picMap_1" class="area"></div><!--[/diy]--></li>
   
5. <li class="pic2"><!--[diy=picMap_2]--><div id="picMap_2" class="area"></div><!--[/diy]--></li>
   
6. <li class="pic3"><i></i><!--[diy=picMap_3]--><div id="picMap_3" class="area"></div><!--[/diy]--></li>
   
7. <li class="pic4"><!--[diy=picMap_4]--><div id="picMap_4" class="area"></div><!--[/diy]--></li>
   
8. <li class="pic5"><!--[diy=picMap_5]--><div id="picMap_5" class="area"></div><!--[/diy]--></li>
   
9. <li class="pic6"><!--[diy=picMap_6]--><div id="picMap_6" class="area"></div><!--[/diy]--></li>
   
10. <li class="pic7"><!--[diy=picMap_7]--><div id="picMap_7" class="area"></div><!--[/diy]--></li>
    
11. <li class="pic8"><!--[diy=picMap_8]--><div id="picMap_8" class="area"></div><!--[/diy]--></li>
    
12. </ul>
    
13. </div>

复制代码

　　说明：本例中的图片大小不一，为了保证调用时图片正常不变形，同时限于个DIY操作只能定义一种缩略图的方式，所以在这里定义了8个DIY块，目前我没有找到更好的解决方案，如果哪位大侠有好的办法，欢迎进行补充说明！

step 4:前台开始DIY操作

　　对每个DIY块都要拖进一个100%的框架，并将框架标题设为空值；
　　对每个框架都拖进一个贴子模块，选择调用图片的板块，选择刚才第一步在后台建立的模板“窝居郑州遮罩图片列表”，并设定必须含图片附件贴子，按发贴时间倒序排列，标题长度除了图片３外其它的都设置为8，调用条数填写一条，对于标题长度、起止贴子位置、图片缩略图尺寸请按下面所示的说明进行设置，确定完成！

附：DIY参数中的标题长度、起止贴子位置、图片缩略图尺寸设置

DIY内容	标题长度	起止贴子位置	图片缩略图尺寸
pic1	4	0	width="132" height="180"
pic2	4	1	width="132" height="211"
pic3	30	2	width="318" height="439"
pic4	4	3	width="158" height="146"
pic5	4	4	width="158" height="165"
pic6	4	5	width="200 "height="392"
pic7	4	6	width="157" height="166"
pic8	4	7	width="157" height="225"

注：为保证不调用重复，请对起止贴子位置严格设置，图片对应位置如下图：


　　
至此，带遮罩图集列表已成完成，肿么样？您成功了吗？太晚了，头脑有点晕了！有漏解释的地方可以提出来我再补充！如有不明白的地方，请尽量多读几次贴子，实在不行请跟贴说明！我尽量抽时间进行解答！

小贴士：

　　1：为了使列表更美观大气，DIY后尽量对每个图片进行推送，这样即保证图片视觉效果更好，同时也能主推特定的图片信息！

　　2：搜索“窝居郑州”贴子，还有惊喜等着您！哈哈~~~

这么漂亮的还真是第一次看到

好贴　 收藏之　 楼主共享出来　 　 ｊｓ效果不错

嗯 不错 学习了。。。

5gss.cn 发表于 2012-11-14 18:01
好贴　 收藏之　 楼主共享出来　 　 ｊｓ效果不错

留下邮箱，发于您，为了避免伸手党，共享的方式麻烦些，还望理解！

xiaoya35 发表于 2012-11-14 18:03
留下邮箱，发于您，为了避免伸手党，共享的方式麻烦些，还望理解！

　 感谢感谢　2315959395@qq.com

好的　 收到。　 你可以在高峰期来顶顶，现在貌似吃饭去了都　

{:soso_e163:} 很漂亮哦~

{:soso_e163:}赞一个。

求素材 896606081@qq.com