miniBB ® miniBB®
miniBB Support Forums
 | 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
Registered
#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
Registered
#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
Registered
#198 | Posted: 27 Jul 2014 01:09 
^ Good stuff, Bluesplayer!

Author Bluesplayer
Registered
#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.

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 Top

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

 Short link for this topic:

 ?
Only registered users are allowed to post here. Please, enter your username/password details upon posting a message, or register first.


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  Contacts
Try the Captcha add-on: protect your miniBB-forums from the automated spam and flood.
Captcha Addon for miniBB