The Joomla! Forum ™

Hi,

Is there a module compatible with joomla 1.5 in order to show images (when clicked) acording to lightBox 2? I founded one for joomla 1.0.x but it doesnt work. There is any other way to do that?

Thank you,

Morty

Hi,
I didn't get any answer, so I did some research by myself and tried to integrate lightbox 2 into my joomla template, and I think all went pretty well until I started editing content with the wysiwyg editor, (JCE or the other), and the problem is that because of the "cleanup messy code", that starts automaticaly, I can not set the rel="lightbox" after the link...
I don't know what to do...
Any ideas?
Thanks!

Morty

SOLVED:
HOW TO USE SLIMBOX/lightbox in JOOMLA 1.5 RC3 [in your template]
I managed to do it, with SLIMBOX, and Joomla 1.5 RC3, it's quite simple after all.
STEPS:
1. Download SlimBox Files http://www.digitalia.be/file_download/8
    Put them (the folders) in your template's folder
2. Open your TEMPLATE index.php

    Add in the header the following codes:




3. Upload your modified files to your server

4. Go to the admin panel. If you are using the TinyMCE as editor, you need to add rel , as an accepted html code so the editor doesnt strip it out.

We need also to modify one file in order to disable the automatic messy code cleanup:
In the original post I did it by another way that resulted to make some readmore links dissapear. Now thanks to the help of Tia (uroboros) we have another way, much more cleaner...

GO TO /plugins/editors/ and open with the word pad (or any other simple text editor.. or php editor), the tinymce.php
and search for "extended_valid_elements" (without quotes), you need to add the rel  to the accepted lines:

And add the rel  as showed below:


Now save your tinymce.php and upload it to your server (in the same location /plugins/editors). Overwrite the existing file in your server.

5. Once you are editing one article and want the slimbox/lightbox to work, just ad in the code rel="lightbox"
Example:



For sets of related images that you want to group and make navigable, add a group name to the rel attribute after “lightbox”:

imagen 1
imagen 2
imagen X


