Slim Box - Promblems

Ed · #1 Jan 2nd, 2008, 23:49

I know I seem to be posting often - but I try to help others. (I stress try)

I am trying to get an image to link to a larger version of an image, and obviously display in a slimbox.

I have done all the steps that have said. At least I hope I have. My CSS and file is valid strict code.

I've linked to both MooTools and the Script. (Underlined in Bold)
My Code (the simple, rel="lightbox") is also in the same. I've added the required CSS to my file - /about/beta.css

My Page is here. (http://www.simplifiedimpact.com/about/workexamples.html)

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Simplified Impact - Branding and Interface Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://simplifiedimpact.com/images57/mootools.js" type="text/javascript"></script>
<script src="http://simplifiedimpact.com/about/gallerydisplay.js" type="text/javascript"></script>
<script src="http://simplifiedimpact.com/about/portfolioslide2.js" type="text/javascript"></script>


<link type="text/css" rel="stylesheet" href="http://simplifiedimpact.com/beta.css" />


<style type="text/css">


/*<![CDATA[*/



 p.c1 {text-align: center;}


/*]]>*/
</style>
</head>

<body onload="new Accordian('basic-accordian',5,'header_highlight');">


<div><br /></div>

<div class="centered"><img class="centerimg" src="http://simplifiedimpact.com/log.jpg" alt="Simplified Impact" />
<div id="main-nav">
<ul>
<li><a href="http://www.simplifiedimpact.com/index.html" class="home"><span>Home</span></a><br /></li>
<li><a href="http://www.simplifiedimpact.com/about" class="aboutcurrent"><span>About us</span></a><br /></li>
<li><a href="http://www.simplifiedimpact.com/projects" class="projects"><span>Projects</span></a><br /></li>
<li><a href="http://www.simplifiedimpact.com/contact" class="contact"><span>Contact</span></a><br /></li>
</ul>
</div>
<div><br /></div>
<div id="aboutleft2"><div id="submenu"><br />
    <a href="http://www.simplifiedimpact.com/about/workexamples.html">Work Examples</a>
    <a href="http://www.simplifiedimpact.com/about/whatcanwedo.html">What can we do?</a>
    
</div></div>
<div id="aboutright2"><br /><p>Below you will find a list of previous projects, mock-ups, and some current ones. If you would like to see detailed information on all ongoing projects, please see the Projects Page.</p><p><img src="http://simplifiedimpact.com/about/keyswide.gif" alt="(XHTML = WINE | CSS = BLUE | GRAPHICS = YELLOW | WORDPRESS INTEGRATION = GREEN | BRANDING = DARK GREY | PHP = RED | JAVASCRIPT = PURPLE | DESIGN ADVICE = LIGHT GREY"/></p> </div>


<div id="cool"><div id="funtiontopmargin">
<div id="basic-accordian" ><!--Parent of the Accordion-->



<!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings header_highlight" >Techno Essence</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test-content"><!--DIV which show/hide on click of header-->
  
      <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child"><div class="moreicon">
    <a href="http://simplifiedimpact.com/about/cors.jpg" rel="lightbox">Larger</a></div>
        <a href="http://simplifiedimpact.com/about/cors.jpg" rel="lightbox"><img src="http://simplifiedimpact.com/about/porttechno.jpg" alt="TechnoEssence.com Screenshot. We did: XHTML+CSS | WORDPRESS INTEGRATION | BRANDING - August 2007"/></a>
    </div>

    
  </div>
<!--End of each accordion item--> 


<!--Start of each accordion item-->
  <div id="test1-header" class="accordion_headings" >Cork's Daily Snap</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test1-content"><!--DIV which show/hide on click of header-->
  
      <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
        <div class="moreicon">
    <a href="http://www.simplifiedimpact.com/about/workexamples.html">Larger</a></div>
        <a href="http://simplifiedimpact.com/about/cors.jpg" rel="lightbox" title="my caption"><img src="http://simplifiedimpact.com/about/portsnap.jpg" alt="CorksDailySnap.com Screenshot. We did: XHTML+CSS | WORDPRESS INTEGRATION | BRANDING - September 2007"/></a>
    </div>

    
  </div>
<!--End of each accordion item--> 

<!--Start of each accordion item-->
  <div id="test2-header" class="accordion_headings" >Techno Essence</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test2-content"><!--DIV which show/hide on click of header-->
  
      <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
        Somewhat of a test! Yes Yes Yes Yes!
    </div>

    
  </div>
<!--End of each accordion item--> 



<!--Start of each accordion item-->
  <div id="test3-header" class="accordion_headings" >Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test3-content"><!--DIV which show/hide on click of header-->
  
      <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />

    </div>
    
  </div>
<!--End of each accordion item--> 

</div>

<div id="makespace"></div>

</div>

</div>

</div>

</body>
</html>

I'm sure it's a small problem - something that I'm missing.

Thanks,
Ed

alexgeek · #2 Jan 3rd, 2008, 01:03

Apparently there's a problem on this line of mootools (el has no properties):

Code: Select all

            default: el.appendChild(this);

And this line of gallerydisplay.js (this.overlay has no properties):

Code: Select all

 this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});

Ed · #3 Jan 3rd, 2008, 01:15

Umm.

You might as well be saying:
"Cow went to the Market - Blah Blah, Pick up the milk"

No offense, but I have no clue what they mean. Do you?

Thank in advance,
Ed

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Slim Box - Promblems