WordPress免插件实现FancyBox效果

2011-02-07

582

今天把fancybox-for-wordpress这个插件集成到wordpress里面来了，感觉效果不错，比lightbox好些。下面就说说详细的过程吧。

如果你嫌麻烦可以到wordpress官网下载fancybox-for-wordpress这个插件，不过是英文的，没有中文语言包。
下面就说如何集成到wordpress里面：

第一步：下载经过压缩的js代码，原来是15kb的大小，经过压缩11.4kb。并放在当前主题js目录下（你也可以自己修改），备用地址：MEGA。

第二步：下载CSS所需调用的图片，并将photo目录放在当前主题images目录里面，备用地址：MEGA。

第三步：将以下代码放在头部header.php ，即为加载JS代码。

jQuery(document).ready(function($) {

$("#post .onedouimg").fancybox({

'overlayOpacity': 0.3, //背景透明度

'transitionIn' : 'elastic', //放大效果

'transitionOut' : 'elastic', //缩小效果

'padding' : 3, //图片边框（默认单位px）

});

</script>

第四步：在当前主题样式表中加入以下css代码。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

/* * FancyBox - jQuery Plugin Revise by onedou*/

#fancybox-loading {

position: fixed;

top: 50%;

left: 50%;

width: 40px;

height: 40px;

margin-top: -20px;

margin-left: -20px;

cursor: pointer;

overflow: hidden;

z-index: 1104;

display: none;

}

#fancybox-loading div {

position: absolute;

top: 0;

left: 0;

width: 40px;

height: 480px;

}

#fancybox-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 1100;

display: none;

}

#fancybox-tmp {

padding: 0;

margin: 0;

border: 0;

overflow: auto;

display: none;

}

#fancybox-wrap {

position: absolute;

top: 0;

left: 0;

padding: 20px;

z-index: 1101;

outline: none;

display: none;

}

#fancybox-outer {

position: relative;

width: 100%;

height: 100%;

background: #fff;

}

#fancybox-content {

width: 0;

height: 0;

padding: 0;

outline: none;

position: relative;

overflow: hidden;

z-index: 1102;

border: 0px solid #fff;

}

#fancybox-hide-sel-frame {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: transparent;

z-index: 1101;

}

#fancybox-close {

position: absolute;

top: -15px;

right: -15px;

width: 30px;

height: 30px;

background: transparent url('images/photo/fancybox.png') -40px 0px;

cursor: pointer;

z-index: 1103;

display: none;

}

#fancybox-error {

color: #444;

font: normal 12px/20px Arial;

padding: 14px;

margin: 0;

}

#fancybox-img {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

border: none;

outline: none;

line-height: 0;

vertical-align: top;

}

#fancybox-frame {

width: 100%;

height: 100%;

border: none;

display: block;

}

#fancybox-left, #fancybox-right {

position: absolute;

bottom: 0px;

height: 100%;

width: 35%;

cursor: pointer;

outline: none;

background: transparent url('images/photo/blank.gif');

z-index: 1102;

display: none;

}

#fancybox-left {

left: 0px;

}

#fancybox-right {

right: 0px;

}

#fancybox-left-ico, #fancybox-right-ico {

position: absolute;

top: 50%;

left: -9999px;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

z-index: 1102;

display: block;

}

#fancybox-left-ico {

background-position: -40px -30px;

}

#fancybox-right-ico {

background-position: -40px -60px;

}

#fancybox-left:hover, #fancybox-right:hover {

visibility: visible; /* IE6 */

}

#fancybox-left:hover span {

left: 20px;

}

#fancybox-right:hover span {

left: auto;

right: 20px;

}

.fancybox-bg {

position: absolute;

padding: 0;

margin: 0;

border: 0;

width: 20px;

height: 20px;

z-index: 1001;

}

#fancybox-bg-n {

top: -20px;

left: 0;

width: 100%;

}

#fancybox-bg-ne {

top: -20px;

right: -20px;

background-position: -40px -162px;

}

#fancybox-bg-e {

top: 0;

right: -20px;

height: 100%;

background-position: -20px 0px;

}

#fancybox-bg-se {

bottom: -20px;

right: -20px;

background-position: -40px -182px;

}

#fancybox-bg-s {

bottom: -20px;

left: 0;

width: 100%;

background-position: 0px -20px;

}

#fancybox-bg-sw {

bottom: -20px;

left: -20px;

background-position: -40px -142px;

}

#fancybox-bg-w {

top: 0;

left: -20px;

height: 100%;

}

#fancybox-bg-nw {

top: -20px;

left: -20px;

background-position: -40px -122px;

}

#fancybox-title {

font-family: Helvetica;

font-size: 12px;

z-index: 1102;

}

.fancybox-title-inside {

padding-bottom: 10px;

text-align: center;

color: #333;

background: #fff;

position: relative;

}

.fancybox-title-outside {

padding-top: 10px;

color: #fff;

}

.fancybox-title-over {

position: absolute;

bottom: 0;

left: 0;

color: #FFF;

text-align: left;

}

#fancybox-title-over {

padding: 10px;

display: block;

}

.fancybox-title-float {

position: absolute;

left: 0;

bottom: -20px;

height: 32px;

}

#fancybox-title-float-wrap {

border: none;

border-collapse: collapse;

width: auto;

}

#fancybox-title-float-wrap td {

border: none;

white-space: nowrap;

}

#fancybox-title-float-left {

padding: 0 0 0 15px;

background: url('images/photo/fancybox.png') -40px -90px no-repeat;

}

#fancybox-title-float-main {

