WordPress博客网站文章图片美化技巧:放大、幻灯片播放

WordPress   2011年08月21日 2:33  

Wordpress博客网站文章图片美化技巧:放大、幻灯片播放

玩Wordpress,写个博客,发发文章,总是要插入图片的。有的人可能对于图片有很大的偏好,一篇文章基本上以图片为主。在Wordpress放上几张精美的图片,不仅好看,也可以让读者得到更好阅读体验。

还有就是,在Wordpress当中放入图片,会受到博客的排版和长宽限制,以及网页打开速度因素的限制,图片太小图片原来的美感会,图片太大,会导致文章变形错位等等,最大问题是访问者是相当不喜欢等待你的图片加载太长的时间的。

所以说美化你的Wordpress博客网站的文章图片也是需要的,尤其是那些需要贴上大量的精美图片的博客,更应该让访问者感受到你的图片的真正内容。今天免费资源部落就来为大家介绍几个美化图片的技巧。

本技巧主要实现的效果:在你的WordPress文章页面的图片如果读者觉得太小了,可以点击放大,如果有多张图片,点击某一个图片放大后,还会形成一个简单相册,不需要查看别的图片,直接在本相册当中点击下一个就OK了,类似于幻灯片插件的效果。

效果就是这样,实现起来也不是很难。以前我还为大家介绍的一些的小技巧免费教程有:

WordPress博客网站文章图片美化技巧:放大、幻灯片播放操作方法与教程

一、 简单-实现图片放大和缩小的插件篇:WP FancyZoom图片缩放插件

1、属于轻量型的。效果也十分漂亮,很有苹果中图标的感觉。使用非常方便,直接到后台搜素这个插件,安装即可。 这里是WP FancyZoom插件下载地址

2、本站就是使用的这个WP FancyZoom插件,直接下载安装就可以了。不需要多余的设置,后台设置可以看一下,如果你的图片保存位置与WP默认的保存位置不一样,改一下就行了。这里就是WP FancyZoom插件下载地址。如下图:

WP FancyZoom设置

二、稍简单-改装WP FancyZoom图片缩放插件,实现代码插入

1、对于插件有不好感的朋友,你可以用这个方法。解压WP FancyZoom后有两个文件夹,打开js-global文件夹下的FancyZoom.js。

2、把“/images-global/zoom/”替换成“/wp-content/themes/你的主题文件夹名/images-global/zoom/”即可。然后上传两个文件夹到你wodrpress站点主题文件夹下。

3、将WP FancyZoom图片缩放插件的image和JS文件夹上传后,接下来要做的工作就比较简单,你需要做的就是在你的网页当中引用这两个JS文件就OK了。引用的方法很简单,在你的主题的header.php文件的</head>之前或者是footer.php文件的</body>之前加以下代码:

  • <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoom.js"></script>
  • <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js-global/FancyZoomHTML.js"></script>

4、最后不要忘记在你的header.php里的<body>属性上添加成:<body onLoad="setupZoom();">,这样当页面加载的时候就已经可以使用WP FancyZoom了。

5、WP FancyZoom插件的图片放大和缩小效果可以在下图看到演示效果。(点击图片即可)

WP FancyZoom效果演示

三、进阶-FancyBox for WordPress自动提取网页图片支持相册浏览效果

1、FancyBox for WordPress插件秀图特效是从原本图案的位置直接缩放出来,然后关闭或图片外的区域会缩回去原本图案的位置,且不影响页面的滚动。这里是FancyBox for WordPress插件下载地址

2、FancyBox for WordPress插件后台设置是英文,对于有些朋友可能会比较麻烦,这里我简单翻译了一下,如下图:(看不清,请点击,放大图片)

FancyBox for WordPress后台设置说明

3、如果你安装了FancyBox for WordPress插件没有作用,请检查一下你的图片是不是没有添加链接,如果有链接还是没有作用,可以看看有没有其他的插件冲突,

4、例如FancyBox for WordPress插件直接调用jQuery而并非使用wp_enqueue_scrip函数。如果此类插件正在使用中,则请停用插件。

5、如果还有问题,只能尝试用FancyBox for WordPress插件的Troubleshooting模式了,在后台的Troubleshooting设定中把Do not call jQuery勾选、或是jQuery “noConflict” Mode取消。

6、FancyBox for WordPress插件的图片演示效果如下图:

FancyBox for WordPress演示图片

四、高级-WordPress Content Slide文章幻灯片插件

1、就是说可以让你实现像在一些网站例如免费资源部落的首页那样的幻灯片播放效果,别人点击图片后就可以进入相应的文章页面了。你不需要懂JS,也不需要搞什么CSS,只需要插入一段代码就行了。

