Lightbox Photos from Widgetkit Lay Under Main Menu

[K Faylor]

You know how you can set lightbox feature for photos with Widgetkit?

Well when one clicks on them and the photo gets full size, it lays behind main menu at top. Not a big deal, but just a slight issue. No rush for an update or anything, just a suggestion.

Thanks

[Sushil Adhikari]

What version of Preference are you on? Does it do that when you view the live demo site (click on the woman with the sunglasses for a big pic)? I just tried it but it’s on top of the menu.

Demo Gallery

[K Faylor]

Sweet, my bad. Was using older version 🙂

Thanks

[Sushil Adhikari]

No worries… I’m assuming all is well now?

[K Faylor]

I do actually have yet another question hah. When I want to float an image to left or right of paragraph, it’s pretty easy in WordPress through Add Media option. However, the minute I insert code for lightbox feature, it loses it’s ability to float left or right in text, and just merely stands above paragraph. Is there something I’m missing codewise?

Thanks

[Sushil Adhikari]

Shouldn’t be affecting it because the lightbox is separate from the inserted image into your post or page. The important part to get a lightbox is to add that code to your

In fact, try this tutorial out for Luminescence:
https://www.styledthemes.com/luminescence-setup/195-adding-an-image-overlay-with-a-lightbox-using-widgetkit

[K Faylor]

I looked at video and used that code, and it just doesn’t seem to be floating to right of paragraph as it would in the absence of lightbox href addition.

Any suggestions? Only reason I bring it up is that people commonly float images to right or left of text when blogging, etc, so it would be nice to still utilize that lightbox feature outside of gallery types of pages.

Code I used:

Thanks

[Sushil Adhikari]

ok…I played with this and discovered that the “link” styling in the widgetkit plugin has it’s own styling which means your thumbnail is wrapped in this tag but it has no alignment attribute, hence the left aligning of your image.

Solution one, insert a linked image with a caption (basic method of WordPress), change the link to the full image, add this

data-lightbox="titlePosition:inside"

into the tag.

Solution two, wrap your linked image with a span like this:

You can adjust the margins by adding inline styling like style=”margin: 5px 5px 5px 20px;”

[Sushil Adhikari]

Actually, I think I found the styling in widgetkit and to create a custom css like this for the theme:

a[data-lightbox] {
    display: inherit!important;
}

I tried it and it seemed to have worked.

[K Faylor]

I added that to CSS and added lightbox code to link. If I add the data spotlight feature to it though, it does not work. Is there a CSS trick similar to what you did with lightbox that will also recognize the data spotlight feature?

Otherwise, it works.

Thanks

[Sushil Adhikari]

Unfortunately without recoding a bunch of stuff, the spotlight will have to be left out. It turns out there’s some css that is conflicting between this theme, the widgetkit and how the thumbnail (image) function of WordPress works.

[K Faylor]

Oh, okay. No problem. Thanks.

[Author]

Posts