Ok, sorry. I understand you are new at this. The code example I gave is meant to go straight into the post source. To do that, you need to edit your post (or page) in the HTML tab. That tab should be visible on the top right hand side of the content editor box.
If you want to stick to the Visual editor tab (I can understand that HTML might be too confusing) then here is an example:
Let's say you want to insert a thumbnail image, for example https://blogs.comm.psu.edu/shanksville/wp-content/uploads/2011/10/KatRodriguez1_ccr-150x150.jpg with 150x150 pixels and you want it to link to the page http://ccr.live.communityq.com/etc/20111006_august_music_web/_files/iframe.html opening up in a FancyBox lightbox frame... Follow these steps:
1. Open the page for editing and go to the place where you want to insert the image/link.
2. Click the image icon next to Upload/Insert (left hand side above the editor box) and in the dialog that opens, select your image from the Media Library list. (Re)place the URL that you want to link to in the Link URL field, then choose Align: Left and Size: Thumbnail and hit the Insert button.
3. Click the freshly inserted thumbnail and click the little image icon that appears on the top left if the thumbnail.
4. In the new dialog, click the Advanced Settings tab and scroll down to the CSS Class field. Fill in fancybox-iframe and hit the Update button.
This should result in a image/link source code (visible in the HTML tab) like this:
<a class="fancybox-iframe" href="http://ccr.live.communityq.com/etc/20111006_august_music_web/_files/iframe.html"><img src="https://blogs.comm.psu.edu/shanksville/wp-content/uploads/2011/10/KatRodriguez1_ccr-150x150.jpg" class="wp-something alignleft" /></a>
WillYurman
