tinymce and colorbox and inline images I have a blog, I am developing and using the following plugins, but I am not committed to them and will change to get the behavior I want.


TinyMCE
Wysiwyg
Colorbox
Media


In many blogs I see inline images that are small and when they clicked on then expanded in a colorbox.

I am curious how to achieve this using drupal 7 and uploading images using the media module?
There are two approaches I know to make inline images in WYSIWYG editors open in Colorbox. The one which I used in my last project was inserting images with Insert module. Which requires you to add an image field to your content type and upload your images to that field and than insert them with any image settings (instead of uploading them via the Media button on the editor).


  Insert is a utility that makes inserting images and links to files
  into text areas or WYSIWYGs much easier. It adds a simple
  JavaScript-based button to FileField and ImageField widgets. When used
  with ImageField and ImageCache, images may be inserted into text areas
  with a specific ImageCache preset.


This approach allows you also to get the images with Views etc, since they are actually stand-alone fields.

The second approach is adding a CSS class to the inline image uploaded via the media button. I'm not quite sure about how and which class but I did use this approach a few years ago and back then the mentioned modules had their 7.x-1.x versions, still. I was looking for the current state of using this approach but didn't find anything new. I'll experiment it a bit and write here.

Edit: After investigating about an hour, couldn't find any better way than the approach with the Insert module. It's the best user experience among all other approaches, if not still perfect.