ElkArte Community

Similar to highslide and other lightbox programs, this addon uses Fancybox to provide the zoom on click capability.  Works on attachments and image tags.  Will group all images in a post (attachments and img tags) as a slideshow so you can navigate all the images in a post from the lightbox.

---

License
This ElkArte addon is released under a MPL V1.1 license, a copy of it with its provisions is included with the package.

Introduction
This adds a lightbox / zoom effect to thumbnail images and attachments in your post.  It will work on attachments and in-line images.

---

Fancybox JS is licensed under a GPLv3 license for all open source applications. A commercial license is required for all commercial applications fancybox license terms (https://fancyapps.com/fancybox/#license)

Features
o Expands a thumbnail (attachment or in-line image) in to a full-size image in a picture frame when clicked
o Auto size images to fit browser window, with option to expand to full size
o Slideshow for images on page, grouping by individual messages in the topic
o Prev / Next navigation with arrow keys

Repo / Download
https://addons.elkarte.net/enhancement/FancyBox.html

That is it @Allan , I just checked the repo.

Thank you very much.

I think the fancybox should be disabled for images with a link. It opens the thumbnail

[url=http://postimage.org/image/x37t5qr3x/][img]http://s6.postimage.org/x37t5qr3x/file134_newformat.jpg[/img][/url] 

I'll see what I can do.  Finding nested tags like that is a bit painful.

It does have the option to not work on [ img] tags at all but not just [ img] tags inside of [ url] tags

I've made some update to this addon to address a couple of problems.

I added a few extra options to allow more control over how it looks, just a couple, like the size of the border around the image etc.
Second I added the option to disable it on linked bbc images as you normally get from a photo share site
* Add the ability to work with a limited number of photo share sites, so this will allow you to post the image thumb and when clicked display the full image. 

Right now it should  work with imageshack,  photobucket, radikal, fotosik, postimage, flickr, and smugmug.  This is something I had in the old HS4SMF mod so wanted to add that here as well.  Some of those hosting sites are making more difficult to find the right image to slide so what works now may not in the future. 

Also postimage is a bit special since it requires lookups to find the right image to expand (as near as I can tell).  In the past if you had a lot of postimage images on your page it could really drag down the system since the lookups were done server side.  I've now moved that to the client with some javascript ajax.  Now the page will load and the links will be updated by the client.  This allows for a faster page load.  If you have a lot of those on a page, they may just act as a normal postimage links until the javascipt gets to it.

The updated package is at the link in the first post, let me know what new bugs I've created  :)

I'll surely try this, I'm on tablet right now. These are very good news for me ;) maybe this addon should change it's name to HS4ELK :)

Display thumbnails below slides :o

I love that, great work and thank you! The images on postimg are not working correctly, but I don't want to use them anymore

Could you supply a sample of a postimg that is not working correctly?  I only had one example and it worked, but they have other syntax that may not.  Would like to have it working.

There is an old bbcode [ float]  I also tried removing it but same results.
The images inserted with url are opened correctly in a new tab but if I activate the last option they should be opened with highslide effect like in the old Hs4smf

skodaclub.it/skodaelk10/index.php?topic=837.0 

I attach my settings

Yeah that should work ... could you just post the bbc code you have for say the first postimage in the first post?  I need to see the raw bbc code to maybe figure out what its doing wrong.

Whats odd is that when you walk through the slideshow it had the thumb then the big image, then the thumb and then the big image ... so something is not getting swapped just right but it is kind of working.

this is the first image

[url=http://postimage.org/image/72fpz4sl9/][img]http://s6.postimage.org/72fpz4sl9/Skoda_octavia_2013_big.jpg[/img][/url]

and the others:

[url=http://postimage.org/image/f9cb4g81p/][img]http://s6.postimage.org/f9cb4g81p/file11_newformat.jpg[/img][/url] [url=http://postimage.org/image/lobc14erh/][img]http://s6.postimage.org/lobc14erh/file112_newformat.jpg[/img][/url] [url=http://postimage.org/image/ygzg11qd9/][img]http://s6.postimage.org/ygzg11qd9/file123_newformat.jpg[/img][/url]

[url=http://postimage.org/image/x37t5qr3x/][img]http://s6.postimage.org/x37t5qr3x/file134_newformat.jpg[/img][/url] [url=http://postimage.org/image/mhnxtqksd/][img]http://s6.postimage.org/mhnxtqksd/file145_newformat.jpg[/img][/url] [url=http://postimage.org/image/rucs7v8ot/][img]http://s6.postimage.org/rucs7v8ot/file36_newformat.jpg[/img][/url]

[url=http://postimage.org/image/kfngfhmt9/][img]http://s6.postimage.org/kfngfhmt9/file47_newformat.jpg[/img][/url] [url=http://postimage.org/image/5xq97hvi5/][img]http://s6.postimage.org/5xq97hvi5/file58_newformat.jpg[/img][/url] [url=http://postimage.org/image/9im4qq01p/][img]http://s6.postimage.org/9im4qq01p/file69_newformat.jpg[/img][/url]

[url=http://postimage.org/image/mba8qnbnh/][img]http://s6.postimage.org/mba8qnbnh/file710_newformat.jpg[/img][/url] [url=http://postimage.org/image/aate3ntml/][img]http://s6.postimage.org/aate3ntml/file811_newformat.jpg[/img][/url] [url=http://postimage.org/image/qn3fte7y5/][img]http://s6.postimage.org/qn3fte7y5/file912_newformat.jpg[/img][/url]

[url=http://postimage.org/image/nua89d7lp/][img]http://s6.postimage.org/nua89d7lp/media_Oc040_newformat.jpg[/img][/url] [url=http://postimage.org/image/6v19u3we5/][img]http://s6.postimage.org/6v19u3we5/media_Oc071_newformat.jpg[/img][/url]

grazie !

Updated to:

- fix  and issue when working on multiple linked bbc images in a post
- flic..kr was not working correctly
- added a proxy file to avoid Google apps limits (only needed for postimg processing

Same link as in the first post, enjoy!

I did a fresh install. I tried that but none of my postimg images are working  :D  skodaclub.it/skodaelk10/index.php?topic=837
They are working fine as bbc images with links. They open correctly on a new tab

Its doing what it needs to do, but your server is returning a 500 error when the proxy file is called (needed to process postimage files), for example this:

Request URL: 	http://skodaclub.it/skodaelk10/fb4elk_proxy.php?url=http://postimage.org/image/yr7xaofct/&callback=jQuery1111008285213568032224_1416244453719
Request Method: 	GET
Status Code: 	HTTP/1.1 500 Internal Server Error

There should be a fb4elk_proxy.php in the base of the forum directory, please verify that is there. 

Also if you have bad behavior activated it may (just a guess) need to have that file added to the Whitelist by URL section.  Or maybe something else is going on, any other details in the server log or php log?

Thank you, the file is in my root, so I checked the error log and I found this
[Mon Nov 17 18:58:38 2014] [error] [client xxx.xxx.195.31] SoftException in Application.cpp:256: File "/home/****/skodaelk10/fb4elk_proxy.php" is writeable by group
The file was uploaded with 666 permission, I changed to 644 and is working.

Thanks again for your help.

p.s. compared to HS4SMF a topic with postimg images is loading fast. The same topic is opened in SMF in more than 3.3 seconds, on elk in just 0,08 sec ;) 

Awesome  :D

That person was right, you write crappy code for SMF!! :P

/me runs

ROFLMAO  :D And that was one of my better ones :P

After installing the latest version of this addon when someone tries to upload an attachment they see this (see attachment) and the attachment will not upload. If I disable the fancy box addon the attachments work fine. Any ideas?

Please check if there any errors in the ACP error log .. meanwhile I'll do some checking as well.

Also a site with a test account could help, PM me if you want

Does it need to be an admin account or just a regular account?

Getting a lot of these errors in the ACP.

Guest
Reverse chronological order of list Today at 05:10:10 PM
Apply Filter: Only show the error messages of this IP address 68.180.228.34  
Apply Filter: Only show the error messages of this session 7cb305e00f9f766eb00eaf259c870777
Apply Filter: Only show the errors of this type Type of error: Undefined
Apply Filter: Only show the errors with the same message	8: Undefined index: fancybox_PaddingApply Filter: Only show the error messages of this URL	http://www.mysite.com/index.php?topic=7046.15Apply Filter: Only show the errors from this file	File: /homefolder/userfolder/public_html/sources/subs/fb4elk.subs.php
Line: 96

Damn, I thought that was fixed, I remember that being reported ... let me check that first  :-[

replace your file with this one (in subs)

I replaced the file. I think it got rid of the errors in the ACP but I still can't use attachments if Fancybox is enabled.

I can see that the JS on the page is broken ... I thought that would fix it.

Could you post a screen shot of your settings for fancybox, something is causing the JS to be empty.

Here is the screen shot:

Well those look fine, and I set my test site to the same and the JS is output correctly ... on yours it outputting a 0 for some reason, still trying to figure that out.

If it makes any difference I have the following addons installed:

OMG, I'm more stupid then I thought .. please try this one

SUCCESS!!! Seems to be working now. Thank You!!!

OK another question...are the controls for Fancybox supposed to look like this? I have no idea what those buttons do.

Maybe the css is not loading? Might have to copy some files to your custom theme (just a guess)

But no the controls should be on top or inside the box,

The only thing that goes below would be the other post thumbnails but only if you have that enabled

Nope not the css, just went to the site and its loading that .. but its not finding the /helpers sub directory under fancybox.  Make sure all the files are ... should be under /scripts/fancybox/helpers

ETA: its the entire /scripts/fancybox directory thats missing under the /themes/blue ... just copy it from the default theme dir and you should be fine.

Gotcha. That fixed it. Thanks again.

hi,

thumbnail  image  code problem is there a solution


It does not open big picture thumbnail opens

(http://s23.postimg.org/mdn3u86x7/simsiz_111.png) (http://postimage.org/)

[url=http://postimg.org/image/4gjk9ffw1/][img]http://s24.postimg.org/4gjk9ffw1/W5m9_Tr.jpg[/img][/url]

It should work with postimg (although they sure make it difficult) ... let me check with the link you posted so I can see what is going on.

Humm .. I just tried that link on my local install and it worked as expected.

postimg requires us to use a proxy to get the image.  To do this there should be a file fb4elk_proxy.php in the root of your install (the addon should do this).  Make sure that file has the same permissions as the rest of your php files.    Let me know if that is missing.

hi,

fb4elk_proxy.php there are in the main directory, permissions (chmod)  666

---

The same problem applies to the server where the forum is installed

It does not open big picture thumbnail opens

[url=http://elektronikprojeler.com/im/uploads/2015/05/i2209blfzjx.png][img]http://elektronikprojeler.com/im/uploads/2015/05/thumb/i2209blfzjx.png[/img][/url]

Make sure that you have both of the following options checked in the addons control panel

• Apply fancybox to images added with the [img] bbc tag
• Convert photo share links to display the full sized image

hi,
I tried the problem continues
I sent the information PM

Got it ... taking a look now

Well I did find a couple of issues that have been corrected, @gevv has the new code on the site for testing.

One issue was images on postimg could have wrong img source in the page that is fetched vai the proxy.   Found a work around / check for that condition.  Seems more like an error on their end but at least there was a work around for that one example.

Second was one of my favorite issues, a regex backtrack_limit exhaustion.   I tweaked the regex to be less "exhaustive" and put in a catch should it occur as well.

Once I know things are working correctly I'll push an official update.

I would like to use fancybox on a Simple Portal page or article, is it possible to do that?

It should work on front page blocks, but I've not checked to see if it works on an article or page image. 

I'm guessing you tried and it did not work  O:-)

Anyway yes it should be possible and not very difficult.

I tried both, pages and articles but fancybox is not active on images :(

Forgot about this one, sorry.  I'll need to make an update to simpleportal or fancybox so they are aware of each other.  I'll open the issue on fancybox so I remember to take a look at this.

French translation in attachment

Thank you ... I've updated the package with the translation and updated fancybox from 2.1.5 to 2.1.6 as well.

GitHub Down </3

Hi, the download to this add-on doesn't seem to be available anymore, at least not from the Package Manager in ElkArte.

Looks like I had the wrong file name in the package file vs github.  Should be corrected now so please try again.

Hi,
installed Fancybox and now if I click on an image, first opens the "original" elk_lightbox and then on top the fancy light box. So the I have then to close to lightboxes if I want to leave them.
How can I deactivate the integrated elk_lightbox and leave only the fancybox?

I am using ElkArte 1.1RC1, be social template.

I've attached a copy that should work with 1.1  ...  just replace the fb4elk.subs.php file in your /sources/subs directory with the one attached.

Great, it works now as expected! Thank you!

Support Elk 1.1?

It will be updated :D and PR's are welcome !

Updated package to support ElkArte 1.1

I am using the latest version 1.0.6 of this addon on elkarte 1.0 and I was looking in my php error log and I found a lot of lines with this error:
[04-Mar-2018 21:17:06 Europe/Rome] PHP Notice:  Use of undefined constant FORUM_VERSION - assumed 'FORUM_VERSION' in .../public/sources/subs/fb4elk.subs.php on line 48

47.	// Disable the built in lightbox support in ElkArte 1.1
48.	if (substr(FORUM_VERSION, 8, 3) === '1.1')
49.	{
50.		addInlineJavascript('$(document).ready(function() {$("[data-lightboximage]").off("click.elk_lb");});');
51.	}

Seems that changing:

	if (substr(FORUM_VERSION, 8, 3) === '1.1')

with:

	if (substr('FORUM_VERSION', 8, 3) === '1.1')

solves the problem

This also broke image cache addon for elkarte 1.0.x

The correct fix provided by Spuds is this:

	if (substr(FORUM_VERSION, 8, 3) === '1.1')

	if (defined('FORUM_VERSION') && substr(FORUM_VERSION, 8, 3) === '1.1')

https://github.com/Spuds/Elk_FancyBox/issues/4#issuecomment-370558001

Bumped the release to v1.0.7

 o Update to FancyBox v3 library.  Removes old v2 options and replace with v3 options (simplify as well)
 o If you prefer FancyBox v2 features stay with v1.0.6 of the addon, it runs fine under 1.1.x

Hello,
I'm still using version 1.0.6 because it still works fine with my 1.1.8 EA forum.
Today I added the webp format to the allowed file types in the forum (in the settings for file attachments). When I tried to insert three webp photos into a post via Fancybox, it didn't quite work.
After uploading the photos and setting the widths and positions of the thumbnails in the post, the thumbnails do show up in the previews, but when I save everything afterwards, only the Lorem Ipsum placeholders show up in the post instead of the thumbnails.

Where can the error be? With jpg or png it still works.
Does something have to be changed somewhere on the Fancybox code pages or something else in the EA forum?

(Link-9316)

There was a brief discussion about WebP ... https://www.elkarte.net/community/index.php?topic=6037.0

Its not well supported by PHP/GD, depends on what your host has done.  Plus ElkArte itself is not ready for them, so for now I would not play with them.

Oh, okay, no problem. I'll just wait and see how WEBP and ElkArte will go on. In any case, it would be great to be able to insert such images at some point.
In the last half year I found more and more WEBPs on the net and about two months ago I started to insert only this format on my own website. At least for images above a certain size.The quality of these images is usually much better than comparable images in JPG, and the file size is only about one third of the JPG size.
I believe, meanwhile even all large browsers support WEBP.

Time for an update to 1.0.8

This release only supports ElkArte 1.1, if you need 1.0 support for some reason, use a previous release.

• Fix an issue that prevented it from working with any [IMG] BBC style links and 3rd party photo share sites. 
• Updated some of the 3rd party link search logic as those link formats are always changing
• Tested on PHP 8.1
• Minor updates to marginally improve performance

To get the addon you can do one of two things:

• You can download the file from the Addons (https://elkarte.github.io/addons//enhancement/FancyBox.html) site and then upload that file to your server
  
  • Admin > Packages > Upload > Select the zip file you just downloaded > Upload
• Or Download it directly to your site
  
  • Admin > Packages > Download Package > click "Browse" by "ElkArte Third-party Add-ons Site", expand Enhancement > Fancybox Lightbox > [Download] (use the button)

https://www.elkarte.net/community/index.php?topic=6243.msg44912#msg44912
I just tested the 1.0.8 on my forum and I noticed that the add-on is not working with BB images inserted with attributes like width or height
example:

[img height=300]https://ujforras.hu/wp-content/uploads/2014/11/nyomtalanul_plakat-600x860.jpg[/img]

I'm not sure, but I think this worked in the past. :undecided:

Also, what about BB images hosted on http? I guess I never tested that until today, and they are ignored, is this a bug or it was designed to ignore http images?

I'll have to look at that.  Are you using the image proxy as well?

Yes, I am using the image proxy.

Hello!
I'm a little late and have only just updated to 1.08.
However, three options are now missing in the settings. I have outlined them in red in the attached picture.
How can I add them now? Above all, I miss the "position navigation buttons". These are now at the top right of the display and look a bit strange when using a laptop, and clicking on them up there is a bit awkward.
 

Can no one explain to me how I can add the three missing options in the settings afterwards? Maybe by copying certain parts from code pages of an older version and pasting them on the relevant pages of the current version? Would that work? If so, what exactly would I have to copy?
I still have the zip file of 1.06 here or I would have to download 1.07 for this from somewhere.

Sorry, I missed this post.

The problem is that the latest versions of the addon 1.0.7 and 1.0.8 use the latest V3 Fancybox library, and its this new FB library that no longer supported all the options of the previous V2 library.

V1.0.6 https://github.com/Spuds/Elk_FancyBox/releases/tag/v1.0.6 was the last version with the V2 library.  I don't know (remember) what issues that had with Elk 1.1 and/or PHP 8.1.  You could give it a spin, it may work.

Minor bump to V1.0.9 that is only needed when Elk 1.1.10 is released.

- Fix issue when running this with ElkArte V1.1.10 where, due to new "true" deferred script action, it was not properly turning off the built in ElkArte Lightbox action.
- Improve gallery support when gallery images are used in signatures.  Will need gallery version 1.2.2

Hello,

I noticed yesterday that in posts in which thumbnails have been inserted, these are no longer displayed when you are logged out. In the places where they should be visible, there is only a correspondingly large empty space.
However, when I log in, the thumbnails are there and I can click on them, enlarge them and scroll through them. After logging out, they are even permanently displayed again, regardless of whether I am logged in or out.

I have now tested it on two laptops and a desktop PC and it was the same on all of them. What could be the reason for this? I haven't changed any settings for a long time. The thumbnails should always be visible, even for visitors who only visit the forum once.

Cookies?

Not that I know of. How can I find out if there are any that are causing this now?
Maybe the thumbnails have been disappearing for a long time and I just didn't notice it right away.