Lightbox

Lightbox without any border? - Lightbox

Lightbox without any border?

by Schtorsch » Fri Oct 27, 2017 3:38 pm

Hello,

is it possible to get the lightbox without any border? Actually there is the white border around the picture. I think it´s something in css or javascript - but I have no idea what and where... :oops:
Schtorsch
Registered User
Posts: 49
Joined: Tue Aug 12, 2008 8:49 am
Contact:

Re: Lightbox without any border?

by Tastenplayer » Tue Jan 16, 2018 5:17 pm

The border is specified in the css

I have tried to change the border in my new modern style(width, colour and radius)..
I created a folder called Modern. Then I adjusted the border in the ext. css. and also in the minimum.css.
However, the wide white border is still displayed. :)
I emptied the cache. Do I have to disable and reactivate this ext. ? Or why else doesn't it work?

Code: Select all

/* Preload images */
body:after {
  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 2px;

  /* Image border */
  border: 2px solid black;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 2px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: #f9f9f9;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 2px;
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #bf0000;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #262223;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
Now I've noticed. That was only the border, if the pictures are clicked. :lol: Where/how to change the border for the tumbnails?
More of my styles you can find in my phpBB Style Board & More My styles -3.2.10-RC2
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
User avatar
Tastenplayer
Registered User
Posts: 718
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Lightbox without any border?

by M.O.B. » Sat Jul 13, 2019 4:10 am

Since there are two types of images that you can list in a post, let me tell you where to do that:

INLINE ATTACHMENTS:
For inline attachments that you allow your users to upload and then they use the inline attachment feature. i.e. using the [attachment] bbcode.

Here is where you can adjust those colors and borders:

You need to go into your forum's theme CSS files.

Normal (not HOVER):

/styles/prosilver/theme/colours.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail img {
    border-color: #666666;
    background-color: #FFFFFF;
}
/styles/prosilver/theme/content.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail img {
    padding: 3px;
    border: 1px solid transparent;
    box-sizing: border-box;
}
HOVER:

/styles/prosilver/theme/colours.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail dt a:hover img {
    border-color: #368AD2;
}
/styles/prosilver/theme/content.css

Adjust the following properties to make your custom changes...

Code: Select all

dl.thumbnail dt a:hover img {
    border: 1px solid transparent;
}

URL IMG LINKS:
Images that users will link from outside URLs i.e. using the [img] bbcode

Here is where you can adjust those colors and borders:

You need to do this within a file that is included with this extension:

OPEN: /ext/vse/lightbox/styles/all/template/js/resizer.js

Adjust the following properties to make your custom changes...

Code: Select all

	$.fn.extend({
		borderHover: function() {
			return this.each(function() {
				$(this).css({
					border: 'solid 3px transparent',
					borderRadius: '6px',
					transition: 'border-color 0.1s ease-out',
					cursor: 'pointer'
				}).hover(function() {
					$(this).css('border-color', '#4ae');
				}, function() {
					$(this).css('border-color', 'transparent');
				});
			});
		}
	});
I hope that helps. ;)
Image
User avatar
M.O.B.
Registered User
Posts: 939
Joined: Tue Jan 04, 2005 1:07 am
Location: San Diego CA USA
Contact:

Re: Lightbox without any border?

by Tastenplayer » Sat Jul 13, 2019 8:40 am

Thank you very much for the detailed instructions.

It's not up to date anymore, but when my style is finished, I'll definitely try it.
More of my styles you can find in my phpBB Style Board & More My styles -3.2.10-RC2
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
User avatar
Tastenplayer
Registered User
Posts: 718
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact: