Clearbox Lightbox & IE8

Hi
My very first website using Dreamweaver and I am having a little issue with the slide show in IE8.
I have added HTML5Shiv which corrected a few other issues but the thumbnails take you to the first photo with no controls.
http://www.dinoandterry.co.uk
I don't really want to change widgets at this point.
And as it works in most other browsers, would really love a simple solution if there is one.
Have read a few other forum questions which have helped to get me to this point.
Thanks
Kim

OK. I see it on Places.
You have a significant number of HTML code errors. That's not a good thing.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.dinoandterry.co.uk%2FPlaces.h tml
As for the reliability of Clearbox. I don't know. I've never used it. I prefer Fancybox.
http://fancybox.net/
Nancy O.

Similar Messages

Clearbox Lightbox Problem

i'm using clearbox lightbox widget as my websites photo gallery, but an issue arises when it comes to displaying the images and that is, the hidden layer doesnot cover up the whole page

html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Okwea ~ Projects</title>
<link rel="icon" type="image/png" href="images/okwea.ico">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/flexslider.css" rel="stylesheet" type="text/css">
<style>
@import url("modernpics/stylesheet.css");
@import url("Impact_Label_Reversed/stylesheet.css");
@import url("webfonts/AlexBrush_Regular_OTF/stylesheet.css");
</style>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/clearbox.js" type="text/javascript"></script>
<script type="text/xml">