And that is all! [Be careful not to use the CleanUp messy code Button in the Editor, because that will make you loose the rel="lightbox" that you wrote.

I hope I was clear enaugh,

See you!

Morty

PS: Warn me if there is any error or if someone couldn't do it following my steps, thank you!

I followed your instructions but for some reason tinymce is still stripping the code from the html despite having disabled this option in the admin back-end. Any suggestions?

Hi,
Yes, sorry, I forget something, i I will update as well the How To Post.
In order to disable the tinyMCE automatic cleanup (only the AUTOMATIC), the button will still work, we need to modify some code:

1. GO TO /plugins/editors/ and open with the word pad (or any other simple text editor.. or php editor), the tinymce.php
and search for "cleanup" (without quotes), you need to change 2 lines of code to FALSE: (is the only thing you need to change)

Use the search box to go until the nexts cleanup words (there are some you dont need to change. You only have to change true to false in two lines)



Now save your tinymce.php and upload it to your server (in the same location /plugins/editors). Overwrite the existing file in your server.

And Now, it will work. Sorry for forgetting that.

i've been trying to figure this out.
after following ur instructions lightbox DOES work.....unfortunately, its skrewed my my "read more" links and front page articles now appear in full with the posts using lightbox - looks like its replacing read more links with a horizontal rule.

any ideas ?

tia.

Mmm, are you sure it's because of this? I mean, maybe you touched something else...
It dependes also on what kind of template are you using, I supose...
If you give me that information I can try to reproduce your bug and try to figure out what is wrong,
I need the joomla version you are using (wether is RC3 or a Nighty build) and if possible, a Link to download your template.
And also the link to your website to see the problem (if you have still instaled the lightbox/slimbox effect).

I had no problems with it in other pages I am building, But i did not use the "read more links", but I will give it a try,

See you,

Martin

it has something to do with the edits to the tinymce.php file, i'm assuming, since i have gone back and updated (basically i just opened to edit, made NO change, then saved again) other posts that have no images in them at all and the read more link is converted to a horizontal rule there too.

i definitely touched nothing but the template index.php file and the tinymce.php file as per the exact instructions above.

i'm using a nightly build from a few weeks back (oct. 26)
template is a heavily customized one based on the tbc_fivepoint_unity template entered in the j 1.5 template contest.

I am working on it. I can see the problem.

I am having problems makin this work.

I have done exactly as you say.

Say I have a link to an image with rel="lightbox[whatever]" , the rest of the site disappear, and I am pointed directly to the image file (like there would be no rel at all).


I have put out an example for this here: http://osdl.no/index.php?option=com_con ... d=12:07-08


A buddy of me made this working fine (the way you described), but his site is using RC1, don't know if that's the catch, or whether it's something wrong with my template (Siteground, participant of the Template Competition).

The problem is with the tinyeditor.php,
When we change the code in order not to do the cleanup, it does not change either  the code for the pagebreaks or readmore, and also it affects all the site.

I'll try an alternate solution to turn down the cleanup messy code, without affecting the whole system in the "readmore" links.

By the moment, you can turn back the code of tinymce.php to the originals, and re-update the file.

Let the rest of the modification process as it was, and in order not to Loose the rel="lightbox" edit your articles without the editor (html mode). You can set up another account (other than administrator) and set in the global settings "no editor" for that account, and then log in in the system to edit those articles that have images with lighbox... and never edit those with tinymce. I know it's kind of tricky, but that's a temporary solution until I figure out how to do that (me or anybody else who wants to help... I would appreciate some help in here as well).


As I said I am working on it,

Martin

I am not using the tiny mce. I wrote the article with the editor disabled in global.

Sorry Hogne,
The answer was concerning the problem described by tia,
As far as I can see from your test, either the rel="lightbox" is disapearing or as you wrote, maybe you are using the wrong parameters.
I made it work with a nigthy build;

Example:

image #1

I can not see what the problem is, but i think you are loosing the rel="lightbox", you disabled the editor in global, so then are you writing directly in html code??

Okay.

No, the rel tag is not disappearing. As you can see in the source code on the page that I linked to (http://osdl.no/index.php?option=com_con ... d=12:07-08), the rel tag remains, but still, the link just acts as a regular link.

Yes, I am writing in plain html.

Ok, I figured out what the problem is.

It is one of the js-files that are loaded by the Siteground template (png.js) that kills the slimbox js.

I will report this to Siteground.

ok, i may have this working after searching thru a bunch of tinymce + rel results on google.

open tinymce.php
search for extended_valid_elements.

u'll find



add rel as below


* save and u should (crosses fingers) have lightbox functionality with wysiwyg assuming u've uploaded as per the original post and added your code to the template index.php as described by morty.
* i also undid the edits having to do with code cleanup in tinymce.php - they seem to be unnecessary and created new issues with the readmore links.

That's it,
that is the correct way Tia, !!!
It works and we preserve the readmore links that need the cleanup feature to be reedited and work propertly /I don't lnow why/.

I will update the How To post,

Thanks!!

Hi,

I'm right back at the very start! But just to be clear:

You say download the slimbox files, and put them in the template folder. The Slimbox files are in two folders (CSS and JS). The template folder alreday contains a folder named CSS. So putting the Slimbox CSS folders in the template folder would overwrite the existing CSS folder. Yes?

So should I copy the files out of the Slimbox CSS folder and put them in the template CSS folder?

Cheers!

No, It's not going to overwrite anything. You also can put them in no matter what folder,  but just be careful to use the correct path when calling the *.js and the *.css . The names of the files are different. So you will have template.css, other css, and then Slimbox.css

If you have any problem let me know,

Cheers,

Martín

Actually, no. No files will be replaced in that folder, unless there is a file with the very same name as the one in the folder you're trying to put in there.

So if you have, say the css folder on the remote server, and one css folder locally on your desktop (or wherever). The local folder contains slimbox.css, and the remote folder contains template.css, ie6.css and ie7.css. What happens if you copy the css folder from your local computer and into the remote server, the slimbox.css will be added to the css-folder, while all the files that were already in it, remains.

Your new remote folder would, in this case, contain (after the copy):

- template.css
- ie6.css
- ie7.css
- slimbox.css

(Hogne, thanks for the folder clarification. I should know that, but I didn't think it through.)

I seem to have the same problem that Hogne had earlier when all that happened was that clicking on the thumbnail opened the large image in a new window - in other words, slimbox/lightbox failed to execute. Hogne thought this was a template specific problem. I wonder, how was it resolved.

I have tried to follow morty's instructions in two templates (rhuk_milkyway and in fivepoint-unity - one of the Joomla 1.5 template competition entries). Neither was successful.

I can't show you a site because I'm using xampp on my pc, but here's the HTML code:



And here's the code from the header of the template's index.php file:







I put this in just before the closing head tag.

Notice the path for mootool.js is slightly different from what morty posted. I've put the js folder in the path. But with or without it still doesn't work.

All suggestions gratefully received.

To call the Slimbox css and js the code should be the following:



Though, I think the mootools code will automatically be put in if you include this in your head:


Check whether these two pieces of code are included, if you include the above in your head:
, cause I think they are.

Also, the correct a-tag for opening an image with the slimbox is:

Hi - could some one please help. I'm working on a site using Joomla 1.5. The last week i have been searching the web for a functional AJAX Lightbox/Lightwindow solution. I thought i had tried em all, without luck, until i came across on this.

I followed the instructions, changed the tinemce.php file, uploaded the css and the js-file, and remembered the rel code. But fore some reason it still doesn't work. I've checked that it loads the proper files and gets the linking code right. Could it be that the charset is set to utf-8???

this is the site:

http://www.republikken.net/index.php?op ... &Itemid=87 - it's the "image #1"-link

Please help!!! 

Hi,
just read again the instructions... maybe you missed something.
Have you included the mootools like I described above?? That is something you can easily forget if you made copy and paste...

Cheers!

there is your bug i think

you put that:



while you need to put that:



because the css file needs to be in your template's folder, and you need to call it propertly. . I hope this is it...

And also, dont call the js like that

 

but like that

 


cheers!

Wauv - Thx for your quick reply - At the moment i'm calling the files with this code...







" ; ?>

I've checked, with firefox, whether i'm getting the files included in my download -  an it seem so. They are on the list. And when clicking on them the open.

When changing it to:

id ) { initEditor(); } ?>






" ; ?>

..nothing happens.

I don't know much about JaveScripting , but does it need "rel="lightbox"" instead of rel="lightbox" in the sourcecode??? That could be it?

THANK YOU, THANK YOU, THANK YOU! You have no idea how long it took me to find a solution and you just made it seem like it was easy! I bow to you, seanbbb! *bows*

Hi There,

Sorry to re-open the issue box... but i've been trying to get lightbox to work for sometime and without success. for some reason TinyMCE keep messing up the url resulting in:

"...tv-guide.png%20rel=%22lightbox%" (note, i only quoted the messy part)

Here's what i did:

1. Turned the auto cleanup in the TinyMCE mambot off
2. added the rel to the "extended_valid_elements" (below is the entire code line from my tinymce.php:



3. Updated the "cleanup" to false:



4. Changed the 2nd cleanup to false:


Any ideas?

Thanks,
Eyal

_________________
Eyal Kattan

Just wanted to post an update as I was able to get it to work. Unfortunately, you will have to switch between TinyMCE and non WYSIWYG editor as was mentioned earlier.
At first it seemed very annoying however after the third image it became pretty easy.

Here are the steps I took:

1. Upload all of your thumbnails and large images into JOOMLA (Media Manager or FTP client)
2. Install and configure whichever lightbox you want. I use Lytebox since they consolidated all of the java scripts into one file. Ensure to modify to CSS to match your site hierarchy
3. Create your content items in TinyMCE including the thumbnails and save them. You can create the links to the larger images if you want, but then you will have to clean some extra code that tinyMCE inserts. Personally I found out it's much easier to ensert the links later on.

At this point, if you haven't done so already, you may want to create a 2nd user account and configure it to use the text editor (non-tinyMCE).

4. Login with your "text" account.
5. Edit your content item and add the links to the larger images with the rel="lytebox" property. your code should looks something like this:



6. Once you saved it and completed all of your content items, you can switch back to the WYSIWYG account and continue to edit your content. As long as you don't try to edit your images with tinyMCE, your links would be untouched even if you edit your content and save it with tinyMCE.

Thanks,
Eyal

_________________
Eyal Kattan

Aww!!! I have the same problem with seanbbb, and Hogne has the answer but I just can't view the code written by Hogne, can Hogne or anyone solve it for me ? pls pls pls

I have found the solution lastly, try replace the $mosConfig_live_site to $this->baseurl