SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbox 2 - Prev Next Buttons Only Visible in Dreamweaver

    Hey ya'll,
    I've been having an issue with getting the preview and next button to show in my Firefox, Chrome and IE browser.
    Initially it wouldn't show at all but I added a "/" to images/prev.png in the lightbox style sheet and now it shows in Dreamweaver.
    Everything works correctly but those two buttons are invisible.

    I opened the demo and everything works on that page also except the prev and next buttons.

    Here is the html code for my site and the CSS below it.

    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">
    <head>
    <meta content="en-us" http-equiv="Content-Language">
    <meta content="," name="keywords">
    <title> Graphic Design</title>
    <link rel="stylesheet" type="text/css" href="r93styles.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
    
    
    
    </head>
    
    <body>
    <div id="container">
    <div class="wrapper"> <!--Start Wrapper!-->
    </br>
    <h1 id="logo"><a href="r93media.html" class="link"><img src="images/r93.gif" alt=""/></a></h1>
    </br>
    <div class="listmenu">
    <ul>
        <li><a href="r93media.html" class="link">PORTFOLIO</a></li>
        <li><a href="about.html" class="link">ABOUT</a></li>
    </ul>
    </br>
    	<div class="info">
    </p>**</p>
    </p>**</p>
    </br>
    
    <div class="copyright">
    <p>**</p>
    <p>**</p>
    <p>Copyright   2012</p>
    </div>
    	</div>
    </div>
    </div><!--End Wrapper!-->
    
    	<div id="artwork"> 
    <h1><i><b>PORTFOLIO</b></i></h1>
                      	
                      
    <a href="images/PURPLEGOLD_11-2.jpg" class="imglink" title="Tigers Apparel  rel="lightbox[set1]"><img src="images/PURPLEGOLD_prev.jpg"/></a>
    <a href="images/HVA.jpg" class="imglink" title="Volleyball Association Logo" rel="lightbox[set1]"><img src="images/HVA_prev.jpg"/></a>
    <a href="images/lls.jpg" class="imglink" title="Living Life Logo" rel="lightbox[set1]"><img src="images/lls_prev.jpg"/></a>
    <a href="images/RACEFORACURE.jpg" class="imglink" title="Race For A Cure T-Shirt Design"rel="lightbox[set1]"><img src="images/RACEFORACURE_prev.jpg"/></a>
    <a href="images/jacks.jpg" class="imglink" title="Jacks - Girl Apparel" rel="lightbox[set1]"><img src="images/jacks_prev.jpg" alt=""/></a>
    <a href="images/zapps2011.jpg" class="imglink" title="Zapps  Deisgn" rel="lightbox[set1]"><img src="images/zapps_prev.jpg"/></a>
    <a href="images/whodat.jpg" class="imglink" title="Who Dat Nation Concept" rel="lightbox[set1]"><img src="images/whodat_prev.jpg"/></a>
    <a href="images/OFMWDN.jpg" class="imglink" title="The Who Dat Nation Logo - Concept" rel="lightbox[set1]"><img src="images/WDN_prev.jpg"/></a>
    <a href="images/WhoDatNation.jpg" class="imglink" title="Who Dat Nation Concept" rel="lightbox[set1]"><img src="images/WhoDatNation_prev.jpg"/></a>
    
    
    		
    	</div>
    </div><!--Closed Container!-->
    <div class="footerstyle"></div>
    </body>
    </html>
    Code:
    body, html{
        background-color: #2c2c2d;
        background-repeat: no-repeat;
    font-family:Arial,Helvetica,sans-serif;
        font-size: 12px;
        height: 100%;
    }
    
    #container {
       height:100%;
       margin-bottom: -15px;
     
    }
    div.wrapper {
     
        height: 100%;
        background-color: #141415;
        width: 155px;
        text-align: left;
        margin-bottom: -15px;
     
       position: fixed;
    }
    
    
    .list menu li{ 
       text-decoration: none;
       margin-left: 25px;
       font-weight: normal;
       font-size: 12px;
       font-family:Arial,Helvetica,sans-serif;
       color: #b2b2b2;
       list-style: none;
    }
    #artwork {
        left: 155px;
        position: fixed;
        padding: 15px;
        text-align: left;
        right:0px;
        vertical-align: top;
        width: 1000px;}
    .class{}
    
    a.link:link {
       margin-left: 25px;
       text-decoration: none;
       font-weight: normal;
       font-size: 12px;
       color: #b2b2b2;
    }
      
    a.link:visited {
       margin-left: 25px;
       text-decoration: none;
       font-weight: normal;
       font-size: 12px;
       color: #b2b2b2;
    }
    a.link:hover {
       margin-left: 25px;
       text-decoration: none;
       font-weight: normal;
       font-size: 12px;
       color: #e81e75;
    }
    a.link:active {
        text-decoration: none;
       margin-left: 25px;
       font-weight: normal;
       font-size: 12px;
       font-family:Arial,Helvetica,sans-serif;
       color: #e81e75;
    }
    .footer {
       
    color: #141415;
       font-size: 11px;
       text-align: center;
    }
    .footerstyle {
        background-color: #e81e75;
        width: 100%;
        height:15px;
    position:fixed;
    bottom; 0;
        margin-bottom: 15px;
        clear:both;
    }
    * { margin:0; padding:0;}
    .info{ 
        font-size: 12px; 
        color:#e81e75;  
        text-align:left;
        margin-left: 25px;
    }
    .copyright{
        font-size: 10px; 
        color: #b2b2b2; 
        text-align:left;
    }
    g {border: none; }
    h1{ font-size: 50px; text-align:left; color: #b2b2b2; }
    a, img {
        border:none;
    }
    Thanks for your help in advance. Side-note, when lightbox wasn't working at all I saved it as a UTF-8 in notepad. Don't know if that info is relevant but anyway, what ya'll think?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Riley_93. Welcome to the forums.

    Remember that Dreamweaver isn't a browser, so however something appears in there is pretty much irrelevant. The real test is what you see in the real browsers.

    This is probably a CSS issues, but it's much easier to see what's going on with a live link. Are you able to post it here?

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My site is just local for now. This is my first time designing a page but you are right. It was a css issue. I copied the original lightbox css and placed it in the css folder. It works properly now.

    I really appreciate the fast response.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    No probs. Glad you found a solution. Hope we see you around again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •