vBulletin LTS

Highslide: How to Fade the Background

by calorie 26 Oct 2007

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

There is an article 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 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

Code:

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

279,280c279,280

Code:

< 	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

Code:

< 			try { hs.getExpander().doClose(); } catch (e) {}
---
> 			try { hs.getExpander().doClose(1); } catch (e) {}

674c674

Code:

< 		try { hs.expanders[hs.expandedImagesCounter - 1].doClose(); } catch (e){}
---
> 		try { hs.expanders[hs.expandedImagesCounter - 1].doClose(1); } catch (e){}

1023a1024,1036

Code:

> 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
Code:
```
> 	if (dir == 1) this.hsDarkenScreen();
```

1295c1310

Code:

< 	this.doClose();
---
> 	this.doClose(1);

1298c1313,1315

Code:

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

Code:

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

Into this:

Code:

	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:

Code:

#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:
Code:
```
<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!

vblts.ru supports vBulletin®, 2022-2024