JavaScript Forum

**ArtphotoasiA** · 12-07-2009, 05:55 PM

Hi there, nice to be part of the forum, and sorry for my English, I will try my best but is not my mother tongue.

With bigger monitors available on the market the gap between 1024x768px and 1920x1200px is now really huge so I need to manage a photography website and to display photos as big as possible with all kind of monitors.
Static images with fix dimensions simply do not work anymore. I was a user of lightbox javascript, I loved it.

Looking for something similar I just found out yesterday shadowbox a javascript that actually improve a lot lightbox... with one nice features (not the only one of course) the use of big photos that will be automatically resized to fit the screen whatever resolution the user's screen is.

I found shadowbox javascript quite easy to install ( great thing the compatibility with rel="lightbox[texttext]" )

Regretfully was not easy to be managed and to be modified.

I spent several hours to create my first page model using shadowbox
(http://www.artphotoasia.net/album_ph...bangkok_05.php)

But now I'm really satisfied.

I will try now to write what I have noted and solved:

(1) the script works perfectly with ALSO XHTML doctype like this:

Code:

========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
========================================================

(2) the script works with IE8 IE7 IE6 but be CAREFULL to the features settings in the init line:

Code:

========================================================
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    handleOversize:     "resize"
});
</script>
========================================================

Just one small mistake like: handleOversize: "resize", just a comma can cause a script error but it works anyway with all browser also IE8 but will not work with IE7 IE6 so note that, just in case.

(3) I have noted no problem in Chrome, Firefox, Opera, Safari at least the last releases.

(4) regarding the TITLE AND CAPTION issue I have to say (after hours of test) that the author of the script probably is right, it is not possible to manage in a good way the resizing of the boxes without knowing BEFORE the height of the title and so basically we are forced to use a fix height. More is the height more line of text will be displayed.

So my suggestion is: decide how many lines you may need for title or description and fix the height of the box accordingly to font px size, and line height.

I have done that for a 10px font so I can have 3/4 lines (quite enough)

Code:

========================================================
#sb-title,#sb-title-inner{
display:block;
height:36px;
}
=======================================================

- 4a
If you take out from CSS the height of the title it works (but not very well) for Chrome, Firefox, Opera, Safari.
A padding-bottom will solve the last line cut issue. This solution does not work with IE whatever version. IE require anyway fixing a height otherwise will not display more then text lines.

Code:

========================================================
#sb-title,#sb-title-inner{
display:block;
padding-bottom:20px;
}
========================================================

- 4b
I have noted that is much better to have the text below the photos so who is interested in that must change the file shadowbox.js and find in there the markup values, then must change the position of a couple of div

Code:

<div id="sb-title"><div id="sb-title-inner"></div></div>

like I have done here: BE CAREFULL DO NOT CHANGE ANY SPACE IN THE CODE OR WILL NOT WORK... USE THIS CODE STARTING FROM

Code:

<div style="clear:both">

'<div style="clear:both"></div></div></div><div id="sb-title"><div id="sb-title-inner"></div></div></div></div>'

In this way the text will be under the photos.

Finally I have to say that this script is absolutely a great thing! after few hours of work i have re-created a lightbox feeling with shadowbox.css modification.
I will change now all my website portfolios pages using shadowbox javascript, this is the first test page so you can see the real final result http://www.artphotoasia.net/album_ph...bangkok_05.php

This is part of the CSS I have modified, if someone want to know more just let me know.
Best Regards.

Code:

====================================
FOR THE IMAGE LOADING
====================================

#sb-loading{
position:absolute;
top:0;
width:100%;
height:100%;
display:none;
text-align:center;
padding-top:10px;
}
#sb-body,#sb-loading{
background-color:#FFFFFF; 
background-image:url(resources/loading.gif);
background-repeat:no-repeat;
background-position: center;
}





====================================
FOR THE TEXT
====================================

#sb-title,#sb-info{
background-color:#FFFFFF;
position:relative;
margin:0; 
padding:0;
overflow:hidden;
}
#sb-title-inner,#sb-info-inner{
background-color:#FFFFFF;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 14px;
font-weight: bold;
}
#sb-title,#sb-title-inner{
display:block;
height:36px;
padding-bottom:20px;
}
#sb-title-inner{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:14px;
font-weight:bold;
color:#666666;
padding:8px;
}







====================================
FOR THE BAR
====================================

#sb-info,#sb-info-inner{
height:20px;
}
#sb-info-inner{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:14px;
font-weight:bold;
color:#666666;
padding-left: 8px;
}
#sb-nav{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:14px;
font-weight:bold;
float:right;
height:16px;
padding:2px 0;
width:45%;
}
#sb-nav a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:14px;
font-weight:bold;
display:block;
float:right;
height:16px;
width:16px;
margin-left:3px;
cursor:pointer;
}
#sb-nav-close{
background-image:url(resources/close.png);
background-repeat:no-repeat;
padding-left:10px;
}
#sb-nav-next{
background-image:url(resources/next.png);
background-repeat:no-repeat;
margin-top:-3px;
padding-left:10px;
}
#sb-nav-previous{
background-image:url(resources/previous.png);
background-repeat:no-repeat;
margin-top:-3px;
padding-left:10px;
}