注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

John's Blog

天空,有梦就可以飞翔!

 
 
 

日志

 
 
关于我

刚走出校园的毕业生,就读计算机网络专业,对网站建设有一定的基础。开始探求Drupal已有一段时间,对Drupal的发展很是看好。现就职于深圳慧衡科技有限公司(intematrix.cn),它是一家专门服务于中国及海外中小企业的网络营销分析和优化服务提供商。 QQ交流群:44581272

网易考拉推荐

Drupal:Using Lightbox2 with TinyMCE or FCKEditor  

2009-08-04 15:37:46|  分类: drupal学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

You can easily use Lightbox2 on anchored images inserted by TinyMCE or FCKEditor, by using the "custom image trigger classes" feature.

Note that IMCE may also be used.

Lightbox2 Setting

  1. Go to the Lightbox2 Automatic image handling settings page (admin/settings/lightbox2/automatic).
  2. In the Custom image trigger classes textarea, add a new class that will be used to trigger the Lightbox (e.g. "triggerclass") then click "Save Configuration". Note: This feature is not available when using Lightbox2 Lite.
  3. Choose the appropriate Lightbox2 image handler from the drop-down list, e.g. 'Lightbox', 'Lightbox grouped', 'Slideshow', etc.

Using TinyMCE

  1. Go to the TinyMCE settings page (admin/settings/tinymce) and edit one of your created profiles.
  2. On Buttons and plugins settings: make sure the advanced image and image checkboxes are checked.
  3. On CSS settings, CSS classes: add the newly created class Lightbox2, using the = format. (i.e, trigger=triggerclass) then click "Update Profile".
  4. Create your content and click on the image button on the TinyMCE toolbar,.
  5. In the Insert/edit image window on the General tab, click on "browse" and insert a thumbnail image. You may also want to set an image description as it will be the caption for image.
  6. On the Appearance tab, click on the Class pull down menu and choose the Lightbox2 trigger class (i.e. "triggerclass"), then click "Insert".
  7. With the inserted image clicked, click the Insert/edit link on the TinyMCE toolbar.
  8. On the Insert/edit link window, browse for the bigger image and click on "Insert", continue creating / editing your content and save it.

Using FCKEditor

  1. Create your content, and on the FCKEditor toolbar click the image button.
  2. In the Image Properties window, Image info tab, click "browse" and insert a thumbnail image. (You would also want to type in the Alternative text: as it will be the caption for image.)
  3. On the Advanced tab, in the Stylesheet Classes textfield type in the Lightbox2 trigger class (i.e. "triggerclass"), then click OK.
  4. With the inserted image clicked, click the Insert/Edit Link on the FCKEditor toolbar.
  5. In the Insert/edit link window, browse for the bigger image and click on "Insert", continue creating / editing your content and save it.

There is a patch for FCKeditor queue to allow configuration of the rel attribute on links, see http://dev.fckeditor.net/attachment/ticket/2627/fck-rel.patch

For more advanced integration of FCKEditor, IMCE and Lightbox2, check out this article: http://drupal.org/node/314566

  评论这张
 
阅读(621)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016