Lightbox for forum

[whitestone]

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: https://help.forumotion.com/t115826-add-a-lightbox-effect-to-the-images-of-the-forum

Not the link itself, but the tutorial I mean

[Wagner']

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

[whitestone]

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.

[Wagner']

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

[whitestone]

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

[Guest]

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

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.

[whitestone]

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?

[Guest]

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.

[Guest]

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...

[whitestone]

@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.

[Guest]

@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.

[whitestone]

@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.

[Guest]

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?

[whitestone]

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.

[Guest]

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!

[_Twisted_Mods_]

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;
        };
      };
});

[whitestone]

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]

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.

[_Twisted_Mods_]

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;
        };
      };
});

[whitestone]

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]

--- bump ---

[whitestone]

Bump

[whitestone]

bump

[whitestone]

BUMP

[underestimated]

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^^

[whitestone]

@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.