Skip navigation
francescadesigns
francescadesigns Calculating status...
Currently Being Moderated

How to move a lightbox into middle of site?

Apr 30, 2012 7:42 AM

Tags: #dreamweaver #change #edit #lightbox #move #extensions #position #positioning #gallery

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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="file:///Macintosh HD/Users/francescapole/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam56f32f43.TMP/scripts/jquery.js " type="text/javascript"></script>

<script src="file:///Macintosh HD/Users/francescapole/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam56f32f43.TMP/scripts/lightbox. js" type="text/javascript"></script>

<link href="file:///Macintosh HD/Users/francescapole/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam56f32f43.TMP/css/lightbox.css" rel="stylesheet" type="text/css">

<link href="file:///Macintosh HD/Users/francescapole/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eam56f32f43.TMP/css/sample_lightb ox_layout.css" rel="stylesheet" type="text/css">

<style type="text/css">

/* 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>

<script type="text/xml">

<!--

<oa:widgets>

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

</oa:widgets>

-->

</script>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="gallery" class="lbGallery">

  <ul>

    <li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>

    <li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>

    <li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>

    <li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>

    <li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>

  </ul>

</div>

<script type="text/javascript">

// 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>

<!-- Save for Web Slices (website 2.psd) -->

<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td colspan="15">

            <img src="images/website-2_01.jpg" width="1024" height="14" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="14" alt=""></td>

    </tr>

    <tr>

        <td colspan="8">

            <img src="images/website-2_02.jpg" width="437" height="1" alt=""></td>

        <td colspan="3" rowspan="3"><a href="website-3.html"><img src="images/website-2_03.jpg" width="151" height="43" alt=""></a></td>

        <td colspan="2" rowspan="4">

            <img src="images/website-2_04.jpg" width="91" height="688" alt=""></td>

        <td rowspan="3"><a href="website-4.html"><img src="images/website-2_05.jpg" width="137" height="43" alt=""></a></td>

        <td rowspan="10">

            <img src="images/website-2_06.jpg" width="208" height="754" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td colspan="3" rowspan="5">

            <img src="images/website-2_07.jpg" width="223" height="689" alt=""></td>

        <td colspan="4"><a href="website-2.html"><img src="images/website-2_08.jpg" width="145" height="41" alt=""></a></td>

        <td rowspan="3">

            <img src="images/website-2_09.jpg" width="69" height="687" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="41" alt=""></td>

    </tr>

    <tr>

        <td colspan="4" rowspan="2">

            <img src="images/website-2_10.jpg" width="145" height="646" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td colspan="3">

            <img src="images/website-2_11.jpg" width="151" height="645" alt=""></td>

        <td rowspan="7">

            <img src="images/website-2_12.jpg" width="137" height="711" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="645" alt=""></td>

    </tr>

    <tr>

        <td colspan="3">

            <img src="images/website-2_13.jpg" width="126" height="1" alt=""></td>

        <td colspan="3" rowspan="5">

            <img src="images/website-2_14.jpg" width="126" height="31" alt=""></td>

        <td rowspan="6">

            <img src="images/website-2_15.jpg" width="50" height="66" alt=""></td>

        <td colspan="2" rowspan="5">

            <img src="images/website-2_16.jpg" width="78" height="31" alt=""></td>

        <td rowspan="6">

            <img src="images/website-2_17.jpg" width="76" height="66" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td rowspan="5">

            <img src="images/website-2_18.jpg" width="12" height="65" alt=""></td>

        <td rowspan="3">

            <img src="images/website-2_19.jpg" width="67" height="29" alt=""></td>

        <td rowspan="5">

            <img src="images/website-2_20.jpg" width="47" height="65" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td rowspan="4">

            <img src="images/website-2_21.jpg" width="94" height="64" alt=""></td>

        <td>

            <img src="images/website-2_22.jpg" width="86" height="27" alt=""></td>

        <td rowspan="4">

            <img src="images/website-2_23.jpg" width="43" height="64" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="27" alt=""></td>

    </tr>

    <tr>

        <td rowspan="3">

            <img src="images/website-2_24.jpg" width="86" height="37" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td rowspan="2">

            <img src="images/website-2_25.jpg" width="67" height="36" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="1" alt=""></td>

    </tr>

    <tr>

        <td colspan="3">

            <img src="images/website-2_26.jpg" width="126" height="35" alt=""></td>

        <td colspan="2">

            <img src="images/website-2_27.jpg" width="78" height="35" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="1" height="35" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="images/spacer.gif" width="94" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="86" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="43" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="12" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="67" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="47" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="19" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="69" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="38" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="50" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="63" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="15" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="76" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="137" height="1" alt=""></td>

        <td>

            <img src="images/spacer.gif" width="208" height="1" alt=""></td>

        <td></td>

    </tr>

</table>

<!-- End Save for Web Slices -->

</body>

</html>

 

 

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

Francesca xx

6391 Views   5 Replies   Latest reply: Sudarshan Thiagarajan, Apr 30, 2012 12:21 PM
 
Replies
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Apr 30, 2012 9:37 AM   in reply to francescadesigns
    Report

    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.

     
    |
    Mark as:
  • francescadesigns
    Currently Being Moderated
    2. francescadesigns,
    Apr 30, 2012 10:36 AM   in reply to Sudarshan Thiagarajan
    Report

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    3. Sudarshan Thiagarajan,
    Apr 30, 2012 11:19 AM   in reply to francescadesigns
    Report

    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

     
    |
    Mark as:
  • francescadesigns
    Currently Being Moderated
    4. francescadesigns,
    Apr 30, 2012 12:11 PM   in reply to Sudarshan Thiagarajan
    Report

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    5. Sudarshan Thiagarajan,
    Apr 30, 2012 12:21 PM   in reply to francescadesigns
    Report

    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.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points