CODEWITHSUNDEEP
jqueryfancybox
Paranoid Android
Paranoid Android

Reputation: 5037

Remove drop shadow from jQuery fancybox 1.3.4

Is there a way to remove the drop shadow effect?

I deleted the drop shadow images but the shadow is still there...

Thank you

Upvotes: 5

Views: 8471

Answers (5)

Matias
Matias

Reputation: 928

Instead of changing the lib css, you can just add this your css after the fancybox css lib include

.fancybox-bg {
  display: none;
}

Upvotes: 0

Siva
Siva

Reputation: 479

On the jquery.fancybox css file, add "display:none;" to .fancybox-bg{...}

Upvotes: 0

Abhik
Abhik

Reputation: 674

I spent like 30 minutes to find how to do that in FancyBox 2.0 and up. Though this question is for FancyBox 1 series, I though it would be nice to save some time for people looking for it on FancyBox 2.0 series.

Delete these declaration around Line# 41 in sources/jquery.fancybox.css file

.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

Upvotes: 4

peu
peu

Reputation: 71

Don't forget the IE CSS. Everything below this line must also be removed

.fancybox-ie .fancybox-bg { background: transparent !important; }

Upvotes: 7

Beto Frega
Beto Frega

Reputation: 976

On the jquery.fancybox-1.3.4.css just remove or alter the following lines:

#fancybox-bg-n {
    top: -20px;
    left: 0;
    width: 100%;
    background-image: url('fancybox-x.png');
}

#fancybox-bg-ne {
    top: -20px;
    right: -20px;
    background-image: url('fancybox.png');
    background-position: -40px -162px;
}

#fancybox-bg-e {
    top: 0;
    right: -20px;
    height: 100%;
    background-image: url('fancybox-y.png');
    background-position: -20px 0px;
}

#fancybox-bg-se {
    bottom: -20px;
    right: -20px;
    background-image: url('fancybox.png');
    background-position: -40px -182px; 
}

#fancybox-bg-s {
    bottom: -20px;
    left: 0;
    width: 100%;
    background-image: url('fancybox-x.png');
    background-position: 0px -20px;
}

#fancybox-bg-sw {
    bottom: -20px;
    left: -20px;
    background-image: url('fancybox.png');
    background-position: -40px -142px;
}

#fancybox-bg-w {
    top: 0;
    left: -20px;
    height: 100%;
    background-image: url('fancybox-y.png');
}

#fancybox-bg-nw {
    top: -20px;
    left: -20px;
    background-image: url('fancybox.png');
    background-position: -40px -122px;
}

Upvotes: 12

Related Questions