HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Fancybox Plugin for Vanilla - Feedback

124»

Comments

  • @kypexin - what file did you add this code to, in order to make the Fancybox plugin work with the FileUpload plugin?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    The plugin does not work with up loaders it works with already uploaded content.

    What you need is to add a fancybox class to the image link.

    When you post an image you would need to add < img class="fancybox" or < a

    class="fancybox

    possibly you could add this bit to the upload plugin somewhere but the way the fancybox works is that the image needs to have the class fancybox

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You might be able to add the class using js jquery. Something like this might make all the uploaded and posted images in the discussions open in a fancybox

    < script type="text/javascript" >

    $(document).ready(function() {

    $('.MessageList img').attr('class', 'fancybox');

    });
    < /script >

  • oliverraduneroliverraduner Contributing to Vanilla since 2010 Switzerland ✭✭

    In case anyone wants to contribute to this Plugin, you can find it not on GitHub!

    https://github.com/oliveratgithub/vanillaforums-VanillaFancybox

    Thanks for your support :)

  • peregrineperegrine MVP
    edited January 2014

    a change to file upload plugin to allow fancybox to work with attachments,

    http://vanillaforums.org/discussion/comment/199810/#Comment_199810

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited June 2014

    @masterone

    edited:
    Actually, upon further testing the inline changes cause an issue, so I removed the code.

    but the attached images change does work pretty well as far as I can tell.

    http://vanillaforums.org/discussion/comment/211068/#Comment_211068

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Too bad, but well, it was worth a try. Seems like the development of this plugin has been abandoned, too bad that @hgtonight‌'s Resized Image Lightbox 1.0 doesn't work properly neither.

  • hgtonighthgtonight ∞ · New Moderator

    @MasterOne I don't appreciate you saying my plugin doesn't work, when it does. Please see my reply over here: http://vanillaforums.org/discussion/comment/211093/#Comment_211093

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • oliverraduneroliverraduner Contributing to Vanilla since 2010 Switzerland ✭✭
    edited July 2014

    @MasterOne said:
    [...] Seems like the development of this plugin has been abandoned [...]

    @MasterOne‌ Yes that's true, I am not working on active development of this (or other) plugins anymore. But that's why I took the step and put all the source codes on GitHub, so the community can contribute nonetheless - it already happened that I received Merge Requests which I could successfully approve for Vanilla Plugins.

    Why do I not develop the plugins anymore?

    1. the forum I used to use Vanilla for, is not active anymore

    2. with the ongoing Vanilla Releases and according code changes, it started becoming too time consuming keeping up with new releases, testing and eventually enhancing all the plugins and providing new versions via the Vanilla website (especially in combination with point #1 above)

    But again, feel free to contribute via GitHub! I'll on that regularly and will for sure approve enhancement requests etc.

  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭

    @kirkpa31 said:
    FIGURED IT OUT!!!!!!!!!

    AHH if I haven't learned from my own history so far, I will from this. All that code I posted above was irrelevant and I've removed it from my files. All that needed to be done, as I have realized in the past as well, was to modify the /VanillaFancybox/class.vanillalightbox.plugin.php file

    add this tiny little string of code:

    div.Options img, div#Panel img, div.CommentInfo img,

    and the images are galleried together. They are not separated by post, however, but I don't care it still looks great and no longer picks up images not related to the post.

    Ugh soooo happy.

    Thank you guys for the help along the way!

    @kirkpa31‌ any chance you can specify where you put that CSS in the file? :)

  • R_JR_J Ex-Fanboy Munich Admin

    Tried adding it at the bottom of the css file in the style folder?

  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭

    Thanks @R_J‌ , I'll give that a shot. Right now I'm having a hard time figuring out how to even get all of the images linked in a gallery, let alone filter out the unrelated ones :(

  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭

    @peregrine said:
    masterone

    edited:
    Actually, upon further testing the inline changes cause an issue, so I removed the code.

    but the attached images change does work pretty well as far as I can tell.

    http://vanillaforums.org/discussion/comment/211068/#Comment_211068

    By editing @peregrine‌ 's edit of FileUpload/views/link_files.php, I was able to get the Fancyboxed photos linking to each other on the page (i.e. right/left arrows to navigate a single post's photos).

    Diff from stock FileUpload 1.8.3 and my version (I started with @peregrine‌ 's edits, then changed some stuff) below, my version attached. Note that I had to make separate Img and HoverImg links, removing the fancybox class from the FilePreview thumbnail, as otherwise the fancybox gallery contained twice as many images as it should (making it look like you had to double-click on the arrows to navigate).

    12,21c12,27
    <             <div class="Attachment">
    <                <div class="FilePreview">
    <                   <?php
    <                   $Path = GetValue('Path', $Media);
    <                   $Img = '';
    <                   
    <                   if ($CanDownload) {
    <                      $DownloadUrl = Url(MediaModel::Url($Media));
    <                      $Img = '<a href="'.$DownloadUrl.'">';
    <                   }
    ---
    
           <div class="Attachment">
                   <div class="FilePreview">
                      <?php
                      $Path = GetValue('Path', $Media);
                      $Img = '';
                      if ($CanDownload) {
                      $DownloadUrl = Url(MediaModel::Url($Media));
                        $Img = '<a href="'.$DownloadUrl.'">';
                        $HoverImg = $Img;
                      $type = GetValue('Type', $Media); 
                      if (preg_match("/image/",$type)) {
                          $CommentID = $this->EventArguments['Comment']->CommentID;
                          $HoverImg = "<a rel=\"$CommentID\" class=\"fancybox\" href=\"$DownloadUrl\">";                
                      }
                      }
    
    25c31,32
    <                   if ($CanDownload)
    ---
    
                  $HoverImg .= MediaThumbnail($Media);
                  if ($CanDownload) {
    
    26a34,35
    
                     $HoverImg .= '</a>';
                  }
    
    31c40,42
    <                   <?php echo $Img; ?>
    ---
    
               <?php
                echo $HoverImg;
                ?>
    
  • I just updated my forum to 2.3 and decided to revisit the code for lightbox for images.

    I made a minor change to @AaronWebstey code above - I reset the $HoverImg value at the top of the foreach loop to prevent building an array of thumbs when viewed onhover.

    I have also forked and updated the @oliverraduner Vanilla Fancybox plugin. I updated Fancybox to version 2 files and made some minor changes so the js and css files are correctly added in vanilla 2.3. See
    https://github.com/chris-pdg/vanillaforums-VanillaFancybox/tree/ver-1.2

    You may want to make some changes to the fancybox config values - I added maxwidth=900 which helps with display for lg. images.

    Suggestions welcome to further improve plugin, glad to help.

Sign In or Register to comment.