</script>
<style type="text/css">
/* BeginOAWidget_Instance_2648024: #OAWidget */
.container {
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 11px;
      .item a img {
    float: left;
    padding: 3px;
    background-color: #FFF;
    margin: 5px;
    border: 1px solid #cccccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: .8;
      .item a:hover img, .item a:active img {
    padding: 3px;
    border: 1px solid #cccccc;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.80;
    opacity: 1;
      .clearfix:after{
      clear:both;
      #inline{
      visibility: hidden;
      color:#444;
/* EndOAWidget_Instance_2648024 */
</style>
</head>
<body id="projects">
<div class="wrapper">
<header>
<table width="100%">
      <tr>
        <td><img src="images/okwea logo.png" alt="logo" width="247" height="140" class="animated bounceInRight"></td>
        <td><img src="images/ban2.jpg" alt="logo" width="735"></td>
      </tr>
    </table>
<table width="100%" border="0">
<tr height="50px">
    <td width="15%" style="padding:5px; "><a href="index.html" class="menu" id="nav-home">Home</a></td>
    <td width="19%" style="padding:5px; "><a href="company.html" class="menu" id="nav-company">Company Profile</a></td>
    <td width="17%" style="padding:5px; "><a href="projects.html" class="menu" id="nav-projects">Projects</a></td>
    <td width="14%" style="padding:5px; "><a href="about.html" class="menu" id="nav-about">About Us</a></td>
    <td width="17%" style="padding:5px;" ><a href="contact.html" class="menu" id="nav-contact">Contact Us</a></td>
    </tr>
</table>
<br>
</header>
<div class="content">
<table width="100%" cellspacing="20px">
<tr>
    <td colspan="2"><h1>Okwea Projects</h1></td>
    </tr>
<tr>
    <td width="50%" style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1); text-align:left; padding-left:10px;"><p style="font-size:16px; text-decoration:underline;">Renovation and Roofing White Sands Hotel - Malindi
      <script type="text/javascript">
// BeginOAWidget_Instance_2648024: #OAWidget
      //     ClearBox Config File (JavaScript)
      var
      // CB layout:
      CB_MinWidth=300,                // minimum (only at images) or initial width of CB window
      CB_MinHeight=300,                // initial heigth of CB window
      CB_WinPadd=15,                    // padding of the CB window from sides of the browser
      CB_ImgBorder=3,                    // border size around the picture in CB window
      CB_ImgBorderColor='#FFF',            // border color around the picture in CB window
      CB_Padd=4,                    // padding around inside the CB window
      CB_BodyMarginLeft=0,                //
      CB_BodyMarginRight=0,                // if you set margin to <body>,
      CB_BodyMarginTop=0,                // please change these settings!
      CB_BodyMarginBottom=0,                //
      CB_ShowThumbnails='auto',            // it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!
      CB_ThumbsBGColor='#000',            // color of the thumbnail layer
      CB_ThumbsBGOpacity=.35,                // opacity of the thumbnail layer
      CB_ActThumbOpacity=.65,                // thumbnail opacity of the current viewed image
      CB_SlideShowBarColor='#FFF',            // color of the slideshow bar
      CB_SlideShowBarOpacity=.60,            // opacity of the slideshow bar
      CB_SlideShowBarPadd=17,                // padding of the slideshow bar (left and right)
      CB_SlideShowBarTop=2,                // position of the slideshow bar from the top of the picture
      CB_SimpleDesign='off',                // if it's 'on', CB doesn't show the frame but only the content - really nice
      CB_CloseBtnTop=-10,                // vertical position of the close button in picture mode
      CB_CloseBtnRight=-14,                // horizontal position of the close button in picture mode
      CB_CloseBtn2Top=-20,                // vertical position of the close button in content mode
      CB_CloseBtn2Right=-30,                // horizontal position of the close button in content mode
      CB_OSD='off',                    // turns on OSD
      CB_OSDShowReady='off',                // when clearbox is loaded and ready, it shows an OSD message
      // CB font, text and navigation (at the bottom of CB window) settings:
      CB_FontT='Verdana',                //
      CB_FontSizeT=13,                // these variables are referring to the title or caption line
      CB_FontColorT='#777',                //
      CB_FontWeightT='normal',            //
      CB_FontC='arial',                //
      CB_FontSizeC=11,                // these variables are referring to
      CB_FontColorC='#999',                // comment lines under the title
      CB_FontWeightC='normal',            //
      CB_TextAlignC='justify',            //
      CB_txtHCMax=120,                // maximum height of the comment box in pixels
      CB_FontG='arial',                //
      CB_FontSizeG=11,                // these variables are referring to the gallery name
      CB_FontColorG='normal',                //
      CB_FontWeightG='@@CB_FontWeightG@@',            //
      CB_PadT=10,                    // space in pixels between the content and the title or caption line
      CB_OuterNavigation='off',            // turns outer navigation panel on
      CB_ShowURL='off',                // it shows the url of the content if no title or caption is given
      CB_ItemNum='on',                // it shows the ordinal number of the content in galleries
      CB_ItemNumBracket='()',                // whatever you want
      CB_ShowGalName='',                // it shows gallery name
      CB_TextNav='on',                // it shows previous and next navigation
      CB_NavTextImgPrvNxt='on',            // it shows previous and next buttons instead of text
      CB_ShowDL='on',                    // it shows download controls
      CB_NavTextImgDL='on',                // it shows download buttons instead of text
      CB_ImgRotation='on',                // it shows the image rotation controls
      CB_NavTextImgRot='on',                // it shows the image rotation buttons instead of text
      // Settings of the document-hiding layer:
      CB_HideColor='#000',                // color of the layer
      CB_HideOpacity=.8,                // opacity (0 is invisible, 1 is 100% color) of the layer
      CB_HideOpacitySpeed=400,            // speed of fading
      CB_CloseOnH='on',                // CB will close, if you click on background
      // CB animation settings:
      CB_Animation='double',                // 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (high cpu usage)
      CB_ImgOpacitySpeed=300,                // speed of content fading (in ms)
      CB_TextOpacitySpeed=300,            // speed of text fading under the picture (in ms)
      CB_AnimSpeed=300,                // speed of the resizing animation of CB window (in ms)
      CB_ImgTextFade='on',                // turns on or off the fading of content and text
      CB_FlashHide='on',                // it hides flash animations on the page before CB starts
      CB_SelectsHide='on',                // it hides select boxes on the page before CB starts
      CB_SlShowTime=3000,                // default speed of the slideshow (in sec)
      CB_Preload='on',                // preload neighbour pictures in galleries
      CB_ShowLoading='on'                //
// EndOAWidget_Instance_2648024
      </script>
    </p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table>
      <div class="container clearfix">
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><img class="border" src="thumbs/t1.png" alt="Dancers in Red" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Breath taking]" href="images/w2.jpg" title="Seria"><img class="border" src="thumbs/t2.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w3.jpg" title="Yosemite 1"><img class="border" src="thumbs/t3.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w4.jpg" title="Yosemite 1"><img class="border" src="thumbs/t4.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w5.jpg" title="Yosemite 1"><img class="border" src="thumbs/t5.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w6.jpg" title="Yosemite 1"><img class="border" src="thumbs/t6.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Home away from home]" href="images/w7.jpg" title="Thailad"><img class="border" src="thumbs/t7.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w8.jpg" title="Yosemite 1"><img class="border" src="thumbs/t8.png" alt="" /></a></div>
        </div><br><br></td>
    <td width="50%" style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);text-align:left;"><p style="font-size:16px; text-decoration:underline; ">Nobel Apartments</p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table>
    <div class="container clearfix">
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><a rel="clearbox[gallery=Gallery,,comment=Architecture at its peak]" href="images/w1.jpg" title="Dubai"><img class="border" src="thumbs/t1.png" alt="Dancers in Red" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Breath taking]" href="images/w2.jpg" title="Seria"><img class="border" src="thumbs/t2.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w3.jpg" title="Yosemite 1"><img class="border" src="thumbs/t3.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w4.jpg" title="Yosemite 1"><img class="border" src="thumbs/t4.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w5.jpg" title="Yosemite 1"><img class="border" src="thumbs/t5.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w6.jpg" title="Yosemite 1"><img class="border" src="thumbs/t6.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Home away from home]" href="images/w7.jpg" title="Thailad"><img class="border" src="thumbs/t7.png" alt="" /></a></div>
          <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Yosemite#1]" href="images/w8.jpg" title="Yosemite 1"><img class="border" src="thumbs/t8.png" alt="" /></a></div>
        </div><br><br></td>
