...

View Full Version : Lightbox stopped working...



SlyOne
06-25-2009, 10:05 PM
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.



$(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:



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



<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

SlyOne
06-26-2009, 01:59 PM
any ideas? :confused:
Trying to figure it out, but whatever has occurred, the solution still eludes me :(

tomws
06-26-2009, 05:57 PM
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

SlyOne
06-29-2009, 11:36 AM
Javascript isn't exactly my strongest code ;) the button animation was a neat little tutorial from this place:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

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

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.

SlyOne
07-03-2009, 04:39 PM
thought i'd put the full portfolio page up as well, just in case there may be a problem inside...



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

vwphillips
07-03-2009, 05:53 PM
try a different animator


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

jrp1
07-03-2009, 06:22 PM
It might not be reading your CSS. Try calling it like this:


<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]".

SlyOne
07-03-2009, 07:09 PM
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 :(

SlyOne
07-03-2009, 07:28 PM
Ok, well lightbox now works with Vic's script, but the buttons don't... Any advice here Vic?




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


<script type="text/javascript">
<body onload="S=new Slide('sliding-element',180,210)">
</script>

jrp1
07-03-2009, 07:57 PM
Something funky is going on. I think your scriptaculous library might be conflicting with your prototype library.

SlyOne
07-03-2009, 08:07 PM
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 :(

SlyOne
07-03-2009, 08:19 PM
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

jrp1
07-03-2009, 08:55 PM
jQuery rarely plays nicely with others ;]

Glad you got it working.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum