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.

Related Entries:

Tags: Mango Blog · Plugins

6 comments so far ↓

  • 1 Marco Bertorello // Feb 12, 2010 at 6:42 AM
    Hi, I followed your example to integrate shadowbox in my e107 sites, but I've a little problem.
    When I set a relation to shadowbox group, where I must specify the group name?

    I don't want that all images related to shadowsbox group are grouped toghether, but I need to have more group based of the type of content. Is it possible?

    thanks a lot
  • 2 Mark Aplet // Feb 12, 2010 at 7:41 AM
    If you want to have multiple groups on the same page you will need to have unique group names for each group. You can manually add a group name by accessing the source code and supplying your own group names. e.g. [group1], [group2], etc.

    If you know that you will never have more than x number of groups you can add those groups to the tinymce link.htm file you modified earlier. So instead of having only one option with a value of shadowbox[group] you can have several. Like shadowbox[group1], and shadowbox[group2] There is no limit to the number of groups you can specify.

    Hope this helps.
  • 3 Marco Bertorello // Feb 12, 2010 at 7:48 AM
    Thanks for your reply, Mark.

    I understood what you wrote, but I'm not the final user of the site and I cannot ask the users to write code :)

    I'm looking for a simple way, for example reusing the idlabel form, to manage the grouping.

    I've tried using [{idlabel}], but this don't work...

    Thanks a lot, and sorry for my orrible english :)
  • 4 Mark Aplet // Feb 12, 2010 at 8:03 AM
    Hi Marco, In that case, you need to use the second option that I mentioned above. By adding more than one "shadowbox[whatEverGroupNameYouWantHere]" to the select menu's option value you can give users the ability to use any number of groups that you have listed in the select menu.

    [{idlabel}] will not work as the { and } braces are illegal characters. You should stick to Letters and numbers only to avoid conflicts with the javascript.
  • 5 Marco Bertorello // Feb 14, 2010 at 10:46 PM
    For e107 users, I've found a way to have automagic grouping using shadowbox/lighbox, using e107 shortcodes, ex:

    <option value="shadowbox">Shadowbox</option>
    <option value="shadowbox[{NEWSTITLE}]">Shadowbox Group</option>

    for a full list of usable shortcodes:

    http://wiki.e107.org/?title=Category:Shortcodes
  • 6 Josh // Mar 3, 2010 at 7:02 PM
    I got it all setup correctly, thanks Mark for this great post!

    Now I am playing with shadowbox, and curious how or if its possible to create a html popup within the Mango admin using shadowbox features or not using shadowbox features.

    Any ideas

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog

trabeated-promotion