</tr>
<tr>
    <td style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1); text-align:left; padding-left:10px">
      <p style="font-size:16px; text-decoration:underline;">Kentan Patek Residence House Plans</p>
      <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table></td>
    <td style=" box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);"><p style="font-size:16px; text-decoration:underline; text-align:left">Mr and Mrs VIdu Semi-Detached House Plans</p>
    <table width="100%" border="0"><tr>
        <td width ="211" valign="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas,   mauris ut mattis ultricies, magna sapien tempus sem, porta faucibus   nibh quam et orci. Cras congue, odio nec tempus ornare, lacus diam   dignissim arcu, nec mattis mi turpis et risus. Duis ut velit ac nibh   tempus hendrerit. Quisque condimentum, tellus at laoreet viverra, dui   eros congue</td>
        <td colspan="2"valign="top"><div align="right"><img src="images/w2.jpg" width="231" height="203" alt="plan1"></div></td>
      </tr>
      <tr>
        <td width="211" valign="top"> </td>
        <td width="212" valign="top">© Okwea Construction</td>
      </tr>
    </table></td>
</tr>
<tr>
    <td colspan="2" style="padding:20px">
    <table width="100%">
<tr>
    <td bgcolor="#fff"; style="border-radius:7px; padding:20px; padding-top:0px; text-align:left;box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);"><h1>On-going Projects</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit   amet sollicitudin ipsum. Nulla malesuada vehicula purus, in cursus ante   accumsan sit amet. Aliquam tristique, lectus et ullamcorper pretium,   ipsum leo volutpat urna, fringilla dictum diam est nec enim. Maecenas   sollicitudin lobortis consequat. </p>
        <p>Quisque placerat aliquam luctus. Cras   dapibus, nulla sed scelerisque lobortis, purus velit faucibus libero,   vel consequat quam sem vitae turpis. Maecenas nec quam tortor. Proin   ornare sapien vitae tortor laoreet interdum. Aenean rutrum scelerisque   eros sit amet tristique. Sed congue sagittis lectus ac blandit. </p>
        <p>Vivamus   leo libero, vulputate non aliquet at, mattis eu est. Nunc ac turpis   dolor, vel congue magna. Sed eu velit nisi. </p></td>
</tr>
</table>
</td>
</tr>
<tr>
    <td colspan="2"> </td>
