Lightbox Customization Question

Hi, it is possible but not in the ‘normal’ way. Editing CSS will not help you here.

The basics:
1. Go to Settings > Media and activate the option “Inline Content”.
2. Create a test page and insert a thumbnail image.
3. Modify the thumbnail image and change “Link to” field so that it does not link to the full-size image but to “#inline-content-1” (for example) and then on the Advanced tab fill in fancybox-inline in the Class field, then hit Apply.
4. Create a new paragraph in the same page where you write the text that you want on the left of the image.
5. Insert the same image again at the beginning of this new paragraph, this time choosing medium size and float left, and “Link to: none”.
6. Switch to the HTML view tab in the post editor and find the newly created paragraph, then wrap it with code like this:

<div class="fancybox-hidden" style="display:none">
<div id="inline-content-1" style="width:600px;height:400px">
[image plus text here]
</div>
</div>

Notice how the part after the # in the “Link to” field corresponds with the ID of the inner div in the code above. This is important!

The width and height in the style attribute if the innner div can be adjusted to fit the image and content size that you desire.

The result should be that the section with medium sized image and text is hidden but will be opened in the lightbox when the thumbnail image is clicked.

Adding more thumbnails like this, you will need to change the ID and corresponding “Link to” each time. They have to be unique for each thumbnail and corresponding inline content.

Be aware that this will not be possible when inserting a complete gallery because then you cannot define where each thumbnail links to. You’ll have to insert each thumbnail and create the inline content box individually.

Hope that clears things up ??

Thank you so much for your detailed instructions.

I have only just had a chance to implement them on a test page: https://trojanmun.org/2312-2/

I do have a few followup questions that I was hoping you could answer. Firstly, as you can see when you click the first image link, the images in the lightbox are not vertically aligned. For some reason, I cannot seem to fix this problem and I was wondering if you had any advice about doing so.

I’ve also been having trouble editing the text styles within the lightbox. I can’t seem to find the right CSS file to edit to change these styles.

Again, thank you so much for your help on this. I really appreciate it.

Style rules that begin with #fancybox-content will apply to all lightbox content like for example:

#fancybox-content p {
  line-height: 1.2;
}

You can append such rules to the theme’s stylesheet but if you want to keep them across theme upgrades, then install a plugin like Jetpack and activate the Custom CSS module (deactivate all other modules that you don’t use) and enter the style rules on the Appearance > Edit CSS admin page.

Alternatively, you can give the inline content DIV a class that is commonly used in the current themes stylesheet. Like in your case <div id="inline-content-1" class="contentarea"> might have the desired result without any additional style rules. IF only partly, then you can also extend on this with an extra style="line-height:1.2" attribute.

By the way, opening images on a page like https://trojanmun.org/committees/ I notice you are using another lightbox, resulting in two lightboxes with the same image on top of each other. Even though I’m surprised it is working at all, you do not want to use two lightbox scripts together. Better to make a choice and stick to one.

Again, thank you for you’re quick response. I’ve been really impressed by the support you have provided for this app. I did manage to change the CSS Styles for the lightboxes using inline style attributes. As for the Committees page, I am currently working to recreate that gallery. The page https://trojanmun.org/experience_la/ is more in line with what I am trying to create using your plugin.

Looks good ??

Please be aware that even if you’ll not be using the prettyPhoto lightbox (the other one used on https://trojanmun.org/committees/) it will still be loading on every page request when you don’t actively remove it.

In fact, there are two prettyPhoto libraries loaded: one in your themes script file https://trojanmun.org/wp-content/themes/galaxy/js/theme.js and one inside the Photomosaic plugin script file https://trojanmun.org/wp-content/plugins/photomosaic-for-wordpress/js/jquery.photoMosaic.js …