Search code examples
javascriptmodal-dialogshadowbox

Modal Box with this "Resize Feature"


I almost always use ShadowBox.js for modal effects. I have a requirement that I can't seem to pull off with ShadowBox and I wonder if anyone has another recommendation that could handle it, here are the requirements:

On a gallery page, the user will see all of the photos in the gallery, when they click to open them, a modal will popup with gallery specific nav (easy).

The modal will have the normal effect of the darkened content, but will have a sort of frame in which photos (and occasionally videos) will show.

The frame box will always be 900 pixels wide, and the inside images will have a max width of 800px.

The photos will be centered in the always 900 pixel frame with at least 50 pixels padding on each side, if, for example, the image is 600 pixels wide, the image will have 150 pixels on each side.

The photos will all be cropped and prepped before they are uploaded so that none will be more than 800 pixels wide.

I can easily set the dimensions in shadowbox, but that forces the image to be stretched, dumping the dimensions and using the standard init options gives me image resized modals.

Thanks in advance


Solution

  • Hmm, now I wonder if I have answered my own question, the photos are DB managed, so I could simply create an html template that holds a photo based upon a QS param, each time the modal opens an image, they would actually be opening the HTML page at 900px that holds the image.