Is it possible to use Highslide with Site Spinner. I like their expanding thumbnails with caption but need help to get started. They have a tutorial but how to start is beyond me

Valerie M

Can you be a little more specific about where you need help? How far have you gotten? Did you get all the code installed? Locally or on your site?

I have only downloaded and unzipped their file and don't know where to go now. Sorry to be so stupid. Valerie

Valerie, please don’t think your stupid (unless you’re blond . . lol)

We all begin somewhere with bright ideas, and find something we would like to use then get confused with the process.

I’m sure that Larry and Bruce, even with their years of experience, still occasionally suffer this phenomenon.

Web development is so advanced these days, and we keep finding new scripts provided by extremely clever people. What’s more, a lot of it is for free.

It is up to us as web developers to utilize these “freebies” to our own advantage.

Until your post, I had never heard of Highslide, but on a quick Google search, it looks very impressive.

I will download it, try it out with Site Spinner, then report back again.

By the way, I wish your surname didn’t start with “M”

“Valeriem” puts me to sleep.

Valerie, sorry for the late reply, but I have gone down to my fiancé’s place for the weekend (about 300 miles from home) and the resources on her computer are very limited. She doesn’t have Site Spinner installed, so I can’t run any tests.

I downloaded the Highslide zip file and had a look at that and the instructions on their home page. I must admit, it is fairly sketchy and lacks a few basic instructions for beginners.

Until I get home on Monday to try it with SS, here are some of my findings.

First of all, for the purpose of testing, in each step, I suggest you publish to local disc.

Unzip the file from Highslide to somewhere on your computer. There are three folders. Examples, Highslide and Images. Copy both the Highslide and Images folders into the folder where you are going to publish your SS project to.

For testing purposes, you can leave the contents of the Images folder as is. Or, delete them all and replace them with images of your own.

From the Highslide home page, copy the following code.

 <script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
</script>

If you have SS Pro, paste the code into a Code Object and make sure that you choose “Header” as the code’s placement. If you do not have SS Pro, open the Page Editor, select the Header tab. Click the “New Header” button and paste the code there.

In either case, you will have to edit both "/highslide/highslide.js" and "/highslide/highslide.css" to point to the correct location as to where you paced the Highslide files.

Create a new code object and place the following code into the body and position the code object on your work page to where you want the thumbnail to appear.

 <a href="images/full-image.jpg" class="highslide"
        onclick="return hs.expand(this)">
    <img src="images/thumbnail.jpg" alt="Highslide JS"
        title="Click to enlarge" height="120" width="107" /></a>

If you are just testing, leave the code as is. If you are using your own images, replace the “thumbnail.jpg” with your image.

To create a gallery, you will need to create a new highslide.js file. Go to the Highslide home page. From the menu at left, select “Configurator”. Make the choices you want on that page hen download the new highslide.js file and replace the original.

I think you will also have to add a new code object with the following code.

 <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>

As I said earlier, I’m not real sure if all of this will work, as I don’t have Site Spinner on this computer. When I get home, I will test my theories and see if it actually does work correctly.

Terry

Hi Terry

Thanks for all that. I will have a try.

Valerie

Hi Terry

I have failed.I think I've done all you said. By the way I have Site Spinner (not Pro) Maybe this is too advanced for me or SS. It just looked so cool.

Valerie

I haven't used Highside, but reading through Terry's post, there is nothing to indicate it shouldn't work with SS Basic. Let's wait until Terry gets home. And if by some chance he doesn't make it (he's at his financee's place after all!), I'll take a closer look.

Bruce, I have eventually made it back home. I even brought my fiancé back with me for a couple of weeks (the house is filthy and the freezer is empty).

Valerie, I built myself a new computer a couple of months ago, but did not install SS Standard. I have done that this afternoon while my fiancé is busy sweeping, mopping, dusting and cooking.

My theories in my last post do work fine with SS Standard as with SS Pro. The only difference with my last post and what I found was that, to make it more suitable to use with SS, you do not need to place the code for the image reference separately into a code object. You can place the thumbnail into your project using the Mona Lisa icon, then add the code for the full image to the link of the thumbnail.

Instead of going into great detail on this forum, I have knocked up a project with full detail (using SS Standard) which you can view and/or download here

Download instructions are given at the bottom of the page.

Terry

Hi Terry

Thanks so much for all your work

I think I have followed all your instructions, but this is what I ended up with not sure where I have gone wrong (see below). It keeps wanting to open in another page. If you look at my site and click on the rugby ball you will see where I would like to put the slide show with a caption under the photos,ie. My Rugby world cup register but it may be better to stick with individual photos as on the examples on the Highslide site "The bird picture" looks good. Is this easier to implement?
www.homelinkinternational.co.nz/highslide.html

This message has been edited. Last edited by: valeriem,

The links you have on your thumbnails point to image files located in your root directory, but you have uploaded them to your /image folder. You will either need to upload the images to your root, or change the links to point to the image folder; e.g., ./image/photo_001.jpg

Hi Valerie,

Larry is correct. I just checked and the images are in the correct folder called “images”.

If you add

images/

in front of

photo_001.JPG

, and also for the other image links, I’m sure you’ll find that it will work.

I just found another problem. It doesn’t appear that you have uploaded all of the files in the “highslide” folder, nor the “graphics” folder and all of it’s contents.

Hi Terry

I have uploaded all the files in the Highslide folder also the Graphics folder and still no good.
I have moved the Highslide folder to C:\Highslide\Images\photo_001.JPG as it didn't work in 'My site' where I keep the IMS files.
I can't work out how to change the links to point to the Images file. It seems to be doing this (see above). Shall I give up !!!!

Valerie

No!! Never give up! I won't step in here -- a case of too many cooks spoiling the broth.

Let's hope that Terry comes along here soon -- if he can tear himself away from his fiancee.

I think Terry should keep her on. She does all the cooking, cleaning, sweeping and dusting ! What a treasure.

Valerie

Bruce is right (at least not about not giving up), and she only does what you suggest while she’s here, which is not often enough.

Maybe I confused the issue a little by having the root directory named “Highslide” and the required sub folder “highslide”.

To adapt my example project, we will consider the folder where you have the page from where you wish to display the slideshow as the “root” folder (directory). If it is a sub-folder of your site’s root directory, that’s immaterial.

So, in the folder that contains the page, nothing else needs to be there for the slideshow to work. Other items in that folder will not affect it.

You will now require three sub-folders to that directory. The first one will be “image” which will be created by SS when you publish. It will contain the thumbnails. The second one will be “images” which you have to create yourself, and is where your full images reside (a step I think you have already carried out).

The third sub-folder will be “highslide”, which contains all of the javascript files. It should also contain it’s own sub-folder called “graphics”, which contains all of the images required for the slideshow. The “graphics” folder should have yet another sub-folder called “outlines” which contains even more elements for the slideshow to work.

The third “highslide” folder does not need any editing (at this stage), and can be copied from the Highslide download and pasted into the “root” directory, which should include the “graphics” and “outlines” folders.

Now all you have to do is make sure the path for the links to the full images are correct as described above and in the sample project I made up, and that the header script placed into your page also have the correct file path.

Looking at the sample page you posted, you only have half of the required header script there. You have not included the second part to set the highslide links. You will need to include that. That’s why your page has a yellow triangle at bottom left. Double click that and you will see that “hs” is not defined. “Hs” is the path in the body’s script to point to the “graphics” folder.

I hope I haven’t confused you more. If you require more assistance, please email me. My email address is in my profile.

Hi to anyone who has followed this topic.

With the expert help of Terry I have Highslide up and running on my web site. Have a look at www.homelinkinternational.co.nz I think you will agree that this is a great way to display photos with a caption

Now for a slide show !!!

Signing off ...........Valerie