Image Hosting Website Script Deactivates FancyBox Capability

Question

I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.

My question is one of two things:

a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.

or

b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.

Thank you and please reply if you would like more information!

score 0 · Answer 1 · answered Mar 11 '13 at 00:38

0

Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.

If you are binding fancybox like

$(".fancybox").fancybox();

... you could force the type of content to image like

$(".fancybox").fancybox({
   type : "image"
});

I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.

answered Mar 11 '13 at 00:38

JFK

40,963
31
133
306

I'm attaching the link to my forum so that you can see what I'm talking about through the examples I've posted. ** http://idenitties.com/ ** You will see three posts, with the most recent on top, with descriptions within each of them of how the image was attached. --The most recent post (on top) has an image uploaded the FileUpload plugin. FancyBox works fine. --The middle post (second down) has an image uploaded via PostImage.org using their thumbnail code for a website. It causes all posts below it to not open with FancyBox or not open at all. --The oldest post (last) is now screwed up. – aspiring-non-newb Mar 11 '13 at 17:19
I think your issue is in this function `$("img, a > img").not().each()`, which suppose to wrap the images in `` tag with `class="fancybox"` ... so you still would need to add to your fancybox script `"type":"image"` AND check the following post since you are using fancybox v1.3.4 and that version doesn't support dynamically added elements http://stackoverflow.com/a/9084293/1055987 .... I guess you site requires more work than expected because the function mentioned above would need to be re-written – JFK Mar 11 '13 at 17:47

Image Hosting Website Script Deactivates FancyBox Capability

1 Answers1