Simple way of opening images to Lightbox window with TinyMCE

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

Simple way of opening images to Lightbox window with TinyMCE

Post 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!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

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

Post 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...
liudaz

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

Post by liudaz »

Thanks a lot. This helped for me and for my clients! ;)
Merteuil
New Member
New Member
Posts: 3
Joined: Sat Jun 13, 2009 4:14 pm

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

Post 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!
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

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

Post 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.
resistem
Forum Members
Forum Members
Posts: 28
Joined: Thu Oct 25, 2007 6:41 pm

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

Post 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.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

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

Post 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.
resistem
Forum Members
Forum Members
Posts: 28
Joined: Thu Oct 25, 2007 6:41 pm

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

Post 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?
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

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

Post 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.
resistem
Forum Members
Forum Members
Posts: 28
Joined: Thu Oct 25, 2007 6:41 pm

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

Post 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!
lucid
Forum Members
Forum Members
Posts: 29
Joined: Mon Nov 12, 2007 2:48 pm

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

Post 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.
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

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

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

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

Post 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...
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

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

Post by buntrosgali »

so how do i go about doing that?
buntrosgali
Forum Members
Forum Members
Posts: 167
Joined: Thu Apr 17, 2008 9:02 pm

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

Post by buntrosgali »

sorted it cheers ;)
Locked

Return to “Tips and Tricks”