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