Fancybox Plugin for Vanilla - Feedback

ericwongmma

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

vrijvlinder

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

vrijvlinder

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 >

oliverraduner

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

peregrine

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

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

peregrine

@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

MasterOne

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.

hgtonight

@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

oliverraduner

@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.

AaronWebstey

@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_J

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

AaronWebstey

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

AaronWebstey

@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;
            ?>

plymplan

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.