color: #FFF;

line-height: 29px;

font-weight: bold;

padding: 0 0 3px 0;

background: url('images/photo/fancybox-x.png') 0px -40px;

}

#fancybox-title-float-right {

padding: 0 0 0 15px;

background: url('images/photo/fancybox.png') -55px -90px no-repeat;

}

/* IE6 */

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_nav_left.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_nav_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }

.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_left.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_main.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {

height: expression(this.parentNode.clientHeight + "px");

}

#fancybox-loading.fancybox-ie6 {

position: absolute; margin-top: 0;

top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');

}

#fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_loading.png', sizingMethod='scale'); }

/* IE6, IE7, IE8 */

.fancybox-ie .fancybox-bg { background: transparent !important; }

.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_n.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_ne.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_e.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_se.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_s.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_sw.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_w.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/photo/fancy_shadow_nw.png', sizingMethod='scale'); }

第五步：打开当前主题添加以下函数（最后?>之前，否则你懂得）。

/* 给指定文件增加class属性 */

function photo_onedou ($content)

{ global $post;

$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";

$replacement = '<a$1href=$2$3.$4$5 class="onedouimg" $6>$7</a>';

$content = preg_replace($pattern, $replacement, $content);

return $content;

}

add_filter('the_content', 'photo_onedou');

从上可知，支持bmp、gif、jpeg、png和swf，也就是支持flash。轻松搞定，看看效果吧：

附官网网址：http://fancybox.net/

PS:使用fancybox由于js的原因会造成IE假死。故把prettyphoto插件集成了。

26 条留言

8
小艾博客 2015-05-22 11:28

你的着图片没有效果呀？你把那个效果取消了？

回复
- m
  Ankms 2015-05-24 08:06
  
  @小艾博客
  嗯，早就取消了。 ➡
  
  回复
c
CY's BLOG 2014-02-21 20:59

来过。
看过~

回复
e
bedspreads 2011-10-07 22:15

互相支持下哈

回复
a
绿子弹 2011-05-12 19:45

厉害！你的主题做的蛮不错的

回复
- m
  Ankms 2011-05-12 20:27
  
  还行吧，仍然在改进中。 ❗
  
  回复
h
爱佳软 2011-05-09 11:07

请问你这种方法支持相册里面的图片吗？

回复
- m
  Ankms 2011-05-09 20:30
  
  还没有试过相册，应该是支持的，都是替换原地址，再加个属性。
  
  回复
  - h
    爱佳软 2011-05-11 20:37
    
    我的博客也实现了免插件Fancybox，不过不是你这种方法。是把Fancybox这个wordpress插件集成到了主题里，把几个js合并为一个，然后指定文章调用（需要fancybox的文章调用js），这样就不会影响其他页面的打开速度了。演示地址：
    http://www.92app.com/actual-wysiwyg-editor-for-wordpress.html
    😯
    
    回复
    - h
      爱佳软 2011-05-11 20:38
      
      ？咦？“链接自动检测+本地化转换”？好神奇 🙄
      
      回复
    - m
      Ankms 2011-05-11 20:44
      
      fancybox会使IE假死，我是只有在single页面调用。
      突然发现那个网址怎么那么长，bug，找找解决方法。
      
      回复
      - h
        爱佳软 2011-05-11 23:07
        
        是啊，好长，会把小孩子吓到的 💡
b
baby walker 2011-03-04 10:39

这个是什么动画人物啊

回复
- m
  Ankms 2011-03-04 22:55
  
  汗，看来你没玩过dota，如果有机会了玩玩，很经典的一款游戏。图中英雄角色的叫做冰女。
  
  回复
h
期货配资 2011-03-01 13:14

谢谢博主的分享，这插好吗

回复
- m
  Ankms 2011-03-02 11:04
  
  可以试试，就是实现图片特效的插件，你也可以试试其他的。不过你的评论被拉黑了。。 😕
  
  回复
p
电脑专家博客 2011-02-14 06:55

不错~~~回访了 😈

回复
- m
  Ankms 2011-02-14 07:33
  
  暂时没时间？还需要修改一大堆，又发现了几个bug。 😥
  
  回复
  - p
    电脑专家博客 2011-02-14 07:36
    
    慢慢来等你的完整版 😎
    
    回复
    - m
      Ankms 2011-02-14 19:25
      
      IE最头疼了。服了它，永远那么有个性，N多不支持。。 🙁
      
      回复
      - p
        电脑专家博客 2011-02-14 19:27
        
        真佩服你的敬业精神！我比较懒弄这些太麻烦 😛 加油
      - m
        Ankms 2011-02-14 19:32
        
        折腾不动了，老了， 😈 ，这个主题完善之后再也不会弄其他主题了。不过为别人仿还是可以的。 😮
p
饭小烦 2011-02-11 18:33

这个主题真不错

回复
- m
  Ankms 2011-02-11 21:10
  
  仿的，感觉还可以。源程序是国外的论坛程序。。
  
  回复
y
ylsnuha 2011-02-08 18:20

这个主题还蛮不错的

回复
- m
  Ankms 2011-02-11 06:16
  
  自己仿的，目前IE下还存在一点问题。。 ❓
  
  回复

相关文章查看更多文章

洋垃圾无线AP Ruckus R710折腾记

关于unRAID系统下CPU负载信息不显示的问题

windows 10下注册表快速导入小鹤双拼方案

VBA实例:Excel增加正则表达式函数

女排夺冠奖励自己-DELL OptiPlex 7040 SFF

26 条留言

留言 取消

留言取消