Could you please help me achieve the following...


What I'm trying to do
I shoot panoramic photos that are 1:3 ratio, unfortunately this doesn't display very large in the gallery. So, I am trying to move the main image above the thumbnails and stretch the image to the full width of the gallery page.

Where I think I'm failing
I think that there is an ajax script that loads the image into the mainImage div, however the image that loads is the small sized version. When viewing the CSS information for the mainImage I see 'style = width: 400px; height: 133px; background-image: ... /0/S/LorneSwingBridge-S.jpg);'

My Question
How can I stretch the mainImage across the full width of my gallery page? Can I change the script to load an original version and scale to fit the mainImage div's width?

Link to page being edited
http://www.christopherjashdown.com/P...968876_dSBtLCV


The code that failed:

.gallery_12197853 { height:800px; }

.gallery_12197853 .leftColumn {
background-color:red;
position:relative;
top:380px;
left:0px;
}
.gallery_12197853 #thumbnails { }


.gallery_12197853 .rightColumn {
background-color:blue;
position:relative; top:0px; left:-452px;
width:930px;
display:block;
}
.gallery_12197853 #photos, .gallery_12197853 .displayPhoto { width:930px; height:310px; }
.gallery_12197853 .photo { width:930px; height:310px; }
.gallery_12197853 #mainImage { width:930px; height:310px; background-size:contain; }


Screen shot when editing with FireFox
Red applied to the left column, blue to the right column

bump.

Is this possible?

Many thanks for any help.

I'm not aware of a way to change the smugmug gallery style to place the large image above the thumbs. It may very well be possible, but...

If you want the image to stretch across the browser window, have you considered using the Journal style instead?

--- Denise