Entries for month: “May 2009”

How to enable shadowbox features in the mangoblog admin

Posted By: Mark Aplet 6 Comments May 31, 2009

Now that Witheringtree created a shadowbox plugin for mango blog, I wanted to show you how you can make it easy to use within the mango blog admin. The process is not too complicated, but does take a little bit of explanation.

Let me start off by saying, that I have not yet used Witheringtree's shadowbox plugin, though I suspect it will work just fine. It's mostly just including the necessary Javascript files so this should work regardless of wether your using the plugin or not.

To start, you need to modify the /admin/editorSettings.cfm file to enable advanced linking. Honestly, I think this should be enabled by default for  new mango blog installs, and maybe it will someday. For now, we have to make some changes manually.

Step 1. Go to line 16; where it says "plugins" and lets add "advlink" to the list of available plugins. This will turn on some extra features in the link dialogue box that we will use later.  While your there, you may also wish to add "safari" to the list if you have users that use use the Apple Safari web browser. It only gets called if the browser being used is safari so FF and IE will not load the plugin. tinyMCE comes with some other useful plugins so check out the plugin reference page for a full list of plugins. Make a backup of your configuration settings and keep it safe. In the past, I have had some updates to mango blog overwrite these settings and change it back to the defaults.

Step 2. Next we need to drill down into the admin files and find the tinyMCE advanced link file. You can find it located here buried deep into the assets folder: /admin/assets/editors/tinymce_3/jscripts/tiny_mce/plugins/advlink/link.htm

Scroll on down to around line 198 or search for "rellabel" this is the drop down menu where you can select the necessary relative linking option. The first option is lightbox which last I recall reading, shadowbox can use. For our purpose lets add two new lines just before the lightbox option.

<option value="shadowbox">Shadowbox</option>
<option value="shadowbox[group]">Shadowbox Group</option>

This will give you the option to have both the single shadowbox display and the grouped output that automatically inserts the previous and next buttons to your pop up display.

Step 3. To put all this to use, you only need to link your image or other media as normal, but before you exit the link dialog box, you need to go to the "Advanced" section and change the "Relationship page to target" to the appropriate Shadowbox item. You can also add a title in the "General" tab. The title will appear with your image when it pops up.

Respond NowTags: Mango Blog · Plugins

Theme Design By Mark Aplet

Super Powered by Mango Blog