Question

I am using Fancybox plugin to display images in full screen when clicked., Is there any way to display it only in 90% width and 90% height and not full screen?

Also which and all classes/div’s i have to use to style Fancybox?

Answer 1

Taking the fancybox.net site as a reference, here are the styles that you can apply to get your 90% × 90% fancybox:

Note: Apply these after you have loaded the plugin’s native CSS file – to overwrite the defaults.

#fancybox-overlay {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90% !important;
}

#fancybox-wrap {
  position: fixed;
}

Disclaimer: I’ve not done any testing on this. The styles/id’s might need some tweaks.