PDA

View Full Version : Lightbox Gallery Widget - Photo height, fit to screen size?


WebGirly3
08-30-2011, 10:00 PM
I used the Lightbox Gallery widget in Dreamweaver on a new web site. It works great except one thing.. My client wants each enlarged photo to fit to the height of each user's screen so it automatically adjusts depending on how large your screen is. I have made the photos large enough but I need a code that will fit to height 100% and keep them in proportion. Right now, it displays the photo at the actual size which is too large for my screen and others that I've tried.

Here is the gallery:
http://www.gulfwebservices.com/klb/portfolio/caloosa/

You can view the source to see the css for that page and then the additional lightbox.css is below: (I removed some irrelevant classes)

#jquery-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: auto;
}

#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#jquery-lightbox a img { border: none; }

#lightbox-container-image-box {
position: relative;
background-color: #171111;
width: 250px;
height: 250px;
margin: 0 auto;
}

#lightbox-container-image {
padding: 10px;
}

#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

#lightbox-container-image-box > #lightbox-nav { left: 0; }

#lightbox-container-image-box.loaded {
border-bottom: 0;
}

#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #171111;
line-height: 1.4em;
overflow: auto;
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}

#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}

#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}

Does anyone know how I can accomplish this? Or do I need to change something in the javascript? (Which I would have no idea how to do!)

Thanks in advance,
Tara

domedia
08-31-2011, 01:52 AM
I don't know how, but did you consider using a script that is meant for full screen instead of trying to hack this one?

WebGirly3
08-31-2011, 04:30 AM
Haha, no. I'd rather hack this one because I already have it implemented throughout the site. I was able to get the overlay (behind the photo that darkens the rest of the screen) to adjust using the following:

width:100%;
height:auto;
max-width:1000px;
max-height:765px;

But I can't get the photo to do the same with CSS so I was wondering if anyone had any suggestions or has worked with this Dreamweaver widget before. There has to be a way! Any suggestions?

WebGirly3
09-03-2011, 07:42 PM
Does anyone have any ideas about how to do this? I can't use Flash because my client wants it to show on the iPad. This gallery works beautifully on the iPad.. I just need the photos to readjust to the size of the screen. It seems simple enough. Can anyone help?? Or tell me who to ask for help?

gentleone
09-03-2011, 09:14 PM
It's not so easy that it seems. You have to hack around a lot both in CSS and JS. The point is that the lightbox plugin is based on pixels and in order to get a 100% height no matter the screen resolution everything has to be re-written to percentages. I don't know how to, but this seems to me the way to go.

I did some googling and I found this and it might be of help for you (check als the comment section, especially one of the last comments):
http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx

But like domedia said it might be easier to google for a jquery lightbox clone that can handle 100% height images from itself.

WebGirly3
09-03-2011, 11:02 PM
Thanks for the link.. The problem is that the first link provided is no longer valid so I can't download the js file needed for this.

I'm trying to find a gallery that is similar that fits the photo to the screen height but no luck so far..

gentleone
09-03-2011, 11:10 PM
The modified version is still available here:
http://www.sourcepod.com/twhbtf88-5047

You'll have to do a copy/paste. Dont forget to backup the original.

gentleone
09-03-2011, 11:48 PM
Galleria comes close to what you want:
http://galleria.aino.se/themes/folio/

WebGirly3
09-04-2011, 06:32 AM
Thank you so much!!! This one is perfect!

gentleone
09-04-2011, 06:02 PM
Thank you so much!!! This one is perfect!
You're welcome! Galleria does come with a price, but in the end it will be much cheaper then if you're trying for days and days to hack that Lightbox plugin with little to no JavaScript/jQuery experience. :)