The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Lightbox for forum

View previous topic View next topic Go down

Lightbox for forum

Post by whitestone on February 11th 2015, 12:25 pm

Technical Details

Forum version : phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : All members
Forum link : http://ao1clan.forumfreek.com/

Description of problem

Hello all,

I don't know if this is the right place to post this, because I was not sure if this was a code/ design problem.

My Problem:
Users are posting pictures on my forum, but I want a Lightbox for the pictures.
If someone can help me, that would be great.

PS: I am not that good in coding, so could you please say it step by step.

I am using PHPBB3, my forum: http://ao1clan.forumfreek.com/


THIS LINK IS NOT WORKING FOR ME:http://help.forumotion.com/t115826-add-a-lightbox-effect-to-the-images-of-the-forum

Not the link itself, but the tutorial I mean

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Wagner' on February 11th 2015, 6:14 pm

Where did you want this "lightbox"? Only on posts? All images will have this effect or just special ones?

Wagner'
Forumember

Male Posts : 48
Reputation : 6
Language : Portuguese
Location : Brazil

http://www.bestskins.net/forum

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 15th 2015, 3:05 pm

Yes, only on the posts.

All images in the posts can have this effect.

Sorry for the late reaction, i though i would get a notification when someone replied.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Wagner' on February 15th 2015, 6:24 pm

Ok, I've a simple code to you, check it:

Add this to your CSS

Code:
.postbody .content img {
cursor: pointer;
}

.postbody .content img.lightbox {
position: fixed;
top: 10%;
left: 50%;
z-index: 999;
max-height: 80%;
}

.fader {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,.8);
z-index: 990;
}


And this script (in topics)
Code:
$(function() {

$('.postbody .content').each(function() {

var _img = $(this).find('img'), self = $(this);

_img.click(function(e) {

e.preventDefault();
e.stopPropagation();

if( $(this).hasClass('lightbox') ) return;

var _width = $(this).width();

self.after('<div class="fader"></div>');

$(this).addClass('lightbox').css({
'margin-left' : '-' + (_width / 2) + 'px'
});

$('.fader').click(function() {

if( $('.lightbox').length ) {
$('.lightbox').removeClass('lightbox').css({
'margin-left' : 0
});
}

$(this).remove();

});

});

});

});

What you think?




To receive notifications of the topic, click here

king

Wagner'
Forumember

Male Posts : 48
Reputation : 6
Language : Portuguese
Location : Brazil

http://www.bestskins.net/forum

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 9:40 am

Nice!

Only there is one, maybe more, problems.
I can't close the picture (press on X) and when there are more pictures i cant press the next button or previous.
But a big problem is that the picture doesn't get bigger. Without pressing the picture it is even bigger then when I press on it.

If you know a solution for this, that would be great.

Actually what i want is just the fancybox like:http://fancybox.net/
With:
- Fade
- (If possible)title positions outside
-Image gallery (no effects when going to next/previous image)


You can see here what i mean with that the image gets smaller:http://ao1clan.forumfreek.com/t18-ao1-3-0-x2k

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Guest on February 16th 2015, 12:43 pm

@whitestone wrote:Nice!

Only there is one, maybe more, problems.
I can't close the picture (press on X) and when there are more pictures i cant press the next button or previous.
But a big problem is that the picture doesn't get bigger. Without pressing the picture it is even bigger then when I press on it.

If you know a solution for this, that would be great.

Actually what i want is just the fancybox like:http://fancybox.net/
With:
- Fade
- (If possible)title positions outside
-Image gallery (no effects when going to next/previous image)


You can see here what i mean with that the image gets smaller:http://ao1clan.forumfreek.com/t18-ao1-3-0-x2k
Hi @Whitestone Hello

FM provided an official Dutch FM support forum on which you can find the solution to your question: http://ondersteun.actieforum.com/t5338-lightbox-voor-afbeeldingen-in-topics

I hope that 'd have helped to solve your question. Thanks.


Regards,

Samantha.

Guest
Guest


Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 12:55 pm

Hello Samantha,

Thx for your reply, but that didn't work netiher.

I just have to wait now.

PS: The post says there are 3 steps, but I only see 1 step (the javascript code). Maybe that could be the problem?

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Zuke on February 16th 2015, 1:06 pm

Try this tutorial: http://socialacademy.forums.fm/t63-tutorial-lightbox-for-images


