使用jquery和thickbox可以轻松地显示经典的照片

虽然网络主要由文本组成,图片使网络有趣。图片不仅有助于吸引你的观众,也有助于分解你的内容,使其更容易接近。没有人喜欢读一长段文字。:)今天我们要添加一个滑动分页以及Thickbox集成,允许用户点击图片并放大以获得更好的观看效果。

例子:

Thickbox示例
这张照片是经许可通过视觉照片指南.

如何使用thickbox:

一旦我们在我们的站点上安装了thickbox,您所要做的就是添加“class=“厚盒子”“类到任何链接,该内容将显示在窗口中。下面的教程将向您展示如何将其集成到WordPress2.9+中。亚博yabo88app 下载

如何使用jquery和lightbox显示图像

今天我们将使用内置于亚博yabo88app 下载.以及一个称为厚框的JavaScript插件。因为这些已经包含在WordPress核心中,我们只需要访问它们。亚博yabo88app 下载为此,我们将使用wordpress函数亚博yabo88app 下载wp_排队_脚本().这听起来可能很复杂,但事实并非如此。

多亏了弥敦水稻贾斯廷锁扣本教程变得更简单。确保检查下面的更新。

了解wp ou排队ou脚本

基本上,这个函数所做的就是获取一个已知的脚本,并确保它不会被多次调用。因为有些插件调用jquery,我们要确保我们的调整不会因两次调用而导致任何错误。

现在wp_equeue_脚本有很多功能,但是我们只关注使用内置的东西。内置功能允许您调用大多数常见的JavaScript库,如查询脚本以及一些非常有用的插件,比如thickbox。

jquery插件的工作方式与wordpress插件相同。亚博yabo88app 下载简单地增强框架的功能,允许您做一些很酷的事情。它们并不比这复杂。

要使用wp_Enqueue_Script(),我们只需要知道要调用的库的名称以及要在哪里调用它。例如,使用以下函数:

            

解释-用简单的英语:

  • 函数名为jquery队列()只需调用jquery库,使用内置的wordpress函数显示亚博yabo88app 下载wp_排队_脚本().
  • 这个添加动作()。函数只说明我们希望代码放在页面上的位置。在这种情况下,我们选择wp_头位于页面标题中。

把它们放在一起

现在我们明白了wp_排队_脚本()函数工作,让我们加入所有我们需要的东西,以使thickbox插件集成并准备运行。

对于标准的WordPres亚博yabo88app 下载s用户,此代码包含在函数.php对于论文主题用户此代码进入您的自定义函数.php.

	

            

说明:用简单的英语

上面代码中的第一个函数称为厚箱排队只需调用jquery库,Thickbox插件,以及所需的CSS并将其添加到头中。

高级选项

现在每个人都喜欢快速加载页面,因此,最好不要在不需要的页面上包含额外的javascript代码。例如,在www.gyu-kura.com上,我们只在实际的文章页面中使用这个脚本,因此,我们确保jquery和thickbox只加载在“single.php”页面上。这是威尔帮助降低页面加载速度很快就会有考虑到谷歌的排名算法.下面是我们用来实现这个策略的代码。只需复制并粘贴到函数.php文件或论文用户自定义函数.php文件。

函数thickbox_enqueue()if(is_single())wp_enqueue_script(“jquery”);wp_enqueue_script(“thickbox”);wp_排队_样式(“thickbox”);添加_操作(“wp_head”,“thickbox排队”,1);

更新:添加jquery/thickbox/css和一行代码:

多亏了本文评论中的建议,我们只需将此代码添加到亚博yabo88app 下载函数.php文件。

AddioTrimBox();

问题/评论

如果您对本教程有任何疑问或意见,我们很乐意听到。亚博体育下载如果你认为你知道更好的方法,我们也愿意接受建议。;)

尼克瑞茜是一个多情的企业家,他相信任何人都能改变他们的事业和生活,他们有勇气和勇气。他也是现在宽带旨在简化宽带购物流程。