Image Hosting Website Script Deactivates FancyBox Capability

kirkpa31

THIS IS MY LAST FANCYBOX ISSUE, HOPEFULLY LAST ISSUE OVERALL:

Users have two easy ways to submit a photo on their post: FileUpload plugin and direct link via ButtonBar plugin. 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.

I have included my forum: idenitties.com

I have posted 3 examples of what I am talking about with descriptions within each post of the issue.

---

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!

kirkpa31

I'm 99% sure, based on prior experience, that all I have to do is modify the /VanillaFancybox/class.vanillalightbox.plugin.php file, only I can't seem to figure out how/where to add the code specifying that each image on the page gets picked up by FancyBox.

vrijvlinder

you may be able to use the config.php to blacklist certain tags or whitelist the accepted one. or you could add a script to strip the images of certain tags
$str = strip_tags($str, '< a >< script >< img > ');

/**
     * Remove image tags from a string.
     *
     * @param   string  string to sanitize
     * @return  string
     */
    public static function strip_image_tags($str)
    {
        return preg_replace('#< img\s.*?(?:src\s*=\s*["\']?([^"\'<>\s]*)["\']?[^>]*)?>#is', '', $str);
    }

or

// HTML already parsed into $dom
$imgs = $dom->getElementsByTagName('img');
$img_src = array();

// Array of nodes to remove.
$to_remove = array();

foreach ($imgs as $img) {
  // Store the img src
  $img_src[] = $img->getAttribute('src');

  // Delete the node (I think this works)
  $to_remove[] = $img;
}

// Then remove all the nodes slated for deletion:
foreach ($to_remove as $node) {
  $dom->removeChild($img);
}

or

$string = strip_tags($string,'< b >');
$dom = new DOMDocument();
$dom->loadHTML($string);
$allowed_attributes = array('id');
foreach($dom->getElementsByTagName('*') as $node){
    for($i = $node->attributes->length -1; $i >= 0; $i--){
        $attribute = $node->attributes->item($i);
        if(!in_array($attribute->name,$allowed_attributes)) $node->removeAttributeNode($attribute);
    }
}
var_dump($dom->saveHTML());

kirkpa31

hmm...I've never thought about that way of "blacklisting" certain things from being posted. I do like it though, looking into it right now. Thank you! I'll let you know how each turns out.

kirkpa31

I'm not having luck with the codes referenced above, however I believe that the only file that needs to be changed in order to accommodate these images by adding a string such as: $("a:has(img)").fancybox();, rather than blacklist them as I have failed at, is as follows:

// The jQuery configs for the Fancybox plugin $FancyboxJQuerySource = ' <script type="text/javascript"> jQuery(document).ready(function(){ function checkImageUrl(url) { return $("<img />") .bind("error", function(event){ return false; }) .bind("load", function(event){ return true; }) .attr("src", url); } $("img, a > img").not("div.Options img, div#Panel img, div.CommentInfo img, a.Title img, a.Photo img, a.ProfileLink img, .emoticon, div.BannerWrapper img").each(function(){ if ($(this).parent().is("a")){ if (checkImageUrl($(this).parent().attr("href")) == true){ $(this).wrap("<a class=\"fancybox\" href=\"" + $(this).parent("a").attr("href") + "\" />"); } else { return false; } } else { $(this).wrap("<a class=\"fancybox\" rel=\"gallery\" href=\"" + $(this).attr("src") + "\" />"); } }); $("a.fancybox").fancybox({ "autoScale" : true, "transitionIn" : "elastic", "transitionOut" : "elastic", "speedIn" : 600, "speedOut" : 200, "padding" : 0, "modal" : false, "overlayShow" : true, "overlayOpacity": 0.4, "overlayColor" : "#666", "opacity" : false, "titleShow" : true, "titlePosition" : "over", "hideOnOverlayClick" : true, "hideOnContentClick" : true, "enableEscapeButton" : true, "cyclic" : false, "changeFade" : 0, "autoDimensions" : false }); }); </script>
';

KevinHamilton

In your javascript code, change:

if (checkImageUrl($(this).parent().attr("href")) == true){
                    $(this).wrap("<a class=\"fancybox\" href=\"" + $(this).parent("a").attr("href") + "\" />");
                } else {
                    return false;
                }

to:

if (checkImageUrl($(this).parent().attr("href")) == true){
                    $(this).wrap("<a class=\"fancybox\" href=\"" + $(this).parent("a").attr("href") + "\" />");
                } else {
                    return true;
                }

The return false; is causing your .each() loop to terminate prematurely.

kirkpa31

omg Thank You @KevinHamilton!!!

This worked perfectly. The image posted through code provided by a hosting site still opens in it's own window, but now the other images are not screwed up and open with the FancyBox.

Can't believe it was that simple. Much thanks!