Viewing 30 posts - 1 through 30 (of 34 total)
1 2
  • Author
    Posts
  • December 15, 2015 at 2:04 pm #553006
    Sigmund

    Hello at Kriesi,
    I am using the Masonry Gallery and like to have the ligthbox effct with a border like this one:
    http://benjaminpichelmann.com/transportation-GOODWOOD_3.html
    Is this possible with something like Box-Shadow or Border-Image? That would be great!

    Warm Regards
    Jörg

    December 15, 2015 at 2:50 pm #553043
    Andy

    Hi Sigmund!

    not sure if it’s possible, but send us a link showing your masonry in question and we check it out.

    Best regards,
    Andy

    December 15, 2015 at 4:01 pm #553107
    Sigmund

    Hi Andy,
    thanks, it is http://www.mcsimons.de/land-wasser/

    Regards
    Jörg

    December 18, 2015 at 9:03 pm #555201
    Andy

    Hi!

    it would require a huge amount of time and customization of the theme and that is why you would need to hire a freelance developer for this job.

    Cheers!
    Andy

    August 15, 2016 at 11:56 pm #672910
    Sigmund

    Hi @ Kriesi,
    I have done some coding to the masonry gallery and I have added box-shadow to the lightbox:

    .mfp-img{
border:5px solid #fff;
box-shadow:0px 0px 15px #8E8E8E;
}

    But I want Box Shadow Effects like Effect 2 from here https://paulund.co.uk/learn-css-box-shadow .
    As a alternative I would use a image, like for the tumbnails.

    Could you help?

    Thanks.

    August 19, 2016 at 5:41 am #674489
    Ismael

    Hi,

    Add the following code in the Quick CSS field. Adjust the value as needed. 

    #top .av-masonry-entry:before, #top .av-masonry-entry:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
}

#top .av-masonry-entry:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

    Best regards,
    Ismael

    August 19, 2016 at 11:45 am #674682
    Sigmund

    Thanks, Ismael,
    but this did not work out. I need the shadow for the lightbox images.

    Best regards

    August 23, 2016 at 5:35 am #676171
    Ismael

    Hi,

    I see. I thought you want to add it in the masonry items. Please use this instead:

    .mfp-gallery .mfp-image-holder .mfp-figure figure:before, .mfp-gallery .mfp-image-holder .mfp-figure figure:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 10px;
    left: 5px;
    width: 50%;
    top: 90%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
}

.mfp-gallery .mfp-image-holder .mfp-figure figure:after {
    transform: rotate(3deg);
    right: 5px;
    left: auto;
}

.mfp-bg {
    background: #ffffff;
}

    Best regards,
    Ismael

    August 23, 2016 at 9:41 am #676263
    Sigmund

    Hi Ismael,
    thanks, I tried and integrated the code (Design > Custom CSS, Line 1030) but it did not work. Can you have a look? Thanks.

    Best Regards

    August 26, 2016 at 6:11 am #677944
    Ismael

    Hi,

    We added the code in the Enfold > General Styling > Quick CSS field. If you have a child theme, you can place it in the style.css file. Where is the page with the gallery?

    UPDATE: It is working. Please check the lightbox: http://briggite-liedtke.de/wordpress/test/

    Best regards,
    Ismael

    • This reply was modified 8 years, 3 months ago by Ismael.
    August 26, 2016 at 11:15 am #678049
    Sigmund

    Hi Ismael,
    I see http://briggite-liedtke.de/wordpress/test/ lightbox. But this is still the normal shadow like above mentioned http://briggite-liedtke.de/wordpress/portfolio-item/goodwood-ramp/

    I want it like Effect 2 in https://paulund.co.uk/learn-css-box-shadow so that both edges coming up. Is that possible?

    Thanks!

    August 31, 2016 at 5:28 am #679791
    Ismael

    Hi,

    Adjust the value of the bottom property to 10px. https://kriesi.at/support/topic/box-shadow-or-border-image-in-masonry-gallery-lightbox/#post-676171

    Best regards,
    Ismael

    August 31, 2016 at 10:50 am #679899
    Sigmund

    Hi Imsael,
    thanks, now it works on your link http://briggite-liedtke.de/wordpress/test/ but not in the lightboxes like on http://briggite-liedtke.de/wordpress/portfolio-item/goodwood-ramp/ Can you have a look what I am doing wrong?

    Best Regards

    September 5, 2016 at 4:12 am #681899
    Ismael

    Hi,

    The selector requires a little adjustment. Replace the css code with the following:

    .mfp-gallery .mfp-image-holder .mfp-figure:before, .mfp-gallery .mfp-image-holder .mfp-figure:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 10px;
    left: 5px;
    width: 50%;
    top: 90%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
}

