Visit the Plugins FAQ for more informations.
Intro
Page 1: Highslide JS iFrame
Page 2: Highslide JS Photo
Page 3: Highslide JS PhotoGallery (Currently visiting)
Page 4: Highslide JS PhotoGallery with Thumbstrip
Page 5: Highslide JS Flash
Highslide JS PhotoGallery
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 this “highslide”folder and publish it to the root location of your server
5) Go to the post you want to insert the Highslide to and post the following code to the top of it
<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></head>
6) Where you want the link or thumbnail to appear in the post place the following code:
<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 (in red) to match your case.
Also change the caption for the pictures if you want.
It's an EBookStoretoday.com company. 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 -