2、首先是下载和安装WordPress Content Slide文章幻灯片插件,这里是WordPress Content Slide下载地址。安装好后,请将下面一段代码放到你想实现幻灯片播放的效果的位置。例如首页、文章内页、分类、导航等等,随便哪里啦!!!

  • <?php if(function_exists('wp_content_slider')) { wp_content_slider(); } ?>

3、现在回到后台在WordPress Content Slide设置当中添加图片源文件,你也可以选择自动选择某一个分类下的文章图片,操作说明我已经做了翻译,如下图:(看不清,请点击,放大图片)

WordPress Content Slide操作说明

4、当然你可能还需要根据你自己的Wordpress的排版设计调整图片大小还有文字的大小和颜色。如下图:

WordPress Content Slide图片文字大小

5、最后实现的幻灯片播放效果基本上还是可以让人满意的,如下图:

WordPress Content Slide实现幻灯片播放

五、Auto Highslide 插件增强版和改装代码版本

1、Auto Highslide 插件增强版是weisay博主在原插件的基础作了相应的修改,使得样式更加好看。直接下载安装此插件即可使用:Auto Highslide插件增强版下载

2、这里再来分享一下rich.ga博主提供的Auto Highslide插件代码版本,适合不想使用插件的朋友。首先下载并解压Auto Highslide插件。

3、打开“auto-highslide.php”文件。按照下面的提示依次对源文件进行修改(把auto-highslide.php文件中的'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide全部替换成:'.get_bloginfo('template_directory').'):


#第23行
<link rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide.css" type="text/css" />
#改成:
<link rel="stylesheet" href="'. get_bloginfo('template_directory').'/highslide/highslide.css" type="text/css" />
#第24行
<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide-with-html.packed.js"></script>
#改成:
<script type="text/javascript" src="'.get_bloginfo('template_directory').'/highslide/highslide-with-html.packed.js"></script>
#第27行
hs.graphicsDir = "'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/graphics/";
#改成
hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";

4、将修改好的“auto-highslide.php”文件以及“highslide”文件夹上传到你WordPress主题目录(一般为/wp-content/themes/主题文件夹名称)

5、打开你主题的“functions.php”文件,在最后的?>之前加入以下代码:include('auto-highslide.php');

6、完工!好好享用你用纯代码实现的图片放大效果吧!注意:此修改版插件默认的蒙罩层是白色的,如果你想换成黑色,可以修改插件里面的highslide.css,将里面最后的

.highslide-dimming{background:#fff;}

改为

.highslide-dimming{background:#000;}

当然你也可以定义成其他颜色,看你自己的喜好了。

文章出自:免费资源部落 https://www.freehao123.com/ 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。 禁止全文转载。

域名注册
购买VPS主机

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有141 位神马家族成员冒出泡来在农场开始干活了
  • 山里人

    图片有了幻灯片播放效果后,没有了干巴巴的感觉了。

    qi 回复:

    好看一点吧,但是多了加载JS和Jquery了

    东子 回复:

    前排挤挤 :cool:

    这是农场的第 1 块农田,部落批准 [山里人] 在[2011-8-21 09:39]开垦完成.
  • 明月当

    放点图片可以更好看一些,不过,图片太多的话,加载起来也是非常慢的。

    这是农场的第 2 块农田,部落批准 [明月当] 在[2011-8-21 12:01]开垦完成.
  • 创业板

    博主,厉害。
    这一直就是我想要的效果。
    解决了困扰我的博客图片问题。

    这是农场的第 3 块农田,部落批准 [创业板] 在[2011-8-21 12:10]开垦完成.
  • 春天

    WordPress果然强大,这样的图片效果居然只用插件就可以实现了。看来我要把自己的博客变成WP程序了。

    这是农场的第 4 块农田,部落批准 [春天] 在[2011-8-21 12:23]开垦完成.
  • 相辅相成

    那个内容幻灯片是不是只要加上那个代码就可以使用了?为什么我加上了代码并没有出现呢?

    qi 回复:

    是的,当然前提是激活插件了。
    这段代码放在你想要显示的位置上。
    例如首页。如果没有,请查看一下是不是CSS问题。

    这是农场的第 5 块农田,部落批准 [相辅相成] 在[2011-8-21 12:31]开垦完成.
  • 相遇

    好久没有看到部落的技术文章了,这次又学到了。

    这是农场的第 6 块农田,部落批准 [相遇] 在[2011-8-21 12:34]开垦完成.
  • My Blgo

    图片如果设置大小好看,还可以提升整个排版的水平,让人看了舒服。就像博主的文章一样。

    这是农场的第 7 块农田,部落批准 [My Blgo] 在[2011-8-21 16:09]开垦完成.
  • sososo

    感觉FancyBox for WordPress插件设置比较多,有些东西我还看不懂。

    这是农场的第 8 块农田,部落批准 [sososo] 在[2011-8-21 16:32]开垦完成.
  • 英文难

    博主,有没有中文类的插件呀?英文的看不懂?

    qi 回复:

    中文类的插件貌似还没有发现,网上有一个汉化版本的,不过是好早的版本了。,

    这是农场的第 9 块农田,部落批准 [英文难] 在[2011-8-21 20:14]开垦完成.
  • 清风明月

    我看了源代码,这些插件都不同程序上地加载了JS和Jquery,应该会影响网页的打开速度吧。

    这是农场的第 10 块农田,部落批准 [清风明月] 在[2011-8-21 20:27]开垦完成.
  • 继续

    博主,非常感谢你的方法。
    看了之后很受用。
    我是做站新手,学到的Wordpress知识都是从这里开始的。因为你讲得都是通俗易懂的。

    这是农场的第 11 块农田,部落批准 [继续] 在[2011-8-21 20:32]开垦完成.
  • 紫色忧郁 2

    不知不觉就到了,呵呵来学习的

    qi 回复:

    呵呵。从哪里来的?

    紫色忧郁 回复:

    亲,从百度,你的站太给力了!

    这是农场的第 12 块农田,部落批准 [紫色忧郁] 在[2011-12-12 19:46]开垦完成.
  • 我的博客目前就是太单一了,今天晚上想找找图片是怎么放上去的。还想请问一下,图片是要上传到FTP空间去的吗/?

    qi 回复:

    你可以直接使用Wordpress的上传就可以了。不需要使用FTP软件。

    南宁SEO 回复:

    @qi, 我想问个问题,像这个博客:https://chiun.me/ 他网站里面的图片和效果是用的什么软件?我想要这种效果。上传图片到空间里面无所谓。主要是美观! 呵呵。

    qi 回复:

    @南宁SEO, 这个网站用了auto highslide这个插件,你可以免费下载使用。

    这是农场的第 13 块农田,部落批准 [南宁SEO] 在[2012-2-10 20:17]开垦完成.
  • andychow1989

    学习了 不过一般还是希望代码解决的

    qi 回复:

    如果可以用代码解码解决就最好,用多了插件会造成速度下降的。

    这是农场的第 14 块农田,部落批准 [andychow1989] 在[2012-2-26 09:56]开垦完成.
  • kk 2

    楼主你好, 我安装了WP FancyZoom插件但是点击图片还是一样,直接跳转,不知道什么原因

    qi 回复:

    把其它的插件关闭,然后再看看效果。一般是因为插件和主题冲突的原因导致的。

    这是农场的第 15 块农田,部落批准 [kk] 在[2012-3-15 00:08]开垦完成.
  • kk 2

    可能是路径不对,一件解决,谢谢楼主分享,不过再问楼主一个问题,我在wp中插入图片时,如果默认小图片,又感觉太小,大图片就不能点,如果原图,又太大了,超出文章了,不知道怎么解决,希望楼主帮帮忙,谢谢

    qi 回复:

    你可能把Wordpress的缩略图关闭了。检查一下后台设置中,将它开启。这样图片就可以生成不同大小的缩略图了。我的就是这样的。大小全部一样。

    quericy 回复:

    @kk, 感谢点醒啊,看到你的评论才恍然应该是路径问题,我的改成/wp-content/plugins/wp-fancyzoom就解决了~~

    这是农场的第 16 块农田,部落批准 [kk] 在[2012-3-15 00:30]开垦完成.
  • qq478601226

    你好,我有问题想请教,但是你的QQ群140917087已经满人了,能不能加我QQ详谈。

    这是农场的第 17 块农田,部落批准 [qq478601226] 在[2012-3-16 20:27]开垦完成.
  • qq478601226

    我的qq是478601226.PS:怎么名字显示不完整?

    qi 回复:

    你好,已经加你的QQ了。你可以加入这个QQ群:212262901

    这是农场的第 18 块农田,部落批准 [qq478601226] 在[2012-3-16 20:30]开垦完成.
  • 灏灏 7

    有点难,过段时间再弄。博主,头像改怎么弄?

    qi 回复:

    @灏灏, 其实就是安装一个插件。你是说头像预览不?

    灏灏 回复:

    @qi, 就是你到我博客留言,你会有自己设置的头像。。怎么弄?

    qi 回复:

    @灏灏, 这个是Gravatar全球通用头像,你只要在Gravatar官方网站申请一个就行了。几乎互联网大部分博客都支持Gravatar。详细的方法在这里:https://www.freehao123.com/gravatar/

    这是农场的第 19 块农田,部落批准 [灏灏] 在[2012-4-23 23:45]开垦完成.
  • 婷婷

    楼主,我是个刚刚学wp的菜鸟,现在我知道如何将模板导入今wp,可是怎么想里面添加内容,修改模板样式,如何浏览,可以发布成静态的html么???这些楼主可以详细帮我解答一下么???非常感谢楼主!!!!

    qi 回复:

    @婷婷, 1、点击主题,编辑,选择你自己的主题,就可以修改代码,改变模板样式了。2、静态的html,先修改固定链接,然后将域名设置成为xx.html就好了,这样在编辑和发表新文章时就变成这样的地址了。3、你是不是用了英文的Wordpress了?中文的wordpress后台全部是中文的,使用起来非常方便。

    这是农场的第 20 块农田,部落批准 [婷婷] 在[2012-5-14 09:14]开垦完成.
  • 婷婷

    我下载了瀑布流模板Vasiliki 1.0.0模板,是图文混合滴,可是我上传的内容中文字显示,图片不显示!是需要什么插件么??TimThumb函数谁能具体帮我介绍一下么???O(∩_∩)O谢谢。。。

    qi 回复:

    @婷婷, 你上传的内容?应该是发表文章添加图片才会显示,和你上传的内容没有关系的。

    这是农场的第 21 块农田,部落批准 [婷婷] 在[2012-5-15 10:25]开垦完成.
  • 我照着教程绑定了co.cc域名。可跳转之后却跳转到的是cwcity页面,并不是自己的wordpress页面,求解。求教。

    qi 回复:

    @喵, 1、先查一下解析生效了没。2、dns解析的IP是否正确。3、看看有没有在cwcity空间绑定好这个域名。

    这是农场的第 22 块农田,部落批准 [喵] 在[2012-7-20 05:30]开垦完成.
  • WordPress怎么自动调用文章第一张图片做缩略图呢 首页 文章里的第一张图片

    qi 回复:

    @530596583, 代码法和插件法。代码法不知道你喜欢不,因为还要自己修改,看你的图片是要在每篇文章旁边都显示这篇文章的缩略图,可以试试这个强大的Wordpress插件:WP Thumbnails

    这是农场的第 23 块农田,部落批准 [530596583] 在[2012-8-3 00:38]开垦完成.
  • 爽返网 3

    如果是外链图片可以用这个吗~~

    qi 回复:

    @爽返网, 也可以,没有问题。

    这是农场的第 24 块农田,部落批准 [爽返网] 在[2012-8-20 15:56]开垦完成.
  • 闪云软件工作室

    :cool: 教程做的很详细!

    这是农场的第 25 块农田,部落批准 [闪云软件工作室] 在[2012-8-27 16:22]开垦完成.
  • 灵感来源 4

    安装了,简单的WP FancyZoom,还要做什么吗,我安装了也启动了,但我在文章页面点图片没反应….

    qi 回复:

    @灵感来源, 把你的图片设置为:链接到此图片即可。图片要添加超链接才有效果。

    这是农场的第 26 块农田,部落批准 [灵感来源] 在[2012-10-22 17:59]开垦完成.
  • 灵感来源 4

    不行,点击图片就弹出另一个窗口,我的图片是外链的,这有关系吗?

    qi 回复:

    @灵感来源, 没有关系,你不要设置为新窗口中打开就行了。看我的图片的超链接格式。

    这是农场的第 27 块农田,部落批准 [灵感来源] 在[2012-10-22 21:38]开垦完成.
  • lygdlywd 3

    我不会用php的,做企业站用wordpress怎么样

    qi 回复:

    @lygdlywd, 可以,没有问题,现在好多的企业站都是用的Wordpress。

    这是农场的第 28 块农田,部落批准 [lygdlywd] 在[2012-10-31 10:42]开垦完成.
  • keke 9

    博主有没有像异次元那样显示图片的插件的,https://www.iplaysoft.com/any-do.html 像这个链接下面可以把4张图片合在一起这样的

    qi 回复:

    @keke, 暂时没有找到这样的,好像是博主自己开发的。

    这是农场的第 29 块农田,部落批准 [keke] 在[2012-11-13 17:51]开垦完成.
  • 清风馨云 1

    用BAE的空间搞得WP,该肿么改代码额?它的图片是传到BUKET里面的,改了还是木有用额。

    qi 回复:

    @清风馨云, 这个可能不能在BAE空间上使用。

    这是农场的第 30 块农田,部落批准 [清风馨云] 在[2012-11-16 12:34]开垦完成.
  • 有娇

    楼主看了你的文章,写的很精彩,想问你一个问题:安装好后,请将下面一段代码放到你想实现幻灯片播放的效果的位置。例如首页、文章内页、分类、导航等等,随便哪里啦!!!
    这段代码怎么放到首页,是放到首页模板里面,还是首页文章里面啊,我不知道怎么放。

    qi 回复:

    @有娇, 是放在模板里,也就是你的WP的主题代码中。例如header.php或者footer.php等等。

    这是农场的第 31 块农田,部落批准 [有娇] 在[2012-11-16 14:11]开垦完成.
  • 清风馨云 1

    那么,问你一个很私人的问题!你的这个网站是搭建在那个服务器上的?你买的who?免费的?还是?

    qi 回复:

    @清风馨云, 是国内的西部空间,买的。用了几年了。

    这是农场的第 32 块农田,部落批准 [清风馨云] 在[2012-11-16 23:40]开垦完成.
  • 悠然

    问问题啊楼主,我这个fancyzoom能不能用在首页里,点每张图片都能现实放大效果

    这是农场的第 33 块农田,部落批准 [悠然] 在[2012-11-22 10:36]开垦完成.
  • 疯子 5

    主题 不支持怎么办啊。。。

    这是农场的第 34 块农田,部落批准 [疯子] 在[2012-12-19 19:38]开垦完成.
  • 清风馨云 1

    为什么我下载了那个WP FancyZoom安装了还是不能用呢?!无论是换成默认的Twenty Twelve还是自己的主题,都不能实现缩放的效果呢!我添加了之前的代码的!

    邵泽 回复:

    @清风馨云, 嗯 确实 不能用了

    这是农场的第 35 块农田,部落批准 [清风馨云] 在[2013-1-11 00:12]开垦完成.
  • 米奇博客 3

    :smile: qi,那不叫图片缩放,叫图片弹出层

    这是农场的第 36 块农田,部落批准 [米奇博客] 在[2013-1-25 20:08]开垦完成.
  • 情书网 4

    安装了:WP FancyZoom 也改了图片的地址,没效果,不知道是不是主题的问题 :grin:

    qi 回复:

    @情书网, 图片要以超链接的形式,我看到你的博客已经有了这个放大效果了。

    这是农场的第 37 块农田,部落批准 [情书网] 在[2013-5-30 00:55]开垦完成.
  • 经验公式 3

    我想问一下,这个步骤:
    4、最后不要忘记在你的header.php里的属性上添加成:,这样当页面加载的时候就已经可以使用WP FancyZoom了。
    是怎么操作的啊?用上面的代码替换吗?

    [url]https://www.jygongshi.com[/url]

    这是农场的第 38 块农田,部落批准 [经验公式] 在[2013-6-29 16:49]开垦完成.
  • 经验公式 3

    fansybox for wp能不能用代码实现^_^

    qi 回复:

    @经验公式, 可以,记得有人专门自己修改一些图片放大插件,直接用代码实现。

    这是农场的第 39 块农田,部落批准 [经验公式] 在[2013-6-30 08:42]开垦完成.
  • 经验公式 3

    问一下,这个步骤:
    4、最后不要忘记在你的header.php里的属性上添加成:,这样当页面加载的时候就已经可以使用WP FancyZoom了。

    这是农场的第 40 块农田,部落批准 [经验公式] 在[2013-8-2 20:50]开垦完成.
  • xxx 1

    第二种方法好,经验告诉我插件会把我的wordpress弄坏的。。避免使用插件。。。

    qi 回复:

    @xxx, 对,我现在就后悔当初安装了个SEO插件。

    这是农场的第 41 块农田,部落批准 [xxx] 在[2013-8-28 15:02]开垦完成.
  • 夏娜 4

    WP FancyZoom插件官方已经删了?官网上搜不到啊。

    qi 回复:

    @夏娜, 是的,已经删除了。

    这是农场的第 42 块农田,部落批准 [夏娜] 在[2013-10-30 21:32]开垦完成.
  • 夏娜 4

    随便纠正qi的一个错误:在这个文件当中查找“/images-global/zoom/”并修改为“你的网址/wp-content/themes/主题文件夹名/images-global/zoom/”……
    把“你的网址”删掉,直接替换成“/wp-content/themes/主题文件夹名/images-global/zoom/”即可。

    qi 回复:

    @夏娜, 谢谢,已经更正。

    夏娜 回复:

    @qi, 哎,你应该这样说:
    把“/images-global/zoom/”替换成“/wp-content/themes/主题文件夹名/images-global/zoom/”。
    这个js文件是没有“你的网址”的……你还没看明白。。。
    我上面说的“你的网址”是指你原文中的“你的网址”,并不是指js文件。。。

    qi 回复:

    @夏娜, 你这句话也没有看明白。

    夏娜 回复:

    @qi, ……
    你把你文章中这句话:【2、把“你的网址”删掉,直接替换成“/wp-content/themes/主题文件夹名/images-global/zoom/”即可。然后上传两个文件夹到你wodrpress站点主题文件夹下。】
    改成:
    【2、把“/images-global/zoom/”替换成“/wp-content/themes/你的主题文件夹名/images-global/zoom/”即可。然后上传两个文件夹到你wodrpress站点主题文件夹下。】
    不过还是不排除还有人看不懂。。。

    qi 回复:

    @夏娜, 原来是这样,谢谢,我已经更改了。

    这是农场的第 43 块农田,部落批准 [夏娜] 在[2013-10-30 21:54]开垦完成.
  • Aaron

    大神,能帮我看看出了什么问题么?我的图片是显示在后面了,求解!https://aaronlin.wicp.net/?p=82 我用的是插入代码这个方法的,第二点

    这是农场的第 44 块农田,部落批准 [Aaron] 在[2013-11-10 23:42]开垦完成.
  • bad boy

    https://aaronlin.wicp.net/?p=82

    大侠,能看看我的为什么会这样么?用代码改的,没有用插件

    qi 回复:

    @bad boy, 是JS错误:Uncaught TypeError: Object # has no method ‘phzoom’
    这个文件/includes/single.js

    bad boy 回复:

    @qi, 不好意思,应该怎么更改呢?我是初学者。可以教我一下么,谢谢你

    bad boy 回复:

    @qi,那个js代码是这样的:
    jQuery(document).ready(function(d){var e=d(“#sidebar-inner”),b=d(“.post-content a:has(img)”),c=d(window),a=e.offset().top;b.phzoom({});c.scroll(function(){var f=c.scrollTop();if(f+20>=a){e.css({position:”fixed”,top:5})}else{if(f+20<a){e.css({position:"static",top:""})}}})});

    这是农场的第 45 块农田,部落批准 [bad boy] 在[2013-11-11 01:11]开垦完成.
  • 霓虹 2

    使用的WP flash img show幻灯片插件,Twenty Twelve主题。请问怎么首页加入幻灯片。

    提示是要把这句(PHP)代码复制到主题文件中.

    我就在index.php试了试,放了半天不知道放在哪里。对了,应该是放在index.php文件吧。
    index.php文件如下:

    …………………………………………………………………………………………………………………………..

    <?php printf( __( 'Ready to publish your first post? Get started here.’, ‘twentytwelve’ ), admin_url( ‘post-new.php’ ) ); ?>

    …………………………………………………………………………………………………………………………..

    问问应该放在哪里?

    这是农场的第 46 块农田,部落批准 [霓虹] 在[2013-11-12 11:27]开垦完成.
  • 霓虹 2

    回复看不完整,那麻烦看这里把 https://nihong.org/split/1228

    霓虹 回复:

    @霓虹, 好像解决了,不用麻烦了,谢谢

    qi 回复:

    @霓虹, 刚刚才看到你的问题,应该是放错了位置吧?

    霓虹 回复:

    @qi, 出现一个糟糕的问题,我刚把幻灯片换了就文章乱码了,…还好删了就好了。唉,找个幻灯片插件都这么难,好看的在移动端惨不忍睹,适应电脑与移动端的又难看而且我选的一个幻灯片插件既然还乱码,真是…

    qi 回复:

    @霓虹, 你应该是在保存代码时没有选择uft-8格式,才会导致出现这个错误。

    霓虹 回复:

    @qi, 我使用的notepad编辑器,设置的是 uf8[无bom]
    应该没问题吧。

    qi 回复:

    @霓虹, 如果这个不行,再试试uf8 这个格式的。

    霓虹 回复:

    @qi, 还有godaddy使用incapsula有时候出现[有时还挺高频率]incapsula提示错误[貌似是无法链接吧]这是godaddy还是incapsula的问题?

    qi 回复:

    @霓虹, 有没有指定IP?如果是自己指定IP的话,可能导致这个错误,有时源空间出问题也会导致这个错误。

    霓虹 回复:

    @qi, 什么指定ip,对了,是说自己指定的incapsula的日本ip吧

    qi 回复:

    @霓虹, 是的,就是没有使用incapsula给的DNS,而是自己指定IP了。

    霓虹 回复:

    @qi, 如果了解的话,就推荐一个免费导航程序呗。想找个好用的可视化的导航程序,还真难找,

    这是农场的第 47 块农田,部落批准 [霓虹] 在[2013-11-12 11:31]开垦完成.
  • 烂番茄 4

    不错的大图幻灯片啊。。

    这是农场的第 48 块农田,部落批准 [烂番茄] 在[2013-11-25 09:22]开垦完成.
  • 323心 5

    它的路径怎么改?我的图片地址是/wp-content/uploads/2013/12/图片名称.png

    这是农场的第 49 块农田,部落批准 [323心] 在[2013-12-19 09:48]开垦完成.
  • 323心 5

    @qi;它的路径怎么改?我的图片地址是/wp-content/uploads/2013/12/图片名称.png

    qi 回复:

    @323心, 你说Wordpress的图片路径吗?在后台的设置中可以修改,并自己指定。

    这是农场的第 50 块农田,部落批准 [323心] 在[2013-12-20 11:17]开垦完成.
  • 323心 3

    哦,我没说明白,我是说WP FancyZoom插件里设置的地址应该写哪个?上面的地址是我的图片所在地址

    qi 回复:

    @323心, 默认的即可,不需要修改,除非你之前对WP设置了自定义路径,否则就不需要修改了。

    这是农场的第 51 块农田,部落批准 [323心] 在[2013-12-21 10:21]开垦完成.
  • 323心 3

    搞定!之接代码插入!

    这是农场的第 52 块农田,部落批准 [323心] 在[2013-12-21 14:37]开垦完成.
  • CYs 4

    FancyZoom 应该是下架了···找不到下载的地方啊·

    qi 回复:

    @CYs, 是的,Wordpress插件官网已经没有这个插件,不知道为什么下架。

    这是农场的第 53 块农田,部落批准 [CYs] 在[2013-12-28 21:55]开垦完成.
  • CYs 4

    FancyZoom找到了,但有一个问题,不知道博主能不能解决。

    我看了你们能实现这个功能的站点···发现:图片必须 能点击打开比如,代码形如

    我想问的是,要怎么做才能让下面这种形式也实现幻灯片效果呢?

    这是农场的第 54 块农田,部落批准 [CYs] 在[2013-12-28 22:12]开垦完成.
  • CYs 4

    找到个合适的描述方法了···汗。

    “3、如果你安装了FancyBox for WordPress插件没有作用,请检查一下你的图片是不是没有添加链接,如果有链接还是没有作用,可以看看有没有其他的插件冲突,”

    我想问的是:如果我图片不添加链接,怎么才能实现幻灯片效果呢?

    qi 回复:

    @CYs, 不行,没有链接无法触发JS事件。

    这是农场的第 55 块农田,部落批准 [CYs] 在[2013-12-28 22:23]开垦完成.
  • 323心 16

    外链图片能用吗?

    qi 回复:

    @323心, 可以,没有问题。

    这是农场的第 56 块农田,部落批准 [323心] 在[2014-2-3 14:48]开垦完成.
  • cjoke 2

    WP FancyZoom代码插入后效果是出来了,但是左上角的叉叉图片没有显示,查看网页的源代码那张图的调用地址是这个,怎么解决啊img src=”/wp-content/themes/D8/images-global/zoom/closebox.png”

    这是农场的第 57 块农田,部落批准 [cjoke] 在[2014-2-13 11:12]开垦完成.
  • 尹寸

    WP FancyZoom 这个插件不行啊…开启了没反应 上传图片是不是直接上传到媒体库 然后插入文章就行了? 要不要什么代码?

    这是农场的第 58 块农田,部落批准 [尹寸] 在[2014-2-17 12:22]开垦完成.
  • 我都弄好了,但是貌似没有作用啊!麻烦博主帮忙看下。

    qi 回复:

    @安之语, 图片要有超链接才会有效果,你之前的图片都没有带上链接所以就没有放大效果,看你最新的文章里的图片是有放大的效果的。

    这是农场的第 59 块农田,部落批准 [安之语] 在[2014-6-23 06:11]开垦完成.
  • 屌丝智慧

    用外链图片 不知道咋样

    这是农场的第 60 块农田,部落批准 [屌丝智慧] 在[2014-6-25 18:46]开垦完成.
  • 贴吧 4

    咨询下,wordpress想添加一个播放页面(影音类型的),不知道有没有办法实现呢?并且便于插入不同的影片的!

    qi 回复:

    @贴吧, 有flash的代码,但是如果要播放影片的可以试试使用html5。

    quericy 回复:

    @qi, 博主,我分别试了WP FancyZoom和FancyBox for WordPress,可以正常运行,但是都没有你的图片弹出后下方那个小工具栏呢?
    (就是图片上的显示←,→,移动,自动播放,实际大小,关闭的那个小工具栏)
    这是什么别的插件的效果吗?
    望回复,谢谢~~

    qi 回复:

    @quericy, 你好,我现在用的是auto-highslide这个放大插件。

    Rich 回复:

    @qi, 在文章补充一下Auto Highslide这个插件吧,另外我要在这篇文章投稿Auto Highslide的插件改装代码方法:https://rich.ga/post/381 :mrgreen:

    qi 回复:

    @Rich, 非常感谢,已经更新在文章当中。

    Rich 回复:

    @qi, :wink: 可是qi复制错代码了:
    #第27行
    hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";
    #改成
    hs.graphicsDir = "'.get_bloginfo('template_directory').'/highslide/graphics/";

    :arrow: 实际上可以简单的说,把auto-highslide.php文件中的
    '.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide
    全部替换成:
    '.get_bloginfo('template_directory').'

    那就比较简单直观些……

    qi 回复:

    @Rich, 好的,已经更新。

    这是农场的第 61 块农田,部落批准 [贴吧] 在[2014-7-4 11:09]开垦完成.
  • 丢丢

    无论如何,上面几个方法都不成功,愁死了,博主能教教我吗?我的网站:https://seaeon.com

    qi 回复:

    @丢丢, 安装插件后也失败吗?

    丢丢 回复:

    @qi, 第一个,是安装后无任何反应,WordPress Content Slide 这个安装后,加入那串代码,发现不能令它居中,它跑到了页面两边空白处的最左边。。

    Rich 回复:

    @丢丢, 用Auto Highslide试试 :mrgreen:

    这是农场的第 62 块农田,部落批准 [丢丢] 在[2014-8-28 14:28]开垦完成.
  • Zouming

    怎样弄成博主这样,放大后有前进后退按钮

    这是农场的第 63 块农田,部落批准 [Zouming] 在[2014-9-28 18:02]开垦完成.
  • chenzheng

    我想做一个相册,比如点击大衣的时候直接弹出关于大衣的相册,不知道怎么设置,

    qi 回复:

    @chenzheng, 好像没有可以直接实现的程序。

    这是农场的第 64 块农田,部落批准 [chenzheng] 在[2015-5-17 17:15]开垦完成.
  • 狂族晨曦 3

    想问博主,第4、6张图片的那种,点击之前像是裁剪过的一样,图片只显示了部分,点击之后能查看整张完整的图片是怎么实现的。不知道博主明白我的意思了没有。也就是点击前只显示图片中间500px*240px的部分,点击后显示500px*完整px的效果。

    qi 回复:

    @狂族晨曦, 这是用了Wordpress的缩略图的功能,在后台编辑文章时添加图片时直接使用500px*240px大小的图片。点击后放大就是用了这篇文章的缩放插件了,点击就能查看到原图了。500px*240px是我在Wordpress中设置的默认大小的。

    狂族晨曦 回复:

    @qi, 感谢博主,关注部落很久了,部落就是我的建站启蒙,非常感谢! :grin:

    这是农场的第 65 块农田,部落批准 [狂族晨曦] 在[2015-6-22 23:42]开垦完成.
  • PWF 1

    为什么方大后没有前进后退按钮

    qi 回复:

    @PWF, 这个插件是没有提供的,可以使用auto-highslide,这个插件有提供这个功能。

    这是农场的第 66 块农田,部落批准 [PWF] 在[2015-7-12 23:09]开垦完成.
  • 为什么使用auto-highslide报错啊!?点击图片后无法放大……一脸懵逼啊!~求指教啊! QQ:252112645

    这是农场的第 67 块农田,部落批准 [Yephy] 在[2016-9-6 23:01]开垦完成.
  • 顾客

    按你的方法加了但是没有效果?点击图片并没有放大
    请问怎么回事

    这是农场的第 68 块农田,部落批准 [顾客] 在[2017-8-22 11:02]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


评论内容 (*必填):
(Ctrl + Enter提交)   

部落快速搜索栏

各类专题梳理

网站导航栏

X
返回顶部