Fancybox Plugin for Vanilla - Feedback

This discussion is related to the jQuery Fancybox addon.
24

Comments

  • any idea could help :)

  • PamelaPamela ✭✭

    It doesn't seem to work... if this fancybox CSS class isn't inserted by us :( when starting a new discussion ?

    and never (evenf if CSS class was added!) in reply... is not ?

    NB: HTML InputFormatter by default

    PS: Firefox on Windows with Vanilla 2.0.18.4

  • 422422 Developer MVP
    edited June 2012

    Im sure we fire fancybox on our air theme without any issues. But we do not use plugin.

  • PamelaPamela ✭✭

    and never (evenf if CSS class was added!) in reply... is not ?

    if fancybox CSS class is writted in comment then it seems to work... in fact

  • Hi all,
    the problem is in this file: js/global.js
    To fix it, you need to comment out return toggler(img, smwidth); as shown below:

    `jQuery('div.Message img').each(function(i,img) {
    var img = jQuery(img);
    var container = img.parents('div.Message');
    if (img.width() > container.width()) {
    var smwidth = container.width();

         img.css('width', smwidth).css('cursor', 'pointer');
         img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>');
    
         img.next().click(function() {
            //return toggler(img, smwidth);
         });
         img.click(function() {
            //return toggler(img, smwidth);
         })
      }
    

    });`

  • On Vanilla 2.0.18.4 it just shows the loading icon indefinitely. I have my Vanilla installed in a sub-directory (/forums).

    Any ideas? I've looked through it but couldn't find anything that's obviously wrong.

    -k0nsl

  • oliverraduneroliverraduner Contributing to Vanilla since 2010 Switzerland ✭✭
    edited November 2012

    @k0nsl said:
    On Vanilla 2.0.18.4 it just shows the loading icon indefinitely. I have my Vanilla installed in a sub-directory (/forums).

    Could you check your Webbrowsers Error-Console if there is anything logged regarding fancybox? Ususally, if the script fails, it will be logged into this error console.

    --> On Safari it's under "Develop > Show Error" Console [needs Developer menu enabled in settings]

    --> in Firefox you can find it in "Extras > Web-Developer > Web-Console"

  • Can't makе this plugin work with images uploaded to posts with FileUpload plugin. They still open just as a plain jpeg without any lightbox. Even when I make a link to an external image with class=fancybox property, it has no effect. What am I doing wrong? Thanks!

  • @kypexin said:
    Can't makе this plugin work with images uploaded to posts with FileUpload plugin. They still open just as a plain jpeg without any lightbox. Even when I make a link to an external image with class=fancybox property, it has no effect. What am I doing wrong? Thanks!

    seems I fixed this. I edited FileUpload plugin file like this, adding fancybox class:

    if ($CanDownload) {
                         $DownloadUrl = Url(MediaModel::Url($Media));
                         $Img = '<a href="'.$DownloadUrl.'" **class="fancybox"**>';
                      }
    
  • edited December 2012

    Thanks for the fix, it is working for me!
    However I have some questions, I'll be glad if someone can help me:

    1) is there a way to resize images on upload or limit the size?

    2) Fancybox is now displaying the image at full size when clicked, is there a way to keep the width and height into the current window size (as standard fancybox2 usually do)?

    3) Is it possible to put a "next" button to navigate through the attached images in a discussion?

    thanks

  • @hellochoco I've solved for your second issue regarding full size images overcrowding the screen. Just by looking at the jquery Fancybox website, all you have to do is modify two files:

    jquery.fancybox.js ==> all the way down you just have to turn centerOnScroll from "false" to "true"
    class.vanillalightbox.plugin.php ==> all the way down you just have to turn "AutoScale" from "false" to "true"

    Simple as that, not sure why those values weren't already turned on.

    Now if I could only figure out how to get this to show in my excerpts.

  • I wanted to bring up @hellochoco's question again regarding the "next" button enabling users to navigate through multiple images in a post. Does anyone know how to activate this?

    I've looked on the fancybox.net website and activated the cyclic key from 'false' to 'true' (according to the site, "When true, galleries will be cyclic, allowing you to keep pressing next/back.") This did not do anything that I noticed, and users still are required to click on each individual picture they want to view.

    Any ideas?

  • 422422 Developer MVP
    edited March 2013

    on most lightboxes you add rel attribute to the image links, like rel="gallery" which then allows you to cycle.
    For validation, use data-rel

    ops re read yes, cyclic=true should work

    kirkpa31
  • Thank you @422!!

    I will take a stab at this again as soon as I can and let you know what I find.

  • Ok, I've spent the last 3 hours trying to do this simple addition you've spoken of. I feel incredibly stupid as I've tried placing this bit of code:
    $("a:has(img)").attr('rel','gallery').fancybox();
    everywhere within my jquery.fancybox.js file to no avail.

    If the explanation can be made simply, as if speaking to a child-as I feel like right now-, please help with this, otherwise I can keep tinkering around.

  • Ok I put that code within the < head > section of my page (/views/default.master.tpl) after reading the suggestions on this discussion: http://vanillaforums.org/discussion/comment/176410/#Comment_176410

    The images now appear as a gallery, however it picks up all images on the page, not simply staying within each post. Is there a simple bit of script I could add to stop the gallery from cycling through the entire page?

  • replaced that bit of code referenced above with:

    $(document).ready(function (){ $('.fancybox').attr('rel', 'gallery').fancybox({ type : "image", // force type of content to image helpers: { title: { type: 'inside' }, overlay: { opacity: 0.3 } // overlay } // helpers }); // fancybox }); // ready

    This seems to work slightly better, although the gallery still cycles through all images on the page, not staying within each post.

  • 422422 Developer MVP

    if the image gallery has a data-rel id then use the post id as this id, i think that then it will only cycle thru the posts images with this ID.

    kirkpa31
  • kirkpa31kirkpa31 ✭✭
    edited March 2013

    After searching through the FancyBox plugin, I could not find a "data-rel" id of any sort.

    To use a different id would I need to replace 'gallery' with some other key word like UserID? Sorry I'm a little slow with all of this.

  • 422422 Developer MVP

    when you launch a gallery in a modal you can cycle thru images. This cycle has an id, its arbitrary, however you could use the POST id of the forum post as the cycle id ( i use different system and use data-rel data-id etc but the princliple is the same.

    So lets say post id is 2432432-54
    And on that post there are 12 images

    Below that in next post with id of 322988444-56 there are 4 images

    By altering your code to use cycle=true if you look on fancybox page you will see how tohave multiple galleries on same page, this is done by attributing gallery ids, by use of data-id or data-rel or whatever it is called.. This way you can limit cycling of gallery images to JUST that post.

    kirkpa31
Sign In or Register to comment.