[For 1.8] MyBB FancyBox v1.2.0

[Eldenroot]

MyBB FancyBox plugin

FancyBox JavaScript library for presenting images in a fancy way, no more opening images in posts in a new tab. Fully responsive, touch-enabled and customizable!

DOWNLOAD: MyBB Extend site https://community.mybb.com/mods.php?acti...w&pid=1153

- developed by MyBB Group (https://github.com/mybbgroup/MyBB_Fancybox)
- plugin uses 3rd party FancyBox JavaScript library - http://fancyapps.com/fancybox/3/developed by Jānis Skarnelis

- original idea comes from this topic https://community.mybb.com/thread-170611.html

You can fully customize this plugin
- CSS - mybbfancybox.css stylesheet is added to your theme
- full custom language support
- FancyBox settings - open and edit mybbfancybox.js located in /jscripts folder - all parameters are commented, feel free to adjust these values. Anyway default setting should be suitable for >99,9% of common users.

On plugin install all changes are added automatically to these two templates:
- ungrouped -> headerinclude
- post bit -> postbit_attachments_thumbnails_thumbnail

GitHub project: https://github.com/mybbgroup/MyBB_Fancybox (please download from MyBB Extend site)

Credits
- @Laird - for a great help with coding, fixing bugs and adding new features in MyBB FancyBox
- @Wildcard - for help with coding and fixing bugs in MyBB FancyBox
- @effone - for a lot of useful tips
- @lukasamd - for an original idea and MyBB integration
- @SvePu - for code improvements - added ability to view all images in a post
- @Jānis Skarnelis - as a developer of FancyBox library
and everybody else who motivates me every day to try a new things

[Wildcard]

Very nice work!

[8guawong]

i don't know why you didn't incorporate my edit

https://community.mybb.com/thread-170611...pid1308723

if you don't images that are embeded in 1 post will only open one by one instead of grouping into a gallery

also if you have attachement to show full image instead of thumbnail then fancybox will not work

and change

 find_replace_templatesets("headerinclude", "#" . preg_quote('{$stylesheets}<link rel="stylesheet" href="/jscripts/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" /><script type="text/javascript" src="/jscripts/fancybox/jquery.fancybox.min.js"></script><script type="text/javascript" src="/jscripts/mybbfancybox.js"></script>') . "#i",'{$stylesheets}');
	}

to

find_replace_templatesets("headerinclude", "#" . preg_quote('{$stylesheets}<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" /><script type="text/javascript" src="{$mybb->asset_url}/jscripts/fancybox/jquery.fancybox.min.js"></script><script type="text/javascript" src="{$mybb->asset_url}/jscripts/mybbfancybox.js"></script>') . "#i",'{$stylesheets}');
	}

i had 404 not found on those

here is my test thread of current rls: https://www.blackmarke7.org/mybbtest/sho....php?tid=3

had to change the headerinclude template with the change i suggsted above to get fancybox to load

also i found some better lightbox alternative

https://fengyuanchen.github.io/viewer/ <-- best but i have trouble getting it to work / work properly

http://sachinchoolur.github.io/lightGallery/ <-- 2nd best which i'm currently using on my site since i can't get the above to work

in conclusion

if some1 can get https://fengyuanchen.github.io/viewer/ to work then that will be the best

problems that i had:

1. getting it working
2. even when i had it working, which i had no clue why i couldn't get it working again, it'll group all images into the gallery including smilies
3. can't get it working with attachment

[Eldenroot]

I wont add your changes because they break functionality. About others viewers - there are plenty of them for free, I have tested a lot of them but FancyBox seems to be the best of them when you compare all aspects. Please create a new thread for discussion about other alternatives.

P.S. your link is not working for non regustered users, send me a test account via PM to test it. About 404 error, it was fixed already, new version will contain that fix.

[8guawong]

I wont add your changes because they break functionality. About others viewers - there are plenty of them for free, I have tested a lot of them but FancyBox seems to be the best of them when you compare all aspects. Please create a new thread for discussion about other alternatives.

P.S. your link is not working for non regustered users, send me a test account via PM to test it. About 404 error, it was fixed already, new version will contain that fix.

what do you mean by break functionality?
do you mean this part?

.scaleimages img {
    max-width: 60%;
    height: auto;
}

or the following?

after doing the following you'll be able to open all images in 1 post with fancybox gallery
change the headerinclude lines in first post to

<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        var pid = currentImage.parents('.post_body.scaleimages').attr('id');
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a target='_blank' data-fancybox='" + pid + "' data-type='image' href='" + currentImage.attr("src") + "'</a>");
        }
    });
});
</script>

after doing the following you'll be able to open attached images with fancybox gallery even when you set
Show Attached Thumbnails in Posts to Full Size Image

change postbit_attachments_images_image template to

<img<a target='_blank' data-fancybox="data-{$attachment['pid']}" data-type='image' href="attachment.php?aid={$attachment['aid']}"><img src="attachment.php?aid={$attachment['aid']}" class="attachment" alt="" title="{$lang->postbit_attachment_filename} {$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" />&nbsp;&nbsp;&nbsp;{$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" /></a>&nbsp;&nbsp;&nbsp;

i changed the permission to let guest view attachment

[Eldenroot]

You have a lot of typos in code - postbit_attachments_images_image - please review

[8guawong]

ok i removed the <img in the front

<a target='_blank' data-fancybox="data-{$attachment['pid']}" data-type='image' href="attachment.php?aid={$attachment['aid']}"><img src="attachment.php?aid={$attachment['aid']}" class="attachment" alt="" title="{$lang->postbit_attachment_filename} {$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" />&nbsp;&nbsp;&nbsp;{$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" /></a>&nbsp;&nbsp;&nbsp;

[Wildcard]

@8guawong Better to do code suggestions on GitHub

[Eldenroot]

I will review your code and maybe add it into next version. If anybody has any suggestion or a question let me know.

---

Anyway your code affects only images added into post via attachment, NOT all images added via img button in editor.

[8guawong]

@8guawong Better to do code suggestions on GitHub

i don't really know how to use github

I will review your code and maybe add it into next version. If anybody has any suggestion or a question let me know.

---

Anyway your code affects only images added into post via attachment, NOT all images added via img button in editor.

after doing the following you'll be able to open all images in 1 post with fancybox gallery
change the headerinclude lines in first post to

<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        var pid = currentImage.parents('.post_body.scaleimages').attr('id');
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a target='_blank' data-fancybox='" + pid + "' data-type='image' href='" + currentImage.attr("src") + "'</a>");
        }
    });
});
</script>

so in mybbfancybox.js change

$(document).ready(function() {

	$('.post_body img').each(function() {
		var currentImage = $(this);
		if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
			currentImage.wrap("<a title='Click to enlarge' target='_blank' data-fancybox data-type='image' href='" + currentImage.attr("src") + "'>");
		}
  });

to

$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        var pid = currentImage.parents('.post_body.scaleimages').attr('id');
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a title='Click to enlarge' target='_blank' data-fancybox='" + pid + "' data-type='image' href='" + currentImage.attr("src")  + "'>");
        }
    });
});