Title: Lightbox Customization Question
Last modified: August 21, 2016
---
# Lightbox Customization Question
* Resolved [nnarang](https://wordpress.org/support/users/nnarang/)
* (@nnarang)
* [12 years, 2 months ago](https://wordpress.org/support/topic/lightbox-customization-question/)
* I need to create a lightbox gallery where anybody can click a picture in the
gallery and a lightbox opens with the picture in left half of the lightbox and
HTML content in the right half of the lightbox. I’ve attached a picture of how
I hope the lightbox will look:
* [http://trojanmun.org/wp-content/uploads/2014/03/Pitfire-Pizza-Lightbox-Example.jpg](http://trojanmun.org/wp-content/uploads/2014/03/Pitfire-Pizza-Lightbox-Example.jpg)
* Is this possible with your app? And, if so, where should I begin? I’ve tried
to adjust the CSS in the jquery.fancybox-1.3.6.css file, but I haven’t been able
to make any significant changes.
* Any advice would be great!
* [https://wordpress.org/plugins/easy-fancybox/](https://wordpress.org/plugins/easy-fancybox/)
Viewing 5 replies - 1 through 5 (of 5 total)
* [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
* (@ravanh)
* [12 years, 2 months ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717257)
* 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:
* ```
```
* 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 🙂
* Thread Starter [nnarang](https://wordpress.org/support/users/nnarang/)
* (@nnarang)
* [12 years, 1 month ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717409)
* Thank you so much for your detailed instructions.
* I have only just had a chance to implement them on a test page: [http://trojanmun.org/2312-2/](http://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.
* [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
* (@ravanh)
* [12 years, 1 month ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717417)
* 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 `` 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 [http://trojanmun.org/committees/](http://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.
* Thread Starter [nnarang](https://wordpress.org/support/users/nnarang/)
* (@nnarang)
* [12 years, 1 month ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717420)
* 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 [http://trojanmun.org/experience_la/](http://trojanmun.org/experience_la/)
is more in line with what I am trying to create using your plugin.
* [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
* (@ravanh)
* [12 years, 1 month ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717431)
* Looks good 🙂
* Please be aware that even if you’ll not be using the prettyPhoto lightbox (the
other one used on [http://trojanmun.org/committees/](http://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 [http://trojanmun.org/wp-content/themes/galaxy/js/theme.js](http://trojanmun.org/wp-content/themes/galaxy/js/theme.js)
and one inside the Photomosaic plugin script file [http://trojanmun.org/wp-content/plugins/photomosaic-for-wordpress/js/jquery.photoMosaic.js](http://trojanmun.org/wp-content/plugins/photomosaic-for-wordpress/js/jquery.photoMosaic.js)…
Viewing 5 replies - 1 through 5 (of 5 total)
The topic ‘Lightbox Customization Question’ is closed to new replies.
* 
* [Firelight Lightbox](https://wordpress.org/plugins/easy-fancybox/)
* [Support Threads](https://wordpress.org/support/plugin/easy-fancybox/)
* [Active Topics](https://wordpress.org/support/plugin/easy-fancybox/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/easy-fancybox/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/easy-fancybox/reviews/)
* 5 replies
* 2 participants
* Last reply from: [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
* Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/lightbox-customization-question/#post-4717431)
* Status: resolved