Skip to main content ↑ ↓
Topic: Elk Light Box and Image Control (Read 2153 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Elk Light Box and Image Control

I've been playing with Lightbox on my PC but I primarily interact with my forum via my phone. This being the case, I don't want huge images uploaded on it and have set the max size to 800 x 600 px. So let's dig in to my questions.

Inspect-Element.jpg I like the default lightbox that comes packaged in v1.1. However I'm unable to see any thumbnail pictures using a Firefox browser. I use Chrome mainly, just pointing that out. Ok I'm trying to edit the size of the image box ( expanded full width ) but can't seem to find what file it's in. I found the border color but that's all.

Smallbox-Expand.jpg The first container, I also found the border color but can't find how to edit the arrow and background.

Outter-Border-Dimensions.jpg Same as above, but I can't find the file to edit the dimensions on the full size box.

Let me also add, I installed the Fancybox Lightbox plugin. The thumbnail pictures don't show on my mobile phone but did work on my PC.

Any and All help is appreciated!

Re: Elk Light Box and Image Control

Reply #1 –

Look in index.css and index_light.css for "/* Poor Mans lightbox support */"  You will find an area in each file with the definitions that you want to change.  The expand arrow is
Code: [Select]
#elk_lb_expand:before {
	content: "\21D7";
	font-size: 2em;
	color: #CCCCCC;
}
so change #CCCCCC to what you desire. (and yes that should have been in the _variant.css file :(

The lightbox code is inside of topic.js.  I that file find the function expandThumbLB, it controls the sizing among other things.  I believe the box border is based on the screen size but you  should be able to adjust it to the image size.

When you say you are having a problem with FX, is that on mobile or desktop?

Re: Elk Light Box and Image Control

Reply #2 –

Thanks Spuds!

Not sure how I missed that one but it happens. I changed the rgba color also, but I'm still having problems with my website cache and sometimes it takes up to 24 hrs to refresh.

Yes, Fancy Lightbox plugin works fine on my PC, and iPad. It's only on my mobile that the issues arise. (See attachments) No thumbnail preview and error trying to expand it.  I'm going to start using this when it gets updated, it does a good job.

Specs:
Elkarte v1.1
iPhone 6s

Plugins Installed:
BBC FontAwesome Button
Bookmarks
Simple Audio Video Embedder

Re: Elk Light Box and Image Control

Reply #3 –

Thanks, I'll take a look at that, hopefully this weekend.

Also I've added some test code on this site to enable next/prev navigation with swipe actions for the built in lightbox.

Re: Elk Light Box and Image Control

Reply #4 –

Oh man, just tried the swipe on my phone and it works great. That's a really good feature. The only problem is when you tick the arrow box, and go full screen on the image. It pans up & down fine but trying to pan swipe right it auto flips back to normal viewing.

Re: Elk Light Box and Image Control

Reply #5 –

Cool .. glad it mostly worked for you. 

I'll take a look at the expanded image issue in the next few days.  If I forget just bump this topic to remind me, lots of things going on these days.

Re: Elk Light Box and Image Control

Reply #6 –

That issue should be fixed .

Re: Elk Light Box and Image Control

Reply #7 –

Thank you Spuds, looks and plays great now!