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);
})
}
@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:
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?
@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.
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.
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?
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.
Comments
any idea could help
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
Im sure we fire fancybox on our air theme without any issues. But we do not use plugin.
There was an error rendering this rich post.
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.jsTo 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
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!
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"**>'; }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?
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
There was an error rendering this rich post.
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 }); // readyThis seems to work slightly better, although the gallery still cycles through all images on the page, not staying within each post.
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.
There was an error rendering this rich post.
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.
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.
There was an error rendering this rich post.