Also make sure to register an account on that forum so you can reply, because you have to reply before the code can be seen.

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Re: Lightbox for forum

Post by Guest on February 16th 2015, 1:10 pm

@whitestone wrote:Hello Samantha,

Thx for your reply, but that didn't work netiher.

I just have to wait now.

PS: The post says there are 3 steps, but I only see 1 step (the javascript code). Maybe that could be the problem?
It works perfectly well on my phpBB3 forum and I see now, the tutorial appears to be broken when not logged in. I've got CSS and JS installed for it.

This is the copyrighted script provided to you as is, straight from my JS and CSS, and for phpBB3 usage only!


JS:
Code:
var versie = 'phpBB3';

/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Version: 1.0.16
 *
 * Requires: jQuery >= 1.2.3
 */
(function(a){a.fn.addBack=a.fn.addBack||a.fn.andSelf;
a.fn.extend({actual:function(b,l){if(!this[b]){throw'$.actual => The jQuery method "'+b+'" you called does not exist';}var f={absolute:false,clone:false,includeMargin:false};
var i=a.extend(f,l);var e=this.eq(0);var h,j;if(i.clone===true){h=function(){var m="position: absolute !important; top: -1000 !important; ";e=e.clone().attr("style",m).appendTo("body");
};j=function(){e.remove();};}else{var g=[];var d="";var c;h=function(){c=e.parents().addBack().filter(":hidden");d+="visibility: hidden !important; display: block !important; ";
if(i.absolute===true){d+="position: absolute !important; ";}c.each(function(){var m=a(this);var n=m.attr("style");g.push(n);m.attr("style",n?n+";"+d:d);
});};j=function(){c.each(function(m){var o=a(this);var n=g[m];if(n===undefined){o.removeAttr("style");}else{o.attr("style",n);}});};}h();var k=/(outer)/.test(b)?e[b](i.includeMargin):e[b]();
j();return k;}});})(jQuery);

jQuery(document).ready(function (){switch(versie){case 'phpBB2':versieCont='postbody';break;case 'phpBB3':versieCont='content.clearfix';break;case 'punBB':versieCont='entry-content';break;case 'invision':versieCont='post-entry';break;default:versieCont='postbody';}var i = setInterval(function (){if($('body').attr('class') != 'resize_process'){clearInterval(i);$('span.resizebox').remove();var lightbox= document.createElement('div');lightbox.id="lightbox";lightbox.style.display="none";lightbox.style.zIndex="999999";lightbox.innerHTML='<p id="closer">X</p><div id="content2"><div id="cont_image"><img id="uniqueImage" /><span id="copy_url" contenteditable="true" onclick="document.execCommand(\'selectAll\',false,null)"></span><span id="new_tab"><a target="_blank">Openen in nieuw tabblad</a></span></div></div>';$('body')[0].appendChild(lightbox);$('.' + versieCont + ' img').each(function() {if ($(this).actual( "width" ) > $(this).parent().actual( "width" )) {$(this).addClass('resize_img');$(this).width($(this).parent().actual( "width" )-4);}});$('.resize_img').click(function(e) {var image_src = $(this).attr("src");var mHeight = $(window).height() - 100;var mWidth = $(window).width() - 100;var shown = $('#lightbox').css('display');var image = $('#uniqueImage');$('#copy_url').text(image_src);$('#new_tab a').attr('href',image_src);if(shown == "none") {image[0].src=image_src;image[0].style.maxHeight= mHeight+"px";image[0].style.maxWidth= mWidth+"px";image[0].style.padding="5px 0px";$('#lightbox').fadeIn('slow');} else {image[0].src=image_src;image[0].style.height= mHeight+"px";image[0].style.width= mWidth+"px";image[0].style.padding="5px 0px";}});$('body').on('click','#closer', function() {$('#lightbox').fadeOut('slow');});$(document).keyup(function(e) {if (e.keyCode == 27) {$('#lightbox').fadeOut('slow');}});}}, 100);});



CSS:
Code:
/*--- START LIGHTBOX --------------------------------------------*/
img.resize_img {border: 2px dotted rgb(2, 123, 183);cursor: pointer;}
#lightbox {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(189, 215, 228, 0.5);text-align:center;}
#lightbox #cont_image{-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;}
#lightbox p{ /*sluit knop*/ background: rgb(2, 123, 183);padding: 20px;display: inline-block;border-bottom-left-radius: 5000px;font-size: 20px;font-weight: bold;float: right;margin: -10px;color: rgb(197, 231, 249);cursor: pointer;}
#copy_url {float: left;}
#new_tab {float: right;}


