Image with Lightbox effect using WYSIWYG editor

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
Wilmar
Forum Members
Forum Members
Posts: 15
Joined: Wed Jul 23, 2008 9:30 am

Image with Lightbox effect using WYSIWYG editor

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

Re: Image with Lightbox effect using WYSIWYG editor

Post by KO »

Here is one way http://forum.cmsmadesimple.org/index.ph ... 919.0.html

Try it if it's easy enough your client.
User avatar
Wilmar
Forum Members
Forum Members
Posts: 15
Joined: Wed Jul 23, 2008 9:30 am

Re: Image with Lightbox effect using WYSIWYG editor

Post 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.
User avatar
Wilmar
Forum Members
Forum Members
Posts: 15
Joined: Wed Jul 23, 2008 9:30 am

Re: Image with Lightbox effect using WYSIWYG editor

Post 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:

User avatar
Wilmar
Forum Members
Forum Members
Posts: 15
Joined: Wed Jul 23, 2008 9:30 am

Re: Image with Lightbox effect using WYSIWYG editor

Post by Wilmar »

I tried this one, but that does not insert the "tumb_" in the IMG SRC=
Connie

Re: Image with Lightbox effect using WYSIWYG editor

Post 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
pamelina
Forum Members
Forum Members
Posts: 69
Joined: Mon Nov 05, 2007 4:05 pm

Re: Image with Lightbox effect using WYSIWYG editor

Post 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.
pamelina
Forum Members
Forum Members
Posts: 69
Joined: Mon Nov 05, 2007 4:05 pm

Re: Image with Lightbox effect using WYSIWYG editor

Post by pamelina »

Thank you.
Connie

Re: Image with Lightbox effect using WYSIWYG editor

Post by Connie »

This Lightbox-Integration is online here in the Forge  :)

I forgot about that:

http://dev.cmsmadesimple.org/projects/image-effects
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Image with Lightbox effect using WYSIWYG editor

Post 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...
nicmare
Power Poster
Power Poster
Posts: 1150
Joined: Sat Aug 25, 2007 9:55 am

Re: Image with Lightbox effect using WYSIWYG editor

Post 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 :(
Connie

Re: Image with Lightbox effect using WYSIWYG editor

Post 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
Post Reply

Return to “Layout and Design (CSS & HTML)”