Hello,
I looking for someting like "fit on page" for MyBB 1.8, but without results. Auto-scaling is good, but not comfortable for me. I tried some code and "find solution". Caution: it's very, very simple and may not work on all boards.
1. Add to you theme css:
This 400px in only example - align to your board.
2. Download fancybox plugin and upload to server.
http://fancyapps.com/fancybox/
Files should be in mybb_root/fancybox/source
3. Add to headerinclude template after {$stylesheets}:
This code add links to all images and Fancybox.
Voilà!
Demo:
https://safegroup.pl/thread-9334.html
![.png]( "PNG Image")
fancybox.png (Size: 169.9 KB / Downloads: 30)
I looking for someting like "fit on page" for MyBB 1.8, but without results. Auto-scaling is good, but not comfortable for me. I tried some code and "find solution". Caution: it's very, very simple and may not work on all boards.
1. Add to you theme css:
Code:
.scaleimages img {
max-width: 400px;
max-height: 400px;
}This 400px in only example - align to your board.
2. Download fancybox plugin and upload to server.
http://fancyapps.com/fancybox/
Files should be in mybb_root/fancybox/source
3. Add to headerinclude template after {$stylesheets}:
Code:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').each(function() {
var currentImage = $(this);
if (currentImage.parent().is('a') == false)
{
currentImage.wrap("<a target='_blank' class='fancybox' href='" + currentImage.attr("src") + "'</a>");
}
});
$(".fancybox").fancybox();
});
</script>This code add links to all images and Fancybox.
Voilà!
Demo:
https://safegroup.pl/thread-9334.html
fancybox.png (Size: 169.9 KB / Downloads: 30)