Participant

Question

How to move a lightbox into middle of site?

Forum|Forum|13 years ago
April 30, 2012
1 reply
8330 views

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

This topic has been closed for replies.

sudarshan.t

Inspiring

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.

F

francescadesignsAuthor

Participant

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

sudarshan.t

Inspiring

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded