Bibblan Overview » Martin » TinyMce rel with Lightbox

TinyMce rel with Lightbox

How to use rel="lightbox" attribute in tiny mce. Quick solution.

Follow me on Twitter @martify

How to use rel="lightbox" in tiny_mce.

- Tiny MCE is a WYSIWYG editor control for home-pages.

- Lightbox is a javascript application to show images on-top of a homepage. Image opened with Lightbox.

Problem

To use lightbox in a home-page we need to use the rel attribute: rel="lightbox"

Tiny mce understands how to create a rel attribute if you install the advlink plugin.

If you DON'T want to use advlink plugin because it's confusing for the average computer-user we need a better solution.

Simple linking window VS Advlink window

Simple link window tiny mce Advlink window in tiny mce

Advlink window in tiny_mce is not easy to understand for the normal end-user. Too many options.

Solution

Instead of hacking tiny_mce for a better rel="" solution than advlink can offer, we'll write a separate Server-side-script or Javascript dealing with the creation of the rel="lightbox" attribute. Leaving tiny_mce (almost) all alone.

1. Create a new class in tiny_mce

Although i just said we wouldn't mess with tiny_mce we want to create a new class for use by tiny_mce's styleselect.

The class we want to add to tiny_mce's styleselect is lightbox.

To give tiny_mce a new class option add line 2 to your tiny_mce options:

1   theme_advanced_resizing : true,
2   theme_advanced_styles : 'Link to Image=lightbox',
3   theme_advanced_toolbar_align : 'left',

Read more about adding a class at Tiny MCe wiki

2. See the new Class option in tiny_mce

class="lightbox" The new lightbox attribute listed in Tiny Mce's Simple Linking window.

Class: Link to Image

Public listing name of the class is "Link to Image".

3. Try It Out

Now link to an image with tiny_mce and give the link our new class: lightbox (Link to Image).

Check your testpage.html sourcecode that Tiny MCE has created something like this:

<a href="/example.png" class="lightbox">Lightbox test</a>

We've now finished our tweeking of Tiny MCE!

The next step will be to let a Server Side Script or Javascript change class="lightbox" to rel="lightbox". Choose the solution you like!

Option 1: SERVER SIDE with Rails

This example is for you Rails-users out there.

Before Lightbox reads the DOM (html page) we let a helper method change the lightbox class we created earlier in tiny_mce:

class="lightbox" => rel="lightbox"

Open the Helper file for the Controller you are working on, or use application_helper.rb if you want all your controllers to access this new function.

HELPER - helpers/application_helper.rb

def to_lightbox_rel(text)
text.gsub('class="lightbox"', 'rel="lightbox"')
end

VIEW - views/example.html.erb

<%= to_lightbox_rel(@information) %>

Option 2: JAVASCRIPT with Protoype.

I'll use protoype since you'd already have it it installed because Lightbox use it.

Instead of using a server side script we can use a Javascript, it must of-course do it's job before Lightbox does!

HTML - example.html

<head>
     <script src="/javascripts/helper.js" type="text/javascript"></script>
</head>
<body>
    <div id="left">
        <p>
            A link with class starting with lightbox:
            <a href="/image.jpg" class="lightbox">Click to see picture</a>
        </p>
    </div>
</body>

JAVASCRIPT - javascripts/helper.js

document.observe('dom:loaded', function () {
    $$('#left a[class^=lightbox]').each(function(s) {
        s.rel = 'lightbox';
    });
});

When the DOM is loaded $$('#left a[class^=lightbox]') searches for links with a class starting with lightbox within a div with id left.

We then iterate through the result and add the rel attribute.

NOTE: This function must be executed before Lightbox.

FINISHED

Personally I'd choose to integrate the Javascript solution because Lightbox also requires Javascript. Why change to "rel" if javascript is turned off and Lightbox doesn't work?

I hope this little tutorial has helped. You are more than welcome to send better solutions. Contact me through my profile.

Kind Regards

Martin Jansson - August 2008

Follow me on Twitter @martify

Tell a friend about this article.