Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Highslide: How to Fade the Background
calorie
Join Date: May 2003
Posts: 2,804

by calorie calorie is offline 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 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

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 279,280c279,280

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 320c320

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 674c674

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 1023a1024,1036

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 1024a1038,1039

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 1295c1310

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • 1298c1313,1315

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.


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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Into this:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  • Find the <body> tag in your document, and afterwards add the following:

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.


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!
Views: 5635
Reply With Quote
Comments
  #2  
Old 26 May 2008, 08:29
Stoebi Stoebi is offline
 
Join Date: Apr 2006
Real name: Peter
Thanks

Last edited by Stoebi; 17 Jul 2008 at 07:06.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

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


New To Site? Need Help?

All times are GMT. The time now is 22:57.

Layout Options | Width: Wide Color: