miniBB Support Forums | 15 years on The Web
miniBB ®

miniBB

®
 
 | Forums | Register | Reply | Search | Statistics | Manual |
Official Addons and Solutions miniBB Support Forums / Official Addons and Solutions /   
 

File and Image Attachments

 
 
Page  Page 14 of 14:  « Previous  1  2  3  ...  12  13  14

Author Bluesplayer
Partaker
#196 | Posted: 26 Jul 2014 10:43 | Edited by: Moderator 
This attachment mod gave me an idea when I used SMF on a new site of mine. There was a mod available that implemented Fancybox when viewing attachment uploaded images. I also added a php file that autosizes images if they go beyond a certain size - as minibb attachment mod can do, along with altering the css settings etc.

The point I'm trying to make is the minibb attachment mod would be greatly enhanced with the addition of Fancybox along with the abilty to move through the images manually and also by offering a slide show - see example below.

I will be trying to do this so any help would be greatly appreciated.

http://fancybox.net/

My example gallery

http://toffs.club/index.php/topic,10.0.html

Author Bluesplayer
Partaker
#197 | Posted: 26 Jul 2014 13:04 | Edited by: Moderator 
I've done it Paul and it wasn't that hard to do. I will post how I did it very soon. Not only does it work on a particular post but it displays ALL attachments within the thread.

See it in action here ...

http://tapitout.co.uk/forum/latest-news-4/porthcawl-to-paris-211.html

Author kuopassa
Partaker
#198 | Posted: 27 Jul 2014 01:09 
^ Good stuff, Bluesplayer!

Author Bluesplayer
Partaker
#199 | Posted: 27 Jul 2014 11:45 | Edited by: Moderator 
I haven't tidied the code up yet - place in js files etc - and I wanted to see how to do this quickly so I did this ...

Downloaded Fancybox from here ...

http://fancyapps.com/fancybox/

Then I uploaded all the files to a directory on my website, complete with demo to help work it all out

Added this code to the templates main_header.html file (will clean this up later)
<!-- Add jQuery library -->
<script type="text/javascript" src="/path to files/fancybox/lib/jquery-1.10.1.min.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/path to files/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/path to files/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/path to files/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/path to files/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>




<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/

$('.fancybox').fancybox();

/*
* Different effects
*/

// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});

// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',

helpers : {
title : {
type : 'over'
}
}
});

// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,

openEffect : 'none',

helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});

// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,

openEffect : 'elastic',
openSpeed : 150,

closeEffect : 'elastic',
closeSpeed : 150,

closeClick : true,

helpers : {
overlay : null
}
});

/*
* Button helper. Disable animations, hide close button, change title type and content
*/

$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',

prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,

helpers : {
title : {
type : 'inside'
},
buttons : {}
},

afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});


/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/

$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',

closeBtn : false,
arrows : false,
nextClick : true,

helpers : {
thumbs : {
width : 50,
height : 50
}
}
});

/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',

arrows : false,
helpers : {
media : {},
buttons : {}
}
});

/*
* Open manually
*/

$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});

$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});

$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});


});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}

</style>

And lastly just altered this line in bb_plugins.php

$a1="<a href=\"{$a1_url}\" onclick=\"JavaScript:popUpFU({$post},{$if},'{$nameJs}',{$dataFile['image_width']},{$dataFile['image_height']},'{$altJs}' ,{$GLOBALS['topic']},'{$ext}'); ImgWin.focus(); return false;\" onmouseover=\"window.status='{$nameJs}';return true;\" onmouseout=\"window.status='';return true;\">";

to this ...

$a1="<a href=\"{$a1_url}\" class=\"fancybox-buttons\" data-fancybox-group=\"button\" \">";

That was all there was to it.

Author Paul
Lead Developer
#200 | Posted: 12 Apr 2017 12:53 | Edited by: Paul 
I've finally got my hands on the FancyBox solution described above, and I must say, it's a bit expired. Now there's a 3rd version of FancyBox available, they say the 2nd version is deprecated and it could not be downloaded. But still, FancyBox could be easily plugged in with miniBB's File Uploads add-on.

Here's what I did:

- downloaded the latest version of Fancybox (currently 3.0), extracted the packaged and copied it under [forums folder]/[fancybox] folder

- in bb_plugins.php, before the /* File upload addon */ code, pasted this:

/* FancyBox */
if($action=='vthread'){
$fancyBox=<<<out
<script src="http://www.minibb.com/forums/fancybox/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="http://www.minibb.com/forums/fancybox/dist/jquery.fancybox.min.css" />
<script src="http://www.minibb.com/forums/fancybox/dist/jquery.fancybox.min.js"></script>
out;
}

/* --FancyBox */

i.e. this code enables extra JS and CSS only on vthread pages i.e. where the pictures actually appear.

- in templates/main_header.html, before the closing </head> tag pasted this:

{$fancyBox}

- Modified the further code for /* File upload addon */, the place to locate is to search by `if($spec==4`, this is the code inside of the parseMessage function and the code which is responsible for displaying images; actually it's the same code described by Bluesplayer above, and the first and only appearance of $a1 var should be changed to this:

$a1="<a data-fancybox=\"gallery\" href=\"{$a1_url}\">";

That's all to work on. About 10 minutes of implementation and it appears to work.

Page  Page 14 of 14:  « Previous  1  2  3  ...  12  13  14 
Official Addons and Solutions miniBB Support Forums / Official Addons and Solutions /
 File and Image Attachments
 Share Topic's Link

Your Reply Click this icon to move up to the quoted message


 ?
You are welcome to post anonymously, by entering a nickname with no password (if the similar Username has not been taken yet), or by leaving both fields empty. If you have a forums account, you can also sign in from this page without posting a message, or sign in and post at once.


Before posting, make sure your message is compliant with our forum posting rules. If not, it may be locked or deleted with no explanation.

 
 
 
miniBB Support Forums Powered by Forum Software miniBB ® Features  Requirements  Demo  Download  Showcase  Gallery of Arts
Compiler  Premium Extensions  Premium Support  License  Contact Us
Check out the Captcha add-on: protect your miniBB-forums from the automated spam and flood.
↑ TOP