Page 1 of 1

Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 10:14 am
by Wilmar
Hello,

My client is not a very experienced computer user. So I won't learn him to use smarty tags in the content field. I just want him to insert an image using the image button of the TinyMCE editor. Then in the content I want the thumbnail to show and with a click on the thumbnail the big picture shows up with the lightbox effect.

Is this possible (afaic it would be great to have this as a standard CMSMS feature!)

I think it's actually adding "thumb_" to the src tag and remain de href tag intact, but I don't know how to do this.

Thanks in advance for any reply

Wilmar

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 10:38 am
by KO
Here is one way http://forum.cmsmadesimple.org/index.ph ... 919.0.html

Try it if it's easy enough your client.

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 10:47 am
by Wilmar
KO wrote: Here is one way http://forum.cmsmadesimple.org/index.ph ... 919.0.html

Try it if it's easy enough your client.
I tried that one, but as soon as I insert the then the extended_valid_elements tag in the configuration field the whole editor stops working and I get a HTML editor.

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 11:02 am
by Wilmar
Wilmar wrote:
KO wrote: Here is one way http://forum.cmsmadesimple.org/index.ph ... 919.0.html

Try it if it's easy enough your client.
I tried that one, but as soon as I insert the then the extended_valid_elements tag in the configuration field the whole editor stops working and I get a HTML editor.
I reinstalled TinyMCE and now that works. But this method still is a bit difficult because the TinyMCE editor doesn't show the thumbnails as an image to choose. And the link button which in the second step has to be clicked to make the link to the final lightbox image doesn't show thumbnails for preview.

I just need something that automaticaly replaces this:



With this:


Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 11:42 am
by Wilmar
I tried this one, but that does not insert the "tumb_" in the IMG SRC=

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 2:00 pm
by Connie
There is a lightbox-Plugin for FCKEditor, but unfortunately nobody here loves that Editor ...

if you work with FCKeditor, I could give you the plugin and tell how to integrate it

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 3:54 pm
by pamelina
@Connie,

My main wysiwyg editor is FCKeditor, it is very awkward that I have to switch between FCKeditor and TinyMCE
all the time in order to make LightBox effect.
I would appreciate to learn more about your option.
Thank you.

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 3:57 pm
by pamelina
Thank you.

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 5:37 pm
by Connie
This Lightbox-Integration is online here in the ForgeĀ  :)

I forgot about that:

http://dev.cmsmadesimple.org/projects/image-effects

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Tue Aug 04, 2009 6:07 pm
by Dr.CSS
To make a thumb link to larger image, first make sure you have thumbs, make them yourself or open the folder to see images in image manager and it will make thumbs for you...

In tiny admin tick the show thumbs option, in page click add image and find the thumb, click the thumb and hit the add link button, browse to large image then in the advanced tab go to relationship to page drop and select lightbox, as long as you have the lightbox JS and CSS in the right places it will work...

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Wed Aug 05, 2009 3:25 pm
by nicmare
Dr. CSS wrote: To make a thumb link to larger image, first make sure you have thumbs, make them yourself or open the folder to see images in image manager and it will make thumbs for you...

In tiny admin tick the show thumbs option, in page click add image and find the thumb, click the thumb and hit the add link button, browse to large image then in the advanced tab go to relationship to page drop and select lightbox, as long as you have the lightbox JS and CSS in the right places it will work...
is there any way to have it more "automatically"?
For example: i add thumb_image.jpg through "insert image" button of tinymce. and cmsms should automatically detect the large image by trimming the file name of thumbnail by erasing the prefix "thumb_" and also add the lightbox rel attribute to the link? sounds not that difficult?! :D maybe it makes more sense if we add a button to tinymce tools for e.g. "lightbox image". with extra button we can straight choose the large image and the function looks for a image with same filename but thumb_ as prefix? something like this would be AWESOME! but im not that skilled for coding such a function :(

Re: Image with Lightbox effect using WYSIWYG editor

Posted: Wed Aug 05, 2009 3:32 pm
by Connie
don't mix the functions of the editor with the CMS ;=)

if you use TinyMCE the detecting of the original big image would be a job for TinyMCE
you can check the homepage of TinyMCE if there are plugins like that