PS: Sorry Luke, we posted atst. And you're wearing an official like FM badge even though you're a member, not staff...

Guest
Guest


Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 1:40 pm

@LukeSpike; thx for reply, but I didn't really like the lighbox from the link you gave me. And also it didn't work on other images on my website.

@SamanthaS; thx for the code, but it is not working properly AND the images are not getting biggger.
When i click on a image it opens in a new window and opens the lightbox, but i have to close the new window and then i see the image.
Look this link for what i mean:http://ao1clan.forumfreek.com/t14-news-sport-anything

Anyone other suggestions?
I really liked the FancyBox. There was a tutorial about that, but at mine forum it didn't work. Maybe someone can edit the code and send it me?

Why I want the FancyBox? > You have google maps integration, youtube iframe, looks nice.

If it doesn't work, i have to do it with only the images.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Guest on February 16th 2015, 1:43 pm

@whitestone wrote:@Luke Spike; thx for reply, but I didn't really like the lighbox from the link you gave me. And also it didn't work on other images on my website.

@SamanthaS; thx for the code, but it is not working properly AND the images are not getting biggger.
When i click on a image it opens in a new window and opens the lightbox, but i have to close the new window and then i see the image.
Look this link for what i mean:http://ao1clan.forumfreek.com/t14-news-sport-anything

Anyone other suggestions?
I really liked the FancyBox. There was a tutorial about that, but at mine forum it didn't work. Maybe someone can edit the code and send it me?

Why I want the FancyBox? > You have google maps integration, youtube iframe, looks nice.

If it doesn't work, i have to do it with only the images.
Well, you asked for Lightbox, not Fancybox. That's all what you'll get from me in this topic about it. Images using LightBox will resize, I even tested it according to the tuto, so either sign up at the proper FM support site for your question or open up another topic about FancyBox (which is copyrighted as well I know by heart).

Samantha.

Guest
Guest


Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 1:52 pm

@Samantha, it has not to be really a fancybox, as I said, it also can be a lightbox.
What i see when i say lightbox:http://lokeshdhakar.com/projects/lightbox2/

The code you send me it works only on few images.

But if you don't anymore or other tutorials, thx for your replies.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Guest on February 16th 2015, 1:59 pm

It works on all. You may have JS errors somewhere. Please update your profile with a link to your website as well. And I won't be clicking non of your links provided no more. I'm sorry.

I hope you'll find yourself a solution to your question soon.

PS: Why don't you just sign up at http://ondersteun.actieforum.com and have support there? Were you banned?

Guest
Guest


Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 2:14 pm

No i wasn't banned, i am even not registered there.

Here is just more support, because this is an international language.
That's a Dutch support forum, so not many people (maybe) can reply there.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by Guest on February 16th 2015, 2:21 pm

@whitestone wrote:No i wasn't banned, i am even not registered there.

Here is just more support, because this is an international language.
That's a Dutch support forum, so not many people (maybe) can reply there.
They do reply to your question(s). Perhaps not as fast as you're used to on here, but they will.

Anyways, good luck! Hello

Guest
Guest


Back to top Go down

Re: Lightbox for forum

Post by _Twisted_Mods_ on February 16th 2015, 2:24 pm

acp>modules>JavaScript management

make sure JavaScript management is turned on if not turn it on and save

create a new script

title:don't matter
placement: in topics

copy and paste the code below and save

Code:
$(function() {
  $('head').append('<style>#lcoverlay img{max-width:100%;max-height:100%}')
var overlay = document.createElement('DIV'), image = document.createElement('IMG');
  overlay.onclick = function() { this.style.display = 'none' };
  overlay.setAttribute('style','display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);overflow:auto;z-index:100000;text-align:center;');
 overlay.setAttribute('id','lcoverlay');
  document.body.appendChild(overlay), overlay.appendChild(image);
 var img = $('.post img'),i;
      for (i=0; i<img.length; i++) {
        img[i].onclick = function() {
          overlay.style.display = 'block';
          image.src = this.src;
        };
      };
});

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 2:50 pm

@_Twisted_Mods_ wrote:acp>modules>JavaScript management

