Helpful Information
 
 
Category: Programming Articles
Highslide: How to Fade the Background

Highslide: How to Fade the Background (and keep it faded while arrowing though a set of Highslide pop-up windows)

There is an article here (http://vikjavev.no/highslide/forum/viewtopic.php?t=402) on how to fade the background when a Highslide pop-up appears. However, that was not working for my needs because, when you arrow through a set of pop-ups, the background goes from light to dark to light to dark, causing a flickering effect, so hence, this article.

This article will show you how to fade the background, and keep it faded while arrowing though a set of Highslide pop-up windows. To see the effect in action, go here (http://www.photoplog.com/), click on a random thumb, and arrow to the next image.

First though, let's learn how to read a 'diff' file, as you will need to make eight changes to the version 3.2.10 highslide.js file. Yep, this means you may need to upgrade to Highslide v.3.2.10, the latest version of Highslide as of this writing.

Reading a 'diff' file:

First we need some notation:

XX,YY,ZZ,QQ are line numbers
file1 is the original highslide.js file
file2 is the modified highslide.js file
< means remove this
> means replace with
--- is a separator between < and >
do not include < or > or --- in changes


Now we need to understand the 'codes' in the 'diff' file:

XXaYY means at the end of line XX of file1, append the contents of line YY of file2 to make them equal
XXaYY,ZZ means the same as above, but append the range of lines, YY through ZZ of file2 to line XX of file1
XXdYY means at line XX delete the line. The value YY tells to which line the change would bring file1 in line with file1
XX,YYdZZ means delete the range of lines XX through YY in file1
XXcYY means change the line XX in file1 to the line YY in file2
XX,YYcZZ means replace the range of specified lines with the line ZZ
XX,YYcZZ,QQ means replace the range XX,YY from file1 with the range ZZ,QQ from file2


Editing the highslide.js file:


202c202
< try { hs.getExpander(el).doClose(); } catch (e) {}
---
> try { hs.getExpander(el).doClose(1); } catch (e) {}
279,280c279,280
< try { hs.getAdjacentAnchor(exp.key, op).onclick(); } catch (e) {}
< try { exp.doClose(); } catch (e) {}
---
> try { hs.getAdjacentAnchor(exp.key, op).onclick(); } catch (e) {hs.getExpander().doClose(1); return false;}
> try { exp.doClose(-1); } catch (e) {}
320c320
< try { hs.getExpander().doClose(); } catch (e) {}
---
> try { hs.getExpander().doClose(1); } catch (e) {}
674c674
< try { hs.expanders[hs.expandedImagesCounter - 1].doClose(); } catch (e){}
---
> try { hs.expanders[hs.expandedImagesCounter - 1].doClose(1); } catch (e){}
1023a1024,1036
> HsExpander.prototype.hsDarkenScreen = function()
> {
> var hsjsscreen = document.getElementById('hsjsscreen');
> hsjsscreen.style.width = Math.max(parseInt(document.body.offsetWidth), parseInt(document.body.parentNode.scrollWidth)) + 'px';
> hsjsscreen.style.height = Math.max(parseInt(document.body.offsetHeight), parseInt(document.body.parentNode.scrollHeight)) + 'px';
> hsjsscreen.style.display = 'block';
> }
> HsExpander.prototype.hsLightenScreen = function()
> {
> var hsjsscreen = document.getElementById('hsjsscreen');
> hsjsscreen.style.display = 'none';
> }
1024a1038,1039
> if (dir == 1) this.hsDarkenScreen();
1295c1310
< this.doClose();
---
> this.doClose(1);
1298c1313,1315
< HsExpander.prototype.doClose = function() {
---
> HsExpander.prototype.doClose = function(flag) {
> if (flag == 1) this.hsLightenScreen();


Huh? What the...?!?!?

Let's look at the first change you need to make. It is marked as 202c202. So what does this mean?

It means change line 202 in the original highslide.js file from this:

try { hs.getExpander(el).doClose(); } catch (e) {}

Into this:

try { hs.getExpander(el).doClose(1); } catch (e) {}

See, not so hard. Now you only have seven more changes to make to the highslide.js file.

You're not quite done!

After you make all eight changes to the highslide.js find, you need to make two more changes:

At the top of the highslide.css file, add the following:
#hsjsscreen
{
background-color: #000000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: none;
}
Find the <body> tag in your document, and afterwards add the following:
<div id="hsjsscreen">&nbsp;</div>


One last thing:

Clear your browser cache to ensure that the edited highslide.js file is used.

Now you are done!

Note: This article was written for Highslide v.3.2.10, the latest version of Highslide at the time of this writing, and these changes were tested on FF 2.0.0.7, FF 2.0.0.8, and IE7, so YMMV on a different browser. Enjoy!

Thanks :)










privacy (GDPR)