RapidWeaver FAQ - Highslide JS PhotoGallery







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:



Click the thumbnail. To go forward and backward put the mouse pointer to the top of the image and click when the forward or back flash appears.

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 PhotoGallery 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-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>



8. In RapidWeaver where you want the Highslide PhotoGallery to appear paste the following code:

<div class="highslide-gallery">

<a href="/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>

<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>

<a href="/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/images/gallery2.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" /></a>

<div class="highslide-caption">
Caption for the second image.
</div>

<a href="/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/images/gallery3.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" /></a>

<div class="highslide-caption">
Caption for the third image.
</div>

</div>



Put the images in a folder called “images” and upload this folder to the root of your server.
In the code change the names of the photo files (.jpg) to match your case.
Also change the caption for the pictures if you want.

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