iWeb FAQ - Highslide JS Photo
iWebFAQ.org
Page 2: Highslide JS Photo (like Lightbox but better!)
Page 3: Highslide JS PhotoGallery (like Lightbox but better!)
Page 2: Highslide Photo with iWeb
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.
(A little bit of code knowledge would be good for that, or at least not be afraid of 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
6) As it doesn’t work with HTML Snippets we will use MassReplaceIt (Download here for Free) you can also use iTweak (Instructions and troubleshoot on using MassReplaceIt and iTweak can be found on the Alternative HTML FAQ please read that FAQ!)
7) First we use it to put some code into the <head></head> tags of the page:
Search: </head>
Replace with (copy&paste the following code):
<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.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script></head>
8) In iWeb add a TextBox where you want the link or thumbnail to appear and write
HighslidePhoto1 or whatever you want (however it must be specific for that)
Put it in the Search of MassReplaceIt or iTweak and in the Replace write:
<div class="highslide-gallery">
<a id="thumb1" 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>
<div class="hidden-container">
<a href="/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
</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 (in red) to match your case.
Also change the caption for the pictures if you want.
9) In MassReplaceIt under Files add only the html files of the page (or pages) you want to add the Highslide to.
10) Publish from iWeb run MassReplaceIt and you’re done. As previously mentioned visit the Alternative HTML FAQ if you don’t know how MassReplaceIt works or for troubleshooting.
NOTE: In MassReplaceIt make a new Query for each page and under Files add only the page the Query is for.
For MobileMe publishers:
The root of the server on MobileMe is your /Web/Sites/ folder. Upload the “highslide” folder to your iDisk/Web/Sites/ folder.
If you’re using a personal domain (such as www.yourdomain.com) using CNAME use the codes posted above. If you’re using the standard web.me.com/username URL use the codes posted here instead.
The code of point 7) for MobileMe publishers using the standard web.me.com/username address is slightly different:
<script type="text/javascript" src="/Username/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="/Username/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '/Username/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script></head>
Where /Username/ is your MobileMe username.
Also the code of point 8) differs in the same manner.
<div class="highslide-gallery">
<a id="thumb1" href="/Username/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/Username/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>
<div class="hidden-container">
<a href="/Username/images/gallery2.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="/Username/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
</div>
</div>
Where /Username/ is your MobileMe username.
iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website.
- Cédric -
iWebFAQ.org on Facebook