make sure JavaScript management is turned on if not turn it on and save

create a new script

title:don't matter
placement: in topics

copy and paste the code below and save

Code:
$(function() {
 $('head').append('<style>#lcoverlay img{max-width:100%;max-height:100%}')
var overlay = document.createElement('DIV'), image = document.createElement('IMG');
 overlay.onclick = function() { this.style.display = 'none' };
 overlay.setAttribute('style','display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);overflow:auto;z-index:100000;text-align:center;');
 overlay.setAttribute('id','lcoverlay');
 document.body.appendChild(overlay), overlay.appendChild(image);
 var img = $('.post img'),i;
  for (i=0; i<img.length; i++) {
  img[i].onclick = function() {
  overlay.style.display = 'block';
  image.src = this.src;
  };
  };
});


Thx for the reply, but this did also not work.
I hope you have maybe some other code.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 2:55 pm

You can see forum link on my profile, on the first post, other post i gave.
But here it is again:
http://ao1clan.forumfreek.com/

^^^^^^^^^^^
Link to my forum.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by _Twisted_Mods_ on February 16th 2015, 3:03 pm

sorry try now

Code:
$(function() {
  $('head').append('<style>#lcoverlay img{max-width:100%;max-height:100%}</style>');
var overlay = document.createElement('DIV'), image = document.createElement('IMG');
  overlay.onclick = function() { this.style.display = 'none' };
  overlay.setAttribute('style','display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);overflow:auto;z-index:100000;text-align:center;');
 overlay.setAttribute('id','lcoverlay');
  document.body.appendChild(overlay), overlay.appendChild(image);
 var img = $('img'),i;
      for (i=0; i<img.length; i++) {
        img[i].onclick = function() {
          overlay.style.display = 'block';
          image.src = this.src;
        };
      };
});

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 16th 2015, 4:18 pm

@_Twisted_Mods_ wrote:sorry try now

Code:
$(function() {
 $('head').append('<style>#lcoverlay img{max-width:100%;max-height:100%}</style>');
var overlay = document.createElement('DIV'), image = document.createElement('IMG');
 overlay.onclick = function() { this.style.display = 'none' };
 overlay.setAttribute('style','display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);overflow:auto;z-index:100000;text-align:center;');
 overlay.setAttribute('id','lcoverlay');
 document.body.appendChild(overlay), overlay.appendChild(image);
 var img = $('img'),i;
  for (i=0; i<img.length; i++) {
  img[i].onclick = function() {
  overlay.style.display = 'block';
  image.src = this.src;
  };
  };
});

This works, but this is like the same code as @wagner posted first.
The image doesn't get any bigger. It opens the image, but the size doesnt get any bigger.
I did an auto resize, so the image fits in the post, but when you click on it i want them bigger.

Besides that, i also want a close button and next and previous button.
Optional is a title.

PS: This js is kinda buggy, the one of wagner is better.

EDIT: I now know why the picture is openening in a new window, because the img is also provided with a link.
Maybe you also know how to get rid of that?

So when i host at Servimg, I copy the [IMG] but it provides me also a link in it, even I don't want that

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 17th 2015, 4:53 pm

--- bump ---

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 20th 2015, 2:28 pm

Bump

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by whitestone on February 22nd 2015, 12:17 am

bump

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by whitestone on March 3rd 2015, 1:47 pm

BUMP

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

Re: Lightbox for forum

Post by underestimated on March 3rd 2015, 2:25 pm

@whitestone wrote:So when i host at Servimg, I copy the [IMG] but it provides me also a link in it, even I don't want that
You need to copy the last Link and then use this button
or type the img-tags yourself (;

And you really need to provide a topic where one can see the code on your forum, because otherwise no one can help you with the adjustments^^

underestimated
Forumember

Posts : 32
Reputation : 2
Language : english, german
Location : germany

Back to top Go down

Re: Lightbox for forum

Post by whitestone on March 3rd 2015, 2:30 pm

@underestimated,Yes I can do that but other people won't do that, they just copy the IMG link. But thx for your reply.

And I don't really understand what you mean by 'provide a topic where one can see the code of your forum' . If someone want access to my forum, they can PM me and i will make them an administrator account so they can edit some stuff and access the Administration Panel.

whitestone
Forumember

Male Posts : 77
Reputation : 7
Language : Netherlands

http://ao1clan.forumfreek.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum