Page 1 of 1
Radius for Light Box
Posted: Thu Dec 16, 2021 12:15 am
by snpwire
Hello, is there a way, without being too much of a workaround, to add radius to Light Box corners?
I know this is a 3rd party feature, however, it is a part of the program.
Thanks in advance for any help on this.
Mhz
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 12:31 am
by BaconFries
There is more than one "Lightbox" available so to which one are you using?.
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 12:45 am
by snpwire
Hello baconFries,
As to the wysiwyg version 17, it only gives the dropdown menu as 'Open in a Lightbox' from the Link menu -> Target window or frame' dropdown selection. I am using the fancybox as Lightbox from the Page Properties Miscellaneous.. Thanks..
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 2:52 am
by crispy68
In messing with it, I can get it using CSS however, fancybox adds shadowing that is rectangular which then ruins the curved corner effect. You would then need to remove the shadowing for it to look good which would require even more code.
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 3:08 am
by BaconFries
crispy68 If memory serves me the shadow is actually created with images so these would need to be removed then the code you have should work. Again with memory there is a "hack" or modified script on GitHub that fixes this
https://gist.github.com/johnhunter/820165
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 4:52 am
by rogerl
In my dealings with Fancybox I found the best way to sought a problem was to track down the originator, Janis Skarnelis. He was on Github in one of the forums but seems to have moved on. I had requested this info myself and never got an answer but he has helped with many other queries. In the end I compromised and used a CSS hack to get something close to what I wanted. See slide show here
https://www.whiteshepherdsnz.com/memtzarPuppies.php
It uses the following code in the Head:
Code: Select all
/* CSS for round frame and shadow around slideshow images */
.fancybox-content,
.fancybox-image-wrap {
background: #000 !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9) !important;
overflow: visible !important;
border:10px solid black !important;
border-radius: 20px !important;
}
The border width is a compromise to get past the square corners of the image. Anyway I thought it looked okay.
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 1:28 pm
by snpwire
Thanks for the helpful tips. I will be checking into each one to see what works best for me and will report back.
With that said.. Some time ago, I was able to get something less than perfect on this by digging down in the JS file and modifying some of the code. I will post it if I find it. The issue is that it affected globally unless you created independent JS for each page if you wanted different outcomes.
I was hoping fancybox had a simpler method for radius but it appears you have to do a bit of cumbersome coding to get this done.
Thanks for the help.
Re: Radius for Light Box
Posted: Thu Dec 16, 2021 1:42 pm
by Joe_120
If you don't mind removing the shadow, the following css will give you rounded corners with one or two borders;
Code: Select all
.fancybox-bg, #fancybox-wrap {
display: none;
}
#fancybox-outer {
/* border: solid blue 10px; */
border-radius: 35px;
}
#fancybox-content {
/* border-color: black!important; */
border-radius: 25px;
}
Leaving the css as is will show a single white border.
Remove the comments from the content and change the white border to any color.
Remove the comments from the outer will give a second outer border. Change color to suit. Does flash on slide change.
Adjust colors/sizes to suit.
Joe
Re: Radius for Light Box
Posted: Sat Dec 18, 2021 4:01 am
by snpwire
Thanks Joe and to all.. I was able to dig back in some of my older coding and found what I was initially using on my fancybox corners for a bit of radius control. Keep in mind the, I assume white drop-shadow, will have to be dealt with as I explain here. This is for the fancybox 'jquery.fancybox-1.3.4.pack.js.
Original Notes:
Below are changes I made to get a radius on the fancybox content corners. #fancybox-outer need the background either transparent; or inherit; .. (This prevents the corners from showing white as originally generated. Next, add border-radius: 'size in px' near end of #fancybox-content.
Code: Select all
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: transparent;
}
#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 7802;
border: 0px solid #fff;
border-radius: 15px;
}
#fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 7801;
}
I understand there are multiple ways in possibly achieving this for lightbox type js, however, just thought I would add this bit of personal information I had. And I appreciate the helpful input. Thanks.
Mhz
Re: Radius for Light Box
Posted: Sat Dec 18, 2021 4:56 am
by rogerl
I forgot to mention in my example I use fancybox 3.
Just came across this example which works well on V3. You can play with the code to get what affect you're after.
Code: Select all
img.fancybox-image {
border-width: 5px;
border-color: rgba(255,255,255,1.0);
border-style: solid;
border-radius: 20px;
padding: 10px;
}
I changed my web page to use this and removed the padding. Removing lines 3 & 4 leaves just the image with rounded corners.
https://www.whiteshepherdsnz.com/memtzarPuppies.php
The slide show ------
Re: Radius for Light Box
Posted: Sun Dec 19, 2021 7:07 am
by rogerl
I tried Joe_120's answer in the standard version supplied with Web Builder (1.3) and worked okay. Using a link from an image, show in lightbox, fancybox.
In page html, head, I added Joe's code in a <style>:
Code: Select all
<style>
.fancybox-bg, #fancybox-wrap {
display: none;
}
#fancybox-outer {
/* border: solid blue 10px; */
border-radius: 25px;
}
#fancybox-content {
/* border-color: black!important; */
border-radius: 15px;
}
</style>
With a standard slideshow you could double click on selected slideshow and add to the style tab a 1px border with your selection of radius then save.
Slideshow will show images with rounded corners.
Re: Radius for Light Box
Posted: Mon Dec 20, 2021 11:34 pm
by snpwire
That looks nice rogerl!
Another great way to get the radius looks on fancybox. Thanks.
