Hi Roz,
The best solution would be to re-size the image or choose a smaller version that’s created by WordPress when choosing the photo. This will help your page load faster and search engines like it better too. However, I also know how aggravating it can be to get an answer like that without getting a real answer to your question so here we go…
The best way to make this kind of change is in CSS. You can do this in your child theme or using a plugin that allows you to add your own CSS code.
As for what code to put in, this should work for you.
#fancybox-wrap {max-width: 90% !important;}
#fancybox-content {width: 100% !important;}
It’s not a perfect work around, but I’m hoping it will help you out. 🙂
Also note that I used “width” instead of height”. In most cases people use width to set these kinds of things, but if you have a lot of images that are pretty tall just switch out the word “width” with “height” and I think you should be good with that as well.
Sorry it took a couple of days for us to get back with you. If you have any additional questions please post in our forum on http://wptooling.com. Our developers will receive email notifications that way and can respond much faster.
Happy hunting!
Thanks for the reply, actually using the height didn’t seem to make any changes to the lightbox. Looking at the code in firebug, it doesn’t look like its pulling in a height and width from anywhere, not just my CSS (added to “my custom css” plugin) or any other CSS file.
If you would like to take a look:
http://naidevsite6.us/b1-2-bedroom-1-bath/
Yes, the height and width are generated in Javascript instead of CSS, so it shows inline instead of loading in a CSS file.
It appears to be working just fine on my end when I visit that page. The height and width of the image don’t run off the page for me. I do see that you have a scrolling navbar at the top that is covering the top of the photo and the “x” to close the lightbox, but that seems to only happen once I’ve scrolled down to a certain point.
One good solution may be to change the z-index on that navbar.
div.navigation-wrapper {z-index: 8000 !important;}
Right now the z-index is set to “9999”, so changing that value as shown above will cause the navbar to appear behind the lightbox background.
You might also consider trying to make the change in Javascript. Maybe try this?
$.fancybox.open({
autoSize : false,
width : "auto",
height : "90%"
});
Got that from a Stack Overflow post and tweaked it.
Let me know what you end up doing.
sorry for the late reply,k the z-index work around seems to do the trick, the pop up window still is under the WP admin dashboard quick links bar at the top but since I the only one that sees that, I dont consider it an issue. Did you pull the plugin? hopefully just to work on it, its got potential! Thanks for all your hard work
