Page 1 of 2

Simple way of opening images to Lightbox window with TinyMCE

Posted: Wed Aug 20, 2008 8:39 am
by KO
There is 3 things you need to do to get it working. 1. Add needed Javascript and CSS to your template, 2. configure TinyMCE and 3. teach the editor how it works. This is done in CMSms 1.4.1 and TinyMCE 2.4.5.

1. Add needed JS and CSS to you templates
There is few ways to do this and one of the simpliest is to use Calguys Lightbox module. Install it as well needed CGextensions module. Add {LightBox action='css'} and {LightBox action='js'} to head of your page templates like in instructions. If you need to configure something open action.js.php file in /modules/Lightbox directory. There is also other ways to do this.

2. Open in CMSms Admin "Extensions" -> "TinyMCE..." and look for "advanced" tab. Add:

Code: Select all

extended_valid_elements : "a[name|href|target|title|onclick|rel]",
to "extra configuration" textarea and save.

3. Add thumbnail image or text normal way to your page. Select that and press "add link" button and browse to make a link to larger image and from "advanced" tab look for "Relationship page to target" and select "lightbox". Save/apply and you should be all set to test it.

Remember that lightbox uses scriptaculous/prototype library and you will most likely run into problems if you are using mootools, jquery or some other library at the same time. For those you need to find other suitable modal window JS.

Hope ithis works for you!

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Wed Aug 20, 2008 8:47 am
by Dr.CSS
Thanks...

You can also add the {LightBox action='css'} and {LightBox action='js'} to just the page you are using this in by adding it in the Options tab Metadata box...

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Fri Apr 24, 2009 10:41 am
by liudaz
Thanks a lot. This helped for me and for my clients! ;)

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Mon Sep 21, 2009 9:51 pm
by Merteuil
Thanks this was all very helpful, at least up to step 3, which is the one where you lost me  ;D

I have to admit that I am really no pro in this area, I am setting up a website for my University's Drama Society and I am trying the best I can ... So bear with me  ;)

What I don't understand is what do you mean with

"select that and press "add link" button and browse to make a link to larger image and from "advanced" tab look for "Relationship page to target" and select "lightbox"."

I have inserted the thumbnail as a normale image with in a "normal way" as said in the instructions, but I don't quite know where and how to select and press the "add link" button? Are we still talking content editor of the page you want to put your lightbox on? In which case I can't really find an "add link" button ... I'm sorry if this question may sound stupid, but as I've said, I am a total newbie to all of this ...  ::)

Thanks for any help!

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Tue Sep 22, 2009 12:17 pm
by KO
So you got your small "thumbnail" image there. Select that image by clicking it and then look for button "add link" on editor that looks like chain or number 8 sideways. When you hover on top of it it should bring "add link" title visible. Click on it, select the large image from where ever it is on your webserver (use BROWSE on right at link URL) and follow the instructions to "advanced" tab and  select from "Relationship page to target" drop down "lightbox"

Hope this helps you further. In this step all done at TinyMCE editor.

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Mon Oct 05, 2009 6:20 pm
by resistem
With newer versions of the CMS (1.6.5 is the one I currently use) I found a problem with this part:
KO wrote: 2. Open in CMSms Admin "Extensions" -> "TinyMCE..." and look for "advanced" tab. Add:

Code: Select all

extended_valid_elements : "a[name|href|target|title|onclick|rel]",
to "extra configuration" textarea and save.
Every time I added that code the WYSIWYG stopped working, but then I realized that this code apparently isn't neccesary for version 1.6.5. Just wanted to point that out in case someone else run into the same "problem" as me.

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Tue Oct 06, 2009 7:50 am
by KO
I just tried this with 1.6.5 and it has changed at some point but fix is easy. You just remove the last comma at the end.

Code: Select all

extended_valid_elements : "a[name|href|target|title|onclick|rel]"
Be careful that you don't add any extra linebreaks (or commas). That can break your WYSIWYG. Even if that box is empty, you hit enter there and then "save advanced settings" - your WYSIWYG is gone. So no linebreaks at the end of the line.

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Tue Oct 06, 2009 6:29 pm
by resistem
Great, thanks. I've still gotten it to work without adding that line but I guess it's better to have it there.

But now that we're solving problems - any ideas on how to group images together so I can get the Next and Prev links to appear without having to turn off the WYSIWYG and code it myself?

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Wed Oct 07, 2009 10:10 am
by KO
I must say that I have not played much with TinyMCE lately so it can be part of it by default. You're probably right.

Groups - good question.

One way would be to use Album module. This is not really TinyMCE related but it's CMSMS module so it should quite easily to get working in page and actually that's how I would deal with it.. There is probably other modules also nowdays to do same thing.

Another would be to change TinyMCE and this link could help more. http://tinymce.moxiecode.com/punbb/viewtopic.php?id=13162 But that's then TinyMCE issue and not CMSMS issue. And next time you upgrade you CMSMS (and TinyMCE) those edits will be probably overwritten.

Maybe some third way by modifying links with rel="Lightbox" with javascript.

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Thu Oct 08, 2009 6:45 pm
by resistem
I edited the TinyMCE module as suggested in that link you sent, thank you very much for pointing me in the right direction!

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Sun Nov 15, 2009 9:39 am
by lucid
that's FANTASTIC!

Thanks for the great post and making it really easy for end-users to load up a Lightbox. Fits in so well with CMSMS.

Once note. I have multiple templates for site where this maybe used and I just added {LightBox action='css'} and {LightBox action='js'} in the "Global Metadata" section [siteadmin - > global settings - > global meta data"].

Also a good point to remove the debug messages from the action.js.php.

Thanks again.

Lucid.

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Sat Mar 20, 2010 10:06 pm
by buntrosgali
Wonder can you guys help me. I am trying to add a lightbox image to my new site, and have been following the directions above. I think i have it mostly right but the lightbox isnt loading.

Here is my site

my site

if you click the small image you will see it is loading the bigger image but it is loading it in a different page.

here is the top half of my template

{process_pagedata}

{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

 
    {sitename} - {title}
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}


{LightBox action='js'}
{LightBox action='css'}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}

=b){nw=b+"px";}if(w

   
   
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
   
   
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

   
   





   
{* The above JavaScript is required for CSSMenu to work in IE *}
 



 

since i installed the module i  have attached this stylesheet to my template LightBox Sample CSS

but i have not added the .js file or anything to the template. Do i have to?

any help would be very much appriciated i need this site live by monday.

Cheers

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Sat Mar 20, 2010 10:30 pm
by Dr.CSS
Lightbox or anything like that is very much in need of JS being added to the page or template you use it in...

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Sat Mar 20, 2010 11:01 pm
by buntrosgali
so how do i go about doing that?

Re: Simple way of opening images to Lightbox window with TinyMCE

Posted: Sun Mar 21, 2010 2:14 pm
by buntrosgali
sorted it cheers ;)