</tr>
</table>
</div>
</div>
<footer>
<table width="100%" height="90%" cellpadding="7px">
<tr style="font-family:13px; background-color:#373737; color:rgba(255,198,43,1);">
    <td width="27%" height="43" style="border-radius:7px; border:solid 0.2em #8b5e3b; ">CONTACT INFO</td>
    <td width="37%" style=" color:#ffeebf; border-radius:7px; background-color:#8b5e3b; border:solid 0.2em rgba(255,198,43,1);"> SOCIAL MEDIA</td>
    <td width="36%" style="border-radius:7px; border:solid 0.2em #8b5e3b;">ABOUT US</td>
</tr>
<tr style="font-size: 13px; font-family: Tahoma, Geneva, sans-serif;">
    <td valign="top" ><p><strong>Our Location</strong>:<br>
      Athi river<br>
Mavoco Municipal council</p>
      <p><strong>Address:</strong><br>
        Okwea Construction Comany<br>
        P.O. Box 550- 50400<br>
        Nairobi</p>
      <p><strong>Telephone:</strong><br>
        + 254 720 306 346</p>
      <p>
+ 254 721 400 433</p>
      <p> </p></td>
    <td style="border-left: 1px solid #8b5e3b; ; border-right: 1px solid #8b5e3b; );font-family: Tahoma, Geneva, sans-serif;"><table width="100%">
      <tr>
        <td align="right"><span class="icons">G</span></td>
        <td align="left">[email protected]</td>
      </tr>
      <tr>
        <td align="right"><span class="icons">t</span></td>
        <td align="left">#[email protected]</td>
      </tr>
    </table><form name="form2" method="post" action="">
      <label for="news"><b>Sign up for the Newsletter</b></label>
     <br><br>
      <input type="text" name="news" id="news" placeholder="Email">
<input type="submit" name="button2" id="button2" value="m" class="buttons" >
    </form></p>
    <p><b>Email Us</b></p>
    <p><span class="icons" style="font-size:18px">V</span>[email protected]</p>
    </td>
    <td valign="top"><p>OKWEA CONSTRUCTION CO.LTD is an accomplished, experienced and highly geared Civil Engineering establishment.
The company delivers a full scope of Civil Engineering works on several sites at any given time.      </p>
      <p>We operate both as the principal contractor for projects both in the private and public sector with an extensive client base ranging from international donor organizations, city councils, local authorities, developers and national and international airports.</p>
      <p>Additionally, the company is fully facilitated to operate several projects simultaneously, even if sites are geographically located far apart from each one another. </p></td>
</tr>
</table></footer>
</body>
</html>
main. css
body, html{
    height:100%;
    margin:0;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    background:#ffc62c;
.wrapper{
     left:10%;
     min-height:100%;
     width:80%;
     text-align:center;
     margin-left:auto;
     margin-right:auto;
header{
    padding-top: 25px;
    height:200px;
    background-color:#fff;
    display: block;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
.content{
    padding-bottom: 330px;
    background-color:#fff;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
    padding-top: 20px;
footer{
    height: 330px;
    width: 100%;
    background: #f0f0f0;
    margin-top: -330px;
    display: block;
    width: 80%;
    left: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-shadow: 0px 1px 10px 1px rgba(102,102,102,1);
    border-radius: 7px 7px 0px 0px;
a.menu {
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    cursor: pointer;
    text-wrap: none;
    background:#373737;
    border-radius: 7px;
    color: #ffc62c;
    line-height: 180%;
a.menu:hover {
    border-radius:7px;
    color:#000000;
    background-color:#ffc62c;
    border:solid #000000 0.2em;
    font-size:larger;
.buttons{
    font-family:modernpics;
    font-size:18px;
    cursor:pointer;
    color:#8b5e3b;
.buttons:hover{
    color:#000000;
.icons{
    font-family:modernpics;
    font-size:50px;
    color:#8b5e3b;
h1,h2,h3,h4,h5,h6 {
    font-family:"Impact Label Reversed";
h1 {
    font-size: 30px;
    color:#8b5e3b;
    text-decoration:underline;
body#home a#nav-home,
body#company a#nav-company,
body#projects a#nav-projects,
body#about a#nav-about,
body#contact a#nav-contact
    background:#ffc62c;
    color:rgba(0,0,0,1);
    border:solid #000000 0.2em;

Problem with Clearbox Lightbox

Hi Everyone,
I'm using Clearbox Lightbox 2.0. My thumbnails keep "jumping around" when I move the curser over them. Can anyone advise me on how I can get these thumbnails to remain still?
Thanks!

Here's the link to my website.
http://www.labelsnlogos.com/LNL%20portfolio%202.html
Hopefully there is something I can do about the thumbnails moving around.

Having Trouble with my Clearbox Lightbox

Hi Everyone,
Hope someone can help me. I installed the Clearbox 3 Lightbox and made a "gallery". I have a footer with copyright info on the bottom of each page. On the page with the lightbox gallery, the copyright info is showing up on the side of the gallery. Does anyone have any idea why it's doing that? I want the copyright info to show on the bottom. I tried playing around with the html code, but the info still shows up next to the gallery.
The website is www.sainteustacefineart.com
Thanks!

For footer, add this above your Copyright line:
<div style="clear:both;"></div>
<p>Copyright 2007-2013. Saint Eustace Fine Art. All rights reserved.</p>
For the image getting 'stuck', 3 image markups have an extra </a> tag. Remove that:
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Altarpiece Construction - Combined Process Wood and Metal - 2003 - Previously on Extended Loan to MOBIA, NY - Collection of the Artist]" href="IMAGES/seed.jpg" title="Image: Seed of Divine Life"><img src="IMAGES/seed.jpg" width="61" height="72" alt="seed" /></a></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Altarpiece Construction - Combined Process Wood and Metal - 1995 - Private Collection]" href="IMAGES/through_fire.jpg" title="Through Fire: Holy Center"><img src="IMAGES/through_fire.jpg" width="61" height="72" alt="fire" /></a></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Altarpiece Construction - Combined Process Wood and Metal - 1992 - Collection of the Artist]" href="IMAGES/collapse.jpg" title="Collapse"><img src="IMAGES/Collapse.jpg" alt="collapse" width="61" height="72" class="item" /></a></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Altarpiece Construction - Combined Process Wood and Metal - 1996 - Collection of The Prudential, Newark, NJ]" href="IMAGES/Mystery of Iniquity.jpg" title="Mystery of Iniquity"><img src="IMAGES/Mystery of Iniquity.jpg" alt="Mystery of Iniquity" width="61" height="72" class="item" /></a></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Temporal Room Installation - Photo Documented - 1994]" href="IMAGES/Celestial Rose-Circles of Sanctity.jpg" title="The Celestial Rose : Circles of Sanctity"><img src="IMAGES/Celestial Rose-Circles of Sanctity.jpg" alt="The Celestial Rose : Circles of Sanctity" width="61" height="72" class="item" /></a></a></div>
You may want to validate our markup here: http://validator.w3.org/ and fix any errors.

Clearbox Lightbox - Turn of Slideshow?

Hi, I've used clearbox with some modifications to style a gallery - however the client wants to turn the slideshow function off and just have the images enlarge on click.
I thought I had got round this by simple making the slideshow button transparent so the user cannot cick on it and turning off the previous and next function - however I've just discovered that if I move the scroll wheel on my mouse the images start scrolling from one to the next - and the client specifically does not want this.
You can see what I mean here
http://www.creativeclout.co.uk/our_work.html
Can anyone help?
Thanks
Connie

Image maps, yuck!
Try this: I'll let you figure out the math. This is just a rough layout.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
     margin:0;
     padding:0;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
section {
     width:894px; /**adjust as needed**/
     margin:0 auto;
     display:table;
/**this styles image container**/
#thumbs p {
     display:table-cell;
     width: auto;
     height: auto;
     vertical-align:middle;
     border:1px solid red;
     text-align:center;
     opacity:0.7;
#thumbs p:hover {opacity:1.0}
</style>
</head>
<body>
<div id="thumbs">
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/179x225.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/322x200.jpg" alt="" /></a>
</p>
</section>
<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
</section>
<section>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200.jpg" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/320x400.jpg" title="optional captions"><img src="http://placehold.it/268x200" alt="" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/179x225" alt="Thumbnail 6" /></a>
</p>
</section>

</div>

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
</script>
</body>
</html>
Nancy O.

Any clearbox lightbox widget users here? I have a question

I installed the widget on a test web page and it works correctly:
http://dirtysouthink.com/test/ch1/01_Begin/portfolio.html
When you click the dog tattoo thumbnail, the picture pops up in front of the panel to show a larger picture. You never leave the page.
HOWEVER:
When I install the same widget, the same way on the main site, when you click on any of the tattoos, the thumbnail targets a new window to show the larger picture. In other words, the user leaves the page to see the bigger picture.
http://dirtysouthink.com/gallery/jason3.html
I have no clue what is different. I installed the widget the exact same way as I did on the test page. Everything on both installs are in their own directory and are not sharing any of the css or js so there should be no conflicts.
Any help appreciated
!! Problem Solved !!.................................
Thanks to a post I found by Sudarshan Thiagarajan
http://forums.adobe.com/message/4769062#4769062
The clearbox.js wasn't pointing to the right directory to where the page is located.
This is the line in clearbox.js
var CB_ScriptDir='js/clearbox'; // RELATIVE to your html file!
The fix is simple and am posting here just incase someone else is having the same problem.
I made this change
var CB_ScriptDir='../js/clearbox'; // RELATIVE to your html file!
Works like a champ now

You might have lost authorization would be my first guess. I would try re-authorizing first.

How can I change the displayed video size in the Clearbox Lightbox widget?

Hi Everyone,
This is what I'm working on:
http://www.artbywaqas.com/STORYBOARDS.html
http://www.artbywaqas.com/DEMOREEL.html
The videos are actually bigger but they show up really small in the browser window. How can I fix this?
The other section are not up yet.

To what size from what template?
A business card is basically just a rectangle so just make one the right size, clear the rest and option drag out copies of yours to the other positions. You will need to move the crop marks as well.
Peter

Clearbox Lightbox, text alignment

Hi experts!
I have this problem I need some help with.
I want my text below the pictures which works fine, but as soon as I add more thumbnails and get multiple rows the textbox doesnt follow, but stays put, so it shows on top of the thumbnails.
I would really like the textbox to follow the boundary of the thumbnailbox
Sorry for my non-webdeveloper lingo
Would really appreciate your help folks!
/Matt

To add to Murray's response which will remove the fixed position, your text will appear to the right of your images. To make it appear below all images (like in your working page), add this line before <div id="inline">:
<div style="clear: both;"></div>
This will clear floats for your image thumbnail container thereby pushing the inline text below it.

Having a image alignment problem using clearbox

Hi,
I'm having an image alignment problem. I cannot figure it out. I'm using the clearbox - lightbox dreamweaver widget. Using Dreamweaver CS6.
Actual page located here. Any help would be appreciated.
http://dirtysouthink.com/gallery/dustin2.html

This has very little to do with Dreamweaver. DW is merely a tool to assist you in building a web site. It is purely a matter of styling (CSS).
When I look at the structure, I see
BODY-CONTENT (width: 490px)
     GALLERY (width: 452px)
          CONTAINER (width: 500px)
               ITEM (width: 150px)
From this I can deduce that:
GALLERY will fit inside BODY-CONTENT
CONTAINER will NOT fit inside GALLERY or BODY-CONTENT
ITEM will fit three times into CONTAINER
To start with, I would reduce the size of the CONTAINER so that it fits inside of its parent. Then I would adjust the width of the ITEM so that only two of them fit inside of the CONTAINER.

Problems adding YouTube videos to a Clearbox 2.0 Lightbox

Hi -
     I'm still fairly new to web design and Dreamweaver CS6. I am trying to put some YouTube videos into a Clearbox 2.0 Lightbox -- seems like a very elegant and effective way to display the videos. I have used the Clearbox 2.0 Lightbox successfully with still images/jpg files. When I try to use it to link to a YouTube video, however, I get a blank white box when I test it online. I know that it is possible to display YouTube videos in Clearbox: the example file includes a YouTube video, and it plays when tested. Here is the code that is included in the example file:
    <div class="item"><a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[gallery=Gallery,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]"><img src="example/no_youtube.gif" alt="youtube movie" /></a></div>
     My assumption was that I could simply change the http:// link and my desired video would replace the one in the example, but this is not the case. I change the code to what is pasted below and I get a blank white box.
    <div class="item"><a href="http://www.youtube.com/watch?v=kc8SIQGxnXk" rel="clearbox[gallery=Gallery,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]"><img src="example/no_youtube.gif" alt="youtube movie" /></a></div>
     I have tried creating a sample file in Dreamweaver that has nothing in it except the Clearbox widget and these two videos. The one with the pre-written YouTube link works, the other doesn't. What am I doing wrong? Or better, how do I do it right? Very grateful for any help that can be offered!
- Rob

Thank you for the response, Sudarshan. I did not have the page online, and in the process of trying to put something together to upload for you, I figured it out. For the benefit of others who may run into the same problem, here was the solution.
In the code above, I was removing the sample YouTube http:// link and replacing it with the YouTube http:// link that I wanted. However, there was one more step that I needed to do. In that link, after http://www.youtube.com/ you need to replace watch?v= with v/ . Once I did that, everything worked like a charm!

Lightbox works on computer but not on web...

Help!
I have used Lightbox2 and other lightboxes before, so I am a little used to how they work.
I wanted to not clutter my site any more than necessary, and so I left the Lightbox files in the original Lightbox2 folder; my files are outside the folder.
I corrected the links to the javascript and css files on my page.
The page previews correctly on my computer; but, when uploaded to the web, Lightbox2 does not work.
Why would Lightbox work correctly on my computer, but not on the web? Here is a link to one of the pages in question:
http://www.oldmanmountain.com/Pages/RackPages/RearRacks.html
Another question...Lightbox says we should check the links in the lightbox.js file to make sure the loading and close box links are correct. How do I point to these files? From the javascript file? or from the page file? I have tried everything and cannot get the close box to show on my computer (let alone on the web, where Lightbox doesn't seem to work at all).
Another reason for wanting the Lightbox files in their own folder is that I used to put the Lightbox files relative to the page that Lightbox was used on so I wouldn't have to change the links. I would rather have just one Lightbox folder for the entire site, and I would prefer to have it in its own folder. I posted this question on StackOverflow, but no one answered.
Thank you!

Hi,
in my IE8 your lightbox works (after a while of waiting) like this:
I only miss the both buttons: "closelabel.gif" and "loading.gif".
Hans-Günter

Clearbox 3 video problems youtube vimeo support

hi all
my 1st post here, my 1st website build.
currently redoing company website, shifting from old flash based site to more iOS and android friendly layout. Using clearbox 3 lightbox for all galleries.
sample clearbox shows its compatible for displaying flash,qt,youtube,mp3 even html from galleries.
here is sample multi media code that is embedded when inserting the widget
<div class="container clearfix">
    <div class="item"><a href="example/Flash.swf" rel="clearbox[gallery=Gallery,,width=600,,height=400,,title=Flash content]"><img class="fakepic" src="example/no_flash.gif" alt="flash content" /></a></div>
    <div class="item"><a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[gallery=Gallery,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]"><img src="example/no_youtube.gif" alt="youtube movie" /></a></div>
    <div class="item"><a href="http://handras.hu/insight/media/insight_960.mov" rel="clearbox[gallery=Gallery,,title=iNSIGHT (http://handras.hu/insight),,comment=This video is a demo shot entirely with Canon's 5D MarkII DSLR camera. It is a six minute three-section video demonstration of a photoshoot and digital image composition process. The video is mainly intended to demonstrate the capabilities of the camera and to share our joy of creation through behind-the-scenes pictures.<br /><font color="#ff7700">QuickTime plugin required!</font>,,width=960,,height=540]"><img src="example/no_quicktime.gif" alt="quicktime movie" /></a></div>
    <div class="item"><a href="example/test.mp3" rel="clearbox[gallery=Gallery@@,,tnhrf=nopreview@@autoslideshow@@,,width=500,,height=150, ,title=MP3 music,,comment=Windows Media Player plugin is required!]"><img src="example/no_winmediamp3.gif" alt="music" /></a></div>
    <div class="item"><a href="http://www.clearbox.hu/index_en.html" title="Clearbox Info" rel="clearbox[height=1000,,width=700]"><img src="example/clearbox.png" alt="Clearbox Info" /></a></div>
</div>
<div id="inline">
    <h3>Lorem ipsum</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
    dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl.
    Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus.
    Pellentesque habitant morbi tristique senectus et netus et malesuada
    fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat
    velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus
    risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna.
    Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy
    pretium tellus. </div>
</div>
<div class="tooltipContent" id="sprytooltip1">Tooltip content goes here.</div>
<div id="LColApDiv"></div>
<div id="LColumnAppDiv"></div>
<div id="LeftColumnAppDiv"></div>
<div id="leftColumnApDiv"> </div>
<script type="text/javascript">
i'm trying to use youtube video of my own but am not able to spawn the video. the sample code from above works fine:
div class="item"><a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[gallery=Gallery,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]"><img src="example/no_youtube.gif" alt="youtube movie" /></a></div>
but when using my test video, it does not spawn anything:
<div class="container clearfix">
    <div class="item"><a href="https://www.youtube.com/watch?v=2hzMHcfuj1E" rel="clearbox[gallery=Gallery,,width=700,,height=490,,title=Clearbox 3 preview movie on YouTube,,comment=movies from from clearbox 3...]"><img src="example/no_youtube.gif" alt="" /></a></div>
I've tried the share urls from the share, embed options and still nothing. can anyone see whats so wrong from my code as compared to the sample??
also does anyone know if clearbox 3 is compatible with vimeo videos and how to get that working?
thanks for any help!

hi
thanks so much for your reply!
do you know of a jquery fancybox that is a little bit closer to clearbox3, one with preview thumbnails at the bottom of the slideshow image?
this is probably a funny question, but is there also such a jquery image gallery that is free for commercial use? is there such a thing as free for commercial use? anyone know
thanks for the help
Nancy O. wrote:
I've never used Clearbox. I typically use jQuery Fancybox for images & videos. AFAIK, Fancybox works in all browsers. I'm not so sure about Clearbox.
Nancy O.

Got my website up and running but lightbox is not working properly

Hi Everyone,
I got my website up and running, but my lightbox isn't working properly. The descriptions of each painting is missing and the arrows and slideshow function is missing. I don't know what I did wrong.
The link to the website is below.
http://www.sainteustacefineart.com/Gallery%202.html
The gallery is supposed to look and function like the gallery in the website linked below.
http://www.labelsnlogos.com/
I also did this website, so I'm at a loss as to what went wrong.
Thanks!
Ellen

Okay, I got it working. I forgot to "put" the JS folder (which holds the Clearbox components). Something I overlooked because it was on the bottom of the files window and I didn't see it.

Lightbox popups empty please advise

I've loaded lightbox, added the extension. When I view in Live View, the popup works just fine. If I upload it (IE8) I get a white box with a spinning thing in the middle of it. I can't even get it to work with the sample pictures. And it definitely won't work on any device in the browser lab. I even tried reloading it. Nothing seems to help.

99 times out of 100 this is either a file path error, in your html or a missing target image on the server.
If it works in the preview, the file path is correct. If you didn't load the images to the server in the proper folder, it will exhibit exactly the behavior you are seeing.
If you've turned off the annoying alert asking if you want to put dependent files with your page, this can be easy to overlook.

IE problem with Lightbox

Hi there.
My question concerns http://www.energywa.co.za
You can click on any of the 2 images on the right.
When clickin in FF and Google Chrome, the lightbox works 100%. But, when trying it in IE 8, the image opens on the same page. When clicking anywhere else on the page, the effect of the lightbox shows, but no image.
Can you please check and advise what I am doing wrong?
Regards,
Deon

At the top of the forum page it reads:
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Incidently, there is no problem with IE8 and Microsoft is in the process to urge IE6 users to upgrade.
Ben

Clearbox Lightbox & IE8

Similar Messages

Maybe you are looking for