.mfp-gallery .mfp-image-holder .mfp-figure figure:after {
    transform: rotate(3deg);
    right: 5px;
    left: auto;
}

    Best regards,
    Ismael

    September 5, 2016 at 7:38 am #681964
    Sigmund

    Hi Ismael,
    thanks. This code only makes the left side of the shadow (see it at https://postimg.org/image/n8ag2dtaz/), I want both sides bended.

    Best Regads

    September 7, 2016 at 3:29 pm #683194
    Andy

    Hi,

    adjust box-shadow value in Ismael’s code. For example use

    box-shadow: #8B8B8B -4px 0px 10px -4px, #8B8B8B 4px 0px 10px -4px;

    Best regards,
    Andy

    September 8, 2016 at 10:24 pm #683903
    Sigmund

    Hi,
    Nope, this is deleting the whole shadow again.
    Best Regards

    September 10, 2016 at 2:50 pm #684506
    Andy

    Hi,

    add this code into Quick CSS field:

    a.avia_image.lightbox-added {
box-shadow: #8B8B8B -4px 0px 10px -4px, #8B8B8B 4px 0px 10px -4px;
}

    and adjust as needed.

    Best regards,
    Andy

    September 12, 2016 at 10:35 am #684972
    Sigmund

    Hi Andy,
    I am sorry, but this does not work also. I have added it to custom css but it did not do anything. Can you have a look?
    Best Regards

    September 12, 2016 at 12:20 pm #685024
    Andy

    Hi,

    as far as I can see it the image in question has this shadow effect now. So it seems to work for me: http://i.imgur.com/lBFfcqR.png

    Please clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    September 12, 2016 at 12:34 pm #685033
    Sigmund

    Hello Andy,
    as mentioned above it works on your link http://briggite-liedtke.de/wordpress/test/ but not in the other lightboxes like on http://briggite-liedtke.de/wordpress/portfolio-item/goodwood-ramp/

    Regards

    September 12, 2016 at 2:10 pm #685105
    Andy

    Hi,

    this is the code which is used on the link you mentioned: 

    .gw-gopf-post-media-wrap {
box-shadow: #8B8B8B -4px 0px 10px -4px, #8B8B8B 4px 0px 10px -4px;
}

    Adjust it as needed.

    Best regards,
    Andy

    September 12, 2016 at 2:37 pm #685139
    Sigmund

    Hi,
    I tried some adjustment with your code but I cannot make the edges bend.
    Regards

    September 12, 2016 at 3:06 pm #685176
    Andy

    Try this for box shadow:

    #8B8B8B -14px 10px 30px -4px, #8B8B8B 4px 0px 10px -4px

    Best regards,
    Andy

    September 12, 2016 at 3:13 pm #685184
    Sigmund

    Hi Andy,
    Ok, I have done

    .gw-gopf-post-media-wrap {
box-shadow: #8B8B8B -14px 10px 30px -4px, #8B8B8B 4px 0px 10px -4px;
}

    without result.
    Thanks for your patience.
    Regards

    September 13, 2016 at 12:31 pm #685684
    Andy

    Hi,

    I checked link in private section but there is no box-shadow effect anymore. We need it as a reference.

    Best regards,
    Andy

    September 14, 2016 at 11:39 am #686282
    Sigmund

    Hi Andy,
    sorry, it is back again. It is ok in /test but not in all other lightboxes.
    Regards

    September 14, 2016 at 1:15 pm #686332
    Andy

    Hi,

    not so sure what you mean, cause now on both links there is this box-shadow effect: http://imgur.com/a/VLLNp

    The only difference seems to me the border on the second link. You can remove it use this code:

    .gw-gopf-post-media-wrap {
border: none;
}

    Best regards,
    Andy

    September 14, 2016 at 1:28 pm #686334
    Sigmund

    Hello,
    I see no box shadow on lightbox images.
    http://imgur.com/a/PGcY2
    I tried hard refresh.

    Best Regards

    September 16, 2016 at 11:02 am #687377
    Andy

    Hi,
    of course there is a box-shadow effect on the image you’ve provided. Don’t you see the shadow around the image? Here is an example of this image with and without box-shadow effect: http://imgur.com/a/UK780

    Best regards,
    Andy

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 34 total)
1 2
  • The topic ‘Box-Shadow or Border-Image in masonry gallery lightbox’ is closed to new replies.