Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Use jQuery Fancybox in DiscussionExcerpt2

Does anyone know how to modify the DiscussionExcerpt2 plugin so that the jQuery Fancybox plugin works in the excerpt and not just after you click on the post? Not a huge issue if there is no easy solution.


  • I have been searching through everything for this, any guidance would be a life saver.

  • When I add this to the top of the discussionexcert2/default.php:
    <html> <head> <script type="text/javascript" src="/plugins/VanillaFancybox/js/jquery.fancybox.pack.js?v=1.1"</script> <script type="text/javascript" src="/plugins/VanillaFancybox/js/jquery.easing.pack.js?v=1.1"</script> <script type="text/javascript"> $(document).ready(function(){ $("a:has(img)").fancybox(); }); </script> <link rel="stylesheet" type="text/css" href="/plugins/VanillaFancybox/style/jquery.fancybox.css?v=1.1" media="all" /> </head> </html>

    the Fancybox appears on the excerpt list but it messes up all the formatting of the page. Everything got bigger. Did I specify the wrong type of file within $("a:has(img)")? Any clue?

  • Actually, I've just copied the source code from one of the individual discussion posts page and pasted it within the /DiscussionExcerpt2/default.php right at the very top. This is now what the beginning of the default.php looks like. Am I placing it in the wrong place? Could that be what's causing it? (formatting on page is still messed up, don't know why this caused it) (url is

    <html> <head> <link rel="stylesheet" type="text/css" href="/plugins/VanillaFancybox/style/jquery.fancybox.css?v=1.1" media="all" /> <script type="text/javascript" src="/plugins/VanillaFancybox/js/jquery.fancybox.pack.js?v=1.1"</script> <script type="text/javascript" src="/plugins/VanillaFancybox/js/jquery.easing.pack.js?v=1.1"</script> <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("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\" 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" : true, "changeFade" : 0, "autoDimensions" : false }); }); </script> </head> </html>

  • screw that attempt. I don't believe it's the right way to go. Instead, I feel like changing a piece of code within /js/global.js, the jQuery image section at the very bottom, might be the correct way to fix this. This is the code I pasted in there to allow images to open in a new window when clicked. Instead, I obviously want this code changed so that they open in a Fancybox when clicked. Sorry for all the clutter:

    // Shrink large images to fit into message space, and pop into new window when clicked. // This needs to happen in onload because otherwise the image sizes are not yet known. jQuery(window).load(function() { var props = ['Width', 'Height'], prop; while (prop = props.pop()) { (function (natural, prop) { jQuery.fn[natural] = (natural in new Image()) ? function () { return this[0][natural]; } : function () { var node = this[0], img, value; if (node.tagName.toLowerCase() === 'img') { img = new Image(); img.src = node.src, value = img[prop]; } return value; }; }('natural' + prop, prop.toLowerCase())); } jQuery('div.Message img').each(function(i,img) { var img = jQuery(img); var container = img.closest('div.Message'); if (img.naturalWidth() > container.width() && container.width() > 0) { img.wrap('<a href="'+$(img).attr('src')+'"></a>'); } }); // Let the world know we're done here jQuery(window).trigger('ImagesResized'); });

  • kirkpa31kirkpa31 ✭✭
    edited February 2013

    Figured it out!!!!!

    I can't describe how relieved I am, yet also incredibly annoyed I am based on what I've done and how easy it was.

    Sorry for clogging up this page with my thought process.

    All that needed to be done was:

    1) Open /plugins/VanillaFancybox/class.vanillalightbox.plugin.php

    2) Add 'discussionscontroller' on line 50 after it asks for the pages the plugin will show on.


    I'm embarrased.

  • 422422 Developer MVP

    great, been fun watching your journey. Even better you resolved it, well done

    There was an error rendering this rich post.

  • phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP

    yeah. show us your site kirkpa31 if possible.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • kirkpa31kirkpa31 ✭✭
    edited February 2013


    still a work in process

Sign In or Register to comment.