Hi, you are inserting some kind of mix between a link and iframe embed on your page. With or without fancybox, this will never work properly. FancyBox can only be attached to proper links. In your case (wanting to display a new web page inside FancyBox) you will have to use the iframe class to make open in iframe mode, and use the src url as href:
<a class="fancybox-iframe {width:480,height:320}" href="http://ccr.live.communityq.com/etc/20111006_august_music_web/_files/iframe.html">soundslide august 6th 2011</a>
Hi,
Thanks for the quick answer. I guess i’m still a little confused about how Fancybox works – I thought the embed code for the piece would work.
But in any case, I tried the code you created (thank you). Everytime I paste it into the Link URL box for the image, and click update it disappears. I’ve got two other images that work fine as just images:
https://blogs.comm.psu.edu/shanksville/?p=100
But I can’t get this code to stick on the first image.
any idea what I’m doing wrong?
thanks again,
will
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-150×150.jpg with 150×150 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>
wow. Thank you. That worked, and I really appreciate you taking the time to write it all out for me. It was putting the fancybox-iframe in the CSS Class field that I had totally missed.
anyway, it works great. Thank you again.
Will
