Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Lightbox stopped working...

    Hi,

    I've been using lightbox to show some profile pictures on my site.
    http://www.pswebdesigns.co.uk/portfolio.html
    All was working fine on various browers until i decided to change my navigation buttons. These buttons involve some javascript & ever since they were installed, my portfolio images dont show up properly within the lightbox ... box. Just loads up a new page and puts the bigger image there.

    Here's the js for the buttons called sliding_effect...I also have the jquery file if thats is needed, but for now here's the slding effect js.

    Code:
    $(document).ready(function()
    {
    	slide("#linkList", 25, 15, 150, .8);
    });
    
    function slide(navigation_id, pad_out, pad_in, time, multiplier)
    {
    	// creates the target paths
    	var list_elements = navigation_id + " li.sliding-element";
    	var link_elements = list_elements + " a";
    	
    	// initiates the timer used for the sliding animation
    	var timer = 0;
    	
    	// creates the slide animation for all list elements 
    	$(list_elements).each(function(i)
    	{
    		// margin left = - ([width of element] + [total vertical padding of element])
    		$(this).css("margin-right","-180px");
    		// updates timer
    		timer = (timer*multiplier + time);
    		$(this).animate({ marginRight: "0" }, timer);
    		$(this).animate({ marginRight: "15px" }, timer);
    		$(this).animate({ marginRight: "0" }, timer);
    	});
    
    	// creates the hover-slide effect for all link elements 		
    	$(link_elements).each(function(i)
    	{
    		$(this).hover(
    		function()
    		{
    			$(this).animate({ paddingRight: pad_out }, 150);
    		},		
    		function()
    		{
    			$(this).animate({ paddingRight: pad_in }, 150);
    		});
    	});
    }

    And here's the HTML for the buttons:

    Code:
     <div id="linkList"> 
    		
    			<div id="lmustHave"> 
    				<h3 class="mustHaves"><span>The must haves</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../index.html" title="Homepage">Home</a></li> 
    					<li class="sliding-element"><a href="../about.html" title="Want to know more?">About us</a></li> 
                        <li class="sliding-element"><a href="../contact.php" title="Contact form">Contact</a></li> 
    				</ul> 
    			</div> 
    			
    			<div id="lgoodBit"> 
    				<h3 class="goodBits"><span>The good bits</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../portfolio.html" title="View some of my work">Portfolio</a></li>																			                    <li class="sliding-element"><a href="../inspiration.html" title="Inspirational sites, articles and people">Inspirations</a></li> 
    					<li class="sliding-element"><a href="../tutorial.html" title="Some helpful tutorials">Tutorials</a></li> 
    				</ul> 
    			</div> 
      </div>


    The lightbox code is freely available to everyone and is fairly huge so will leave that out.

    But below is the HTML code for some of my images:

    Code:
    <div class="img">
                        <a href="images/portfolio/SmartReply_BusinessCards.jpg" rel="lightbox[designs]" title="#"><img src="images/portfolio/SmartReply_BusinessCards_sm.jpg" alt="alt" width="90" height="70" /></a>
                    </div>
                    <div class="img">
                        <a href="images/portfolio/EerieRoom_SharkStars-Edit.jpg" rel="lightbox[designs]" title="'#"><img src="images/portfolio/EerieRoom_SharkStars-Edit_sm.jpg" alt="alt" width="90" height="70" /></a>
    </div>


    If anyone needs the CSS let me know and i'll put it up, but think its rather more to do with the js.


    thanks in advance for any help

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    any ideas?
    Trying to figure it out, but whatever has occurred, the solution still eludes me

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The button animation isn't working on the portfolio page either. Firebug is reporting some javascript errors. Have a look.

    ($(parentElement) || document.body).getElementsByTagName is not a function
    http://www.pswebdesigns.co.uk/js/prototype.js
    Line 835

    element.style is undefined
    http://www.pswebdesigns.co.uk/js/lightbox.js
    Line 106
    Are you a Help Vampire?

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Javascript isn't exactly my strongest code the button animation was a neat little tutorial from this place:
    http://net.tutsplus.com/tutorials/ja...-using-jquery/

    And lightbox is of course just an installation kind of thing, so not sure what those errors mean...

    All the other pages work fine...the buttons etc and they have the same css styles linked, only difference between them and the portfolio page is that the portfolio page has other javascript running there from the lightbox application.

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thought i'd put the full portfolio page up as well, just in case there may be a problem inside...

    Code:
    <!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" xml:lang="en" > 
    <head> 
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    	<meta name="author" content="Paul Salter" /> 
    	<meta name="keywords" content="design, css, graphics, style, elegant, illustration, graphic design, w3c, web standards, visual, logos, print design" /> 
    	<meta name="description" content="Portfolio &amp;amp; Freelancer." /> 
    	<meta name="robots" content="all" /> 
    	<title>PS Web Designs</title> 
     
     
      
        <script type="text/javascript" src="js/prototype.js"></script>
    	<script type="text/javascript" src="js/scriptaculous.js"></script>
    	<script type="text/javascript" src="js/lightbox.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/sliding_effect.js"></script> 
    	
    	
    	<style type="text/css" title="currentStyle" media="screen"> 
    		@import "pswdStyle.css";
    		@import "lightbox.css";
    	</style> 
    	<link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />	
    </head> 
     
     
    <body id="pswebdesigns"> 
     
    <div id="container"> 
    	<div id="intro"> 
    		<div id="pageHeader"> 
    			<h1><span>PS Web Designs</span></h1> 
    			<h2><span>Sharing creativity</span></h2> 
    		</div> 
     
    		<div id="quickSummary"> 
    
    		</div> 
     
    		<div id="aStart">
            
             			
                        <img src="images/portfolio.jpg" alt="alt" width="145" height="33" />
                      
                       
            <p class="p1"><span>To enlarge any of the images just click on the thumbnails below. Due to an error in the lightbox image display file, we're currently experiencing some technical difficulties.</span></p> 
    				 <div class="img">
                        <a href="images/portfolio/SmartReply_BusinessCards.jpg" rel="lightbox[designs]" title="#"><img src="images/portfolio/SmartReply_BusinessCards_sm.jpg" alt="alt" width="90" height="70" /></a>
                    </div>
                    <div class="img">
                        <a href="images/portfolio/EerieRoom_SharkStars-Edit.jpg" rel="lightbox[designs]" title="#"><img src="images/portfolio/EerieRoom_SharkStars-Edit_sm.jpg" alt="alt" width="90" height="70" /></a>
                    </div>
    </div> 
    	</div> 
     
    	
      <div id="linkList"> 
    		
    			<div id="lmustHave"> 
    				<h3 class="mustHaves"><span>The must haves</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../index.html" title="Homepage">Home</a></li> 
    					<li class="sliding-element"><a href="../about.html" title="Want to know more?">About us</a></li> 
                        <li class="sliding-element"><a href="../contact.php" title="Contact form">Contact</a></li> 
    				</ul> 
    			</div> 
    			
    			<div id="lgoodBit"> 
    				<h3 class="goodBits"><span>The good bits</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../portfolio.html" title="View some of my work">Portfolio</a></li>																			                    <li class="sliding-element"><a href="../inspiration.html" title="Inspirational sites, articles and people">Inspirations</a></li> 
    					<li class="sliding-element"><a href="../tutorial.html" title="Some helpful tutorials">Tutorials</a></li> 
    				</ul> 
    		</div> 
      </div> 
      
      
      
    <div class="clearfooter"></div>
    	
        	<div id="footer">
            
                    <p><a href="http://validator.w3.org/check?uri=referer"><img
                    src="images/w3cValidTemps.gif"
                    alt="Valid XHTML 1.0 Strict" height="25" width="90" /></a>
         
                    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img 
                    src="images/w3cValidCSS.gif"
                    alt="Valid CSS!" width="90" height="25" /></a></p>
           </div>    		 
    </div>	
    </body> 
    </html>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    try a different animator

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    	<style type="text/css" title="currentStyle" media="screen">
    		@import "http://www.pswebdesigns.co.uk/pswdStyle.css";
    		@import "http://www.pswebdesigns.co.uk/lightbox.css";
    	</style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (14-May-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    //  parameter 0 = the mode(see Note 2).                                                                     (string)
    //  parameter 1 = the unique ID name or element object.                                                     (string or element object)
    //  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    //  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    //  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    //  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //  Note 6: parameters 2 and 3 must be different values to execute the script.
    //
    
    // **** Advanced Applications
    //
    //  Calling function 'zxcBAnimator' returns the instance of the script,
    //  this may be assigned to a variable and used to access the current value of the effect or to control the effect.
    //  alternatively the script instance by elementobject[mode.replace(/\W/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element [instance].data as fields 0, 1 and 2 respectively where [instance] is the instance of the script.
    //
    //  Once initialised the effect may be updated by calling function
    //  [instance].update([100,200])
    //  where:
    //   parameter 0 = an array defining the start and finish values.                                            (array)
    //                  field[0] =the start position of the effect.   (digits, for opacity minimum 0, maximum 100)
    //                  field[0] = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
    //   parameter 1 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //   parameter 2 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                   field 0 the minimum. (digits)
    //                   field 1 the maximum. (digits)
    //   parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                  'sin' progression starts fast and ends slow.
    //                  'cos' progression starts slow and ends fast.
    //
    // ** Bounce
    //   A 'bounce' effect may be applied by assigning the script instance property 'Bounce' an array
    //   defining the 'bounce' properties.
    //   e.g.
    //   [instance].Bounce=[100,90,4,200];
    //   where:
    //    field[0] = the 'bounce' maximum.  (digits)
    //    field[1] = the 'bounce' minimum.  (digits)
    //    field[2] = the number of bounces. (digits)
    //    field[3] = the 'bounce' duration. (digits)
    //
    
    
    // **** General
    //
    // Function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code, about 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms,scale,curve);
     }
     else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
     return oop;
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     clearTimeout(this.to);
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.ms=this.mS;
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     this.ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
     this.apply();
     if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Bounce&&this.Bounce[2]>0) this.bounce();
     }
    }
    
    zxcBAnimatorOOP.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.bounce=function(){
     if (this.Bounce[2]%2==0)
     this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
     this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
     this.Bounce[2]--;
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(cls,min,max,ms){
     var objs=zxcByClassName(cls);
     this.ms=ms||1000;
     this.objs=[];
     for (var a,z0=0;z0<objs.length;z0++){
      a=objs[z0].getElementsByTagName('A')[0];
      this.objs[z0]=[a,min,max];
      this.addevt(a,'mouseover','Mse',z0);
      this.addevt(a,'mouseout','Mse',z0);
     }
    }
    
    Slide.prototype.Mse=function(e,nu){
     zxcBAnimator('width#',this.objs[nu][0],this.objs[nu][1],this.objs[nu][2],this.ms);
    }
    
    Slide.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script></head>
    
    <body onload="S=new Slide('sliding-element',180,210)">
      <div id="linkList">
    
    			<div id="lmustHave">
    				<h3 class="mustHaves"><span>The must haves</span></h3>
    				<ul>
    					<li class="sliding-element" ><a href="../index.html" title="Homepage">Home</a></li>
    					<li class="sliding-element"><a href="../about.html" title="Want to know more?">About us</a></li>
                        <li class="sliding-element"><a href="../contact.php" title="Contact form">Contact</a></li>
    				</ul>
    			</div>
    
    			<div id="lgoodBit">
    				<h3 class="goodBits"><span>The good bits</span></h3>
    				<ul>
    					<li class="sliding-element"><a href="../portfolio.html" title="View some of my work">Portfolio</a></li>																			                    <li class="sliding-element"><a href="../inspiration.html" title="Inspirational sites, articles and people">Inspirations</a></li>
    					<li class="sliding-element"><a href="../tutorial.html" title="Some helpful tutorials">Tutorials</a></li>
    				</ul>
    			</div>
      </div>
    
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    It might not be reading your CSS. Try calling it like this:

    Code:
    <link href="lightbox.css" rel="stylesheet" type="text/css">
    <link href="pswdStyle.css" rel="stylesheet" type="text/css">
    If that doesn't work, try calling upon Lightbox by using rel="lightbox" instead of rel="lightbox[design]".

  • #8
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for your suggestions. Vic, I tried using your element animator, but couldnt get it to work on the navigation buttons and still no progress on the lightbox issue.

    Jrp1, attempted what you said and still no progress...buttons work with original scripts, but since I added those on a week back, the lightbox refuses to work

  • #9
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok, well lightbox now works with Vic's script, but the buttons don't... Any advice here Vic?


    Code:
    <!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" xml:lang="en" > 
    <head> 
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    	<meta name="author" content="Paul Salter" /> 
    	<meta name="keywords" content="design, css, graphics, style, elegant, illustration, graphic design, w3c, web standards, visual, logos, print design" /> 
    	<meta name="description" content="Portfolio &amp;amp; Freelancer." /> 
    	<meta name="robots" content="all" /> 
    	<title>PS Web Designs</title> 
    
    
    	<script type="text/javascript" src="js/prototype.js"></script>
    	<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    	<script type="text/javascript" src="js/lightbox.js"></script>
    	<script type="text/javascript" src="js/elementAnimator.js"></script>
         
    	
    	<style type="text/css" title="currentStyle" media="screen"> 
    		@import "pswdStyle.css";
    		@import "lightbox.css";
    	</style> 
    	<link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />	
    </head> 
     
     
    <body id="pswebdesigns"> 
     
    <div id="container"> 
    	<div id="intro"> 
    		<div id="pageHeader"> 
    			<h1><span>PS Web Designs</span></h1> 
    			<h2><span>Sharing creativity</span></h2> 
    		</div> 
     
    		<div id="quickSummary"> 
    
    		</div> 
     
    		<div id="aStart">
            
             			
                        <img src="images/portfolio.jpg" alt="alt" width="145" height="33" />
                      
                       
            <p class="p1"><span>To enlarge any of the images just click on the thumbnails below. Due to an error in the lightbox image display file, we're currently experiencing some technical difficulties.</span></p> 
    				 <div class="img">
                        <a href="images/portfolio/SmartReply_BusinessCards.jpg" rel="lightbox[designs]" title="A logo &amp; business card design that I entered on a contest hosted on 99designs.com"><img src="images/portfolio/SmartReply_BusinessCards_sm.jpg" alt="alt" width="90" height="70" /></a>
                    </div>
                    <div class="img">
                        <a href="images/portfolio/EerieRoom_SharkStars-Edit.jpg" rel="lightbox[designs]" title="'A Fragmented Reality' One of my own first illustrations, an out of bounds design, more of an exploration of a variety of skills learnt"><img src="images/portfolio/EerieRoom_SharkStars-Edit_sm.jpg" alt="alt" width="90" height="70" /></a>
                    </div>
    
    <body onload="S=new Slide('sliding-element',180,210)">
      <div id="linkList"> 
    		
    			<div id="lmustHave"> 
    				<h3 class="mustHaves"><span>The must haves</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../index.html" title="Homepage">Home</a></li> 
    					<li class="sliding-element"><a href="../about.html" title="Want to know more?">About us</a></li> 
                        <li class="sliding-element"><a href="../contact.php" title="Contact form">Contact</a></li> 
    				</ul> 
    			</div> 
    			
    			<div id="lgoodBit"> 
    				<h3 class="goodBits"><span>The good bits</span></h3> 
    				<ul> 
    					<li class="sliding-element"><a href="../portfolio.html" title="View some of my work">Portfolio</a></li>																			                    <li class="sliding-element"><a href="../inspiration.html" title="Inspirational sites, articles and people">Inspirations</a></li> 
    					<li class="sliding-element"><a href="../tutorial.html" title="Some helpful tutorials">Tutorials</a></li> 
    				</ul> 
    			</div> 
      </div> 
      
      
      
    <div class="clearfooter"></div>
    	
        	<div id="footer">
            
                    <p><a href="http://validator.w3.org/check?uri=referer"><img
                    src="images/w3cValidTemps.gif"
                    alt="Valid XHTML 1.0 Strict" height="25" width="90" /></a>
         
                    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img 
                    src="images/w3cValidCSS.gif"
                    alt="Valid CSS!" width="90" height="25" /></a></p>
           </div>    		 
    </div>	
    
     
    </body> 
    </html>


    I also attempted put javascript tags around the onload, but to no avail
    Code:
    <script type="text/javascript">
    <body onload="S=new Slide('sliding-element',180,210)">
    </script>

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Something funky is going on. I think your scriptaculous library might be conflicting with your prototype library.

  • #11
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jrp1 View Post
    Something funky is going on. I think your scriptaculous library might be conflicting with your prototype library.
    you gave me an idea to test what was screwing lightbox up with the original javascript I was using on my navigation & seems the jquery.js file is the culprit...tested with and without and it works without jquery. Also tested with and without the sliding_effect.js file and still works with that.

    So, lightbox is complaining cause of jquery, not good

  • #12
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Someone on the lightbox forums suggested using slimbox2...works brilliantly. So the problem is no longer a problem

    thanks for the help guys.

    Here's the link if you ever run into the same problem, as lightbox doesnt like jquery: http://www.digitalia.be/software/slimbox2#usage

  • #13
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    jQuery rarely plays nicely with others ;]

    Glad you got it working.


  •  

    Posting Permissions

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