RapidWeaver FAQ - Highslide JS Flash







Share/Bookmark


Highslide JS Intro
Page 1: Highslide JS iFrame
Page 2: Highslide JS Photo (like Lightbox but better!)
Page 3: Highslide JS PhotoGallery (like Lightbox but better!)
Page 4: Highslide JS PhotoGallery with Thumbstrip
Page 5: Highslide JS Flash



Example:

Display Flash

How to:

That’s how you do it:

1. Go to Highslide and Download Highslide.
2. You will get a folder Highslide-4 (or similar)
3. In that folder you will find a Folder named “highslide” containg the following files:
- A Folder named “graphics”
- A file named “highslide-full.js”
- and many more files
4. Take that folder and change permissions of the folder as follows:
Hit command(Apple)+i
Go to sharing&permissions and set all permissions to read&write and select "Apply to enclosed items" where the gear displays.
5. Upload the highslide folder (the one of step 3) to the root location of your server (most top level)
6. First we need to put some code into the tags of the page where we want to insert the Highslide Flash to.
7. To do this go to Page Info => Header => Header and paste the following code into the previously mentioned field:

<script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="/highslide/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// Apply the Highslide settings
hs.graphicsDir = '/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header no-footer';
hs.allowSizeReduction = false;
// always use this with flash, else the movie will be stopped on close:
hs.preserveContent = false;

// 3) Optionally set the swfOptions. See http://highslide.com/ref/hs.swfOptions for full documentation
/* hs.swfOptions = {
version:  "7",
expressInstallSwfurl: null,
flashvars:{},
params:   {},
attributes:   {}
}; */
</script>



8. In RapidWeaver where you want the Highslide Flash link or thumbnail to appear paste the following code:

<a href="url of the .swf file" onclick="return hs.htmlExpand(this, { objectType: 'swf', width: 600, objectWidth: 600, objectHeight: 450, maincontentText: 'You need to upgrade your Flash player'  } )"
class="highslide">
Display Flash
</a>



Change the “url of the .swf file” to fit your case.
Change the two width parameters and height parameter to fit your case.
If you want to have an image displaying instead of the name of the sitename replace “Display flash” with

<img src="urloftheimage">

if you don’t want an image you just change what is written.

10. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".

11. Publish the website.



This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share