用Lightbox2在TinyMCE编辑器

最近作一个公司站点,网页内容页插入图片使用TinyMCE编辑器集成IMCE模块,在内容页图片较多时,想使用Lightbox2 组图的功能,就是有下一张或上一张图片的翻页查看的效果,如果单纯使用TinyMCE编辑器可视化编辑,无法插入rel="lightbox[roadtrip]属性标签,直接编辑源代码吧又过于麻烦,在drupal.org找到一篇文章,根据指示达到了我要效果,非常不错。
原文:http://drupal.org/node/252153

由于我用的是TinyMCE编辑器,所以FCKEditor就没有尝试了
文章大致步骤是:
修改Lightbox2设置:
URL:admin/settings/lightbox2
然后点击”Automatic image handling“标签,其URL:admin/settings/lightbox2/automatic

Automatic Handlers

编辑Custom Class Images
Automatic handler for custom class images--选择为:Lightbox grouped

Custom image trigger classes:文本框输入:triggerclass

保存。

编辑tinymce profile 设置 --
Buttons and plugins 列表中要启用Advanced image插件

CSS项
CSS classes:输入:trigger=triggerclass

保存。

在发布文章插入图片时指定,TinyMCE编辑器的图片对话框弹出后,指定图片的URL后,点击Appearance选项卡,css下拉框选择trigger,确定,并为这个图片指定一个连接URL。

其实就是为IMG标签加了 class="triggerclass"属性标签,这个属性标签引发lightbox2产生动作。

由于现在时间太晚了,不然会加一些图片进行补充,回头有时间我再补上吧

评论

发表新评论

此内容将保密,不会被其他人看见。
  • 自动将网址与电子邮件地址转变为链接。
  • 允许HTML标签:<a> <img> <em> <del> <strong> <cite> <code> <pre> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h4> <h5> <h6>
  • 自动断行和分段。
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

更多关於格式化选项的信息

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.