Highslide: How to Fade the Background

		vb.org Archive > vBulletin Article Depository > Read An Article > Programming Articles
Highslide: How to Fade the Background

Thread Tools

Highslide: How to Fade the Background

calorie

Join Date: May 2003

Posts: 2,804

calorie

10-25-2007, 10:00 PM

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

05-26-2008, 07:29 AM

Stoebi

Join Date: Apr 2006

Location: Germany, Berlin

Posts: 331

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thanks

« Previous Thread | Next Thread »

Thread Tools
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

All times are GMT. The time now is 02:50 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04131 seconds Memory Usage 2,206KB Queries Executed 17 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (12)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (2)post_thanks_box (2)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit_info (1)postbit (2)postbit_onlinestatus (2)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!