How to move a lightbox into middle of site?

Report · Apr 30, 2012

Hi there,

I have pretty much zero experience with the making side of websites, just designing them in photoshop but I'm trying to make my own simple website design an actual website and am struggling with incorporating a lightbox gallery in my site - when I insert the lightbox onto the site it just inserts it before the site not on it at all and I don't know how to move it into the centre of the page having no knowledge of dreamweaver at all..

This is what it looks like..

http://i45.tinypic.com/106hkl5.png

And here is the code if it makes any difference?

<html>

<head>

<title>website 2</title>

/* BeginOAWidget_Instance_2127022: #gallery */

.lbGallery {

/*gallery container settings*/

background-color: transparent;

padding-left: 30px;

padding-top: 90px;

padding-right: 30px;

padding-bottom: 30px;

width: 700px;

height: auto;

text-align:center;

}

.lbGallery ul { list-style: none; margin:0;padding:0; }

.lbGallery ul li { display: inline;margin:0;padding:0; }

.lbGallery ul li a{text-decoration:none;}

.lbGallery ul li a img {

/*border color, width and margin for the images*/

border-color: #000000;

border-left-width: 5px;

border-top-width: 5px;

border-right-width: 5px;

border-bottom-width: 5px;

margin-left:20px;

margin-right:20px;

margin-top:20px;

margin-bottom:20px:

}

.lbGallery ul li a:hover img {

/*background color on hover*/

border-color: #000000;

border-left-width: 5px;

border-top-width: 5px;

border-right-width: 5px;

border-bottom-width: 5px;

}

#lightbox-container-image-box {

border-top: 0px none #000000;

border-right: 0px none #000000;

border-bottom: 0px none #000000;

border-left: 0px none #000000;

}

#lightbox-container-image-data-box {

border-top: 0px;

border-right: 0px none #000000;

border-bottom: 0px none #000000;

border-left: 0px none #000000;

}

/* EndOAWidget_Instance_2127022 */

</style>

<!--

<oa:widgets>

<oa:widget wid="2127022" binding="#gallery" />

</oa:widgets>

-->

</script>

</head>

<ul>

</ul>

</div>

// BeginOAWidget_Instance_2127022: #gallery

$(function(){

$('#gallery a').lightBox({

imageLoading: '/images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon

imageBtnPrev: '/images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image

imageBtnNext: '/images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image

imageBtnClose: '/images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn

imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)

fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.

overlayBgColor: "#000000", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.

overlayOpacity: 0.78, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9

txtImage: 'Image', //Default text of image

txtOf: 'of'

});

// EndOAWidget_Instance_2127022

</script>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</body>

</html>

Any input would be MASSIVELY appreciated.. thank you for your time!!

Francesca xx

Report · Apr 30, 2012

You've used your LightBox code all the way before your actual web slices begin. That's what has made the LightBox appear above your other designs.

Also, for what content/ link do you want LightBox to come on? I see 3 <td>s in your main site - Portfolio, Biography, Contact.

One more thing - more like a tip - it's very bad practice to slice your website straight off from PS. You should stick to making your site using DIV tags. To learn about how to make your first website in complete DIVs and CSS from scratch, you could follow this tutorial: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html - this will teach you how to make a beautiful website in HTML5 (for complete cross-browser compatibility) and CSS3 - to incorporate all fancy styles in your site.

You could continue to design your site in PS. But you should code it in Dreamweaver from scratch.

However, to solve your current issue, if you're persistent about continuing with your current workflow of PS slices and tables in your HTML, answer my previous question and we'll help you.

Report · Apr 30, 2012

Thank you for your reply.. I definitely need to learn about DIV tags so thankyou for that link, the first way I learnt about making my design live was to slice it using photoshop so that's what I did.

Yeah, it automatically put the LightBox code before everything so I'm not sure where I'm supposed to move it in the code to make it display where I wanted it. The lightbox will be displayed on the 'Portfolio' page and I wanted a centred row/rows of thumbnails which would zoom on when clicked. If I selected the centre slices and then inserted the lightbox this happens.. http://i46.tinypic.com/2zdn2hx.png

Thanks again

Report · Apr 30, 2012

Set the width of .lbGallery to match the width of the centre slice that you want to place it in. Right now, it's at 700px and your centre slice is definitely not that much.

Try this and let us know if the Lightbox thumbnails fit into it. Styling, we can worry about later.

Also, post an active link to your webpage - it's a lot easier for us to help you accomplish your task that way.

Cheers,

ST

Report · Apr 30, 2012

Sorry, the website isn't active right now, I need to change the hosting package to get the FTP address and didn't want to start paying for it before I could figure out how to actually make the website.

Okay, when I selected the centre slice and inserted the lightbox then changed the size to match it came out like this.. http://i47.tinypic.com/wlptvp.png

But that's removed the background colour from that section by putting the lightbox there, can I not just overlay the lightbox on top of the background or are layers not used in Dreamweaver like they are in Photoshop?

Also I don't want the thumbnails vertical like that.. should I have made another bigger slice going from underneath the 'portfolio' title going to the 'contact' title and put it in that? It's so strange not being able to work in layers on top of one another.

Thank you x

Report · Apr 30, 2012

Change this:

.lbGallery {
/*gallery container settings*/
            background-color: transparent;
            padding-left: 30px;
            padding-top: 90px;
            padding-right: 30px;
            padding-bottom: 30px;
            width: 700px;
            height: auto;
            text-align:center;
}

to this:

.lbGallery {
/*gallery container settings*/
            padding-left: 10px;
            padding-top: 30px;
            padding-right: 10px;
            padding-bottom: 10px;
            width: 700px;
            height: auto;
            text-align:center;
}

The white background would disappear and you should ideally have 2 columns and multiple rows.

If you want more than 2 columns, you should ideally use DIVs like I mentioned before or if you still want to continue using your current table style from PS slices, you should make the content slice for Portfolio bit wider to accommodate more LightBox thumbs.