bethatuw
Posts: 2
Joined: Fri Jan 18, 2013 6:14 am

Cannot Get Highslide To Work on my Website

My website is live at http://www.centran.info

I have attached a PDF that covers everything I have been working on. The website was created in Publisher however I am able to go into my website's hosting and edit the code for the website.

I did do all the steps also, looking at the FAQ's, API, and the Forums.

Thank you for any help you can give me. The Highslide galleries look really cool, that's why I chose the program. I did this through the online editor btw, well you'll see that in my PDF. Okay - so what file extensions are allowed on the file upload?

I've copied what I was going to upload and pasted it instead - but none of the images I had made now show up. How do you paste images?


STEP 1 Files:

This is what the highslide files look like that I unzipped and uploaded to the web in my website location:


When I first put the highslide folder up I had it under the centran file; but nothing was showing up on the Gallery page for the website (where I had pasted code segments from steps 1 and 2, so I moved the highslide folder and put it under the index_files directory, but still nothing is showing up on the Gallery page for my website.

Here is a snap of the FTP windows showing the order of my files in the centran directory and then what I uploaded of the highslide files:


Website IÔÇÖm trying to set up ÔÇô http://www.centran.info

STEP 2 code: (I pasted this code into the Gallery page for the website where I want this Highslide gallery to appear, as opposed to the index.htm I pasted it at the end of the <head> section just before </head>.)

Code: Select all

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
STEP 3 code: (I pasted this also in the code for the Gallery page, at the end of the <body> section just before </body>)

Code: Select all

<h3>Gallery</h3>
<div class="highslide-gallery">
	<ul>
	<li>
	<a href="highslide/images/large/WP_001904.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001904.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001901.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001901.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001907.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001907.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001903.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001903.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001898.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001898.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001902.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001902.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001893.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001893.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001894.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001894.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001908.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001908.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001896.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001896.jpg"  alt=""/>
	</a>
	</li>
	<li>
	<a href="highslide/images/large/WP_001897.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/WP_001897.jpg"  alt=""/>
	</a>
	</li>
	</ul>
	<div style="clear:both"></div></div>
My questions,

1. The instructions said to unzip the highslide zip file into the ÔÇ£root of your web folderÔÇØ ÔÇô what is considered the root of my web folder, is that why it isnÔÇÖt working b/c I have these highslide files in the wrong place?
2. When I look at the code for the website, index.htm appears to me to be the first page of the website, the second page is gallery.htm, and the third page is contact.htm - I didnÔÇÖt think the highslide stuff should go into the ÔÇ£first pageÔÇØ folder because that isnÔÇÖt where I want the gallery. Should it be near the index.htm file or in the index_files folder, or?

Is my location for the image files wrong ÔÇô but even if it is, nothing of the highslide gallery code/layout is even showing up in the first place.


Since I wrote the above I moved the highslide folder so it is under the Centran folder, but nothing shows up on the Gallery page still.

Here is new arrangement of files and folder:


3. What about the location in the code for the gallery image files ÔÇô is it right?

I give up tonight
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Cannot Get Highslide To Work on my Website

Let's try to chip away at this one piece at a time. Trust me, this isn't as complicated as you're making it.

First, you have pasted the following lines in the wrong place in GalleryEnerco.htm:

Code: Select all

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
You have them within a <style> tag, and these are not CSS attributes. Move them down, so that they really are just before the closing </head> tag.

Now, file locations. All of the URL's are relative links. So, from http://www.centran.info/index_files/GalleryEnerco.htm, the URL's are looking for a highslide directory at the same level, with everything below that. For example, it's looking for http://www.centran.info/index_files/hig ... gallery.js. When I go there, I get a "404 not found" error. It's the same with all of the highslide files. They should all be under http://www.centran.info/index_files/.

You have placed the files one level too high. The highslide-with-gallery.js file, for example, is actually at http://www.centran.info/highslide/highs ... gallery.js. It will be easiest to move the entire highslide directory so that it's under index_files.

Some other observations in the next post....
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Cannot Get Highslide To Work on my Website

Microsoft Publisher is an application that's designed for producing printed pages, like a newsletter. It is not intended to produce web pages. As a result, it produces code that is wildly convoluted, and is virtually impossible to maintain. That GalleryEnerco.htm page, for example, is over 750 lines of impenetrable code. It should be about 100 lines, tops. I would strongly suggest that you take the time to learn some HTML and CSS, and build the pages by hand. I'm not a big fan of website-building applications, but you might not have enough time to learn enough HTML/CSS to create these pages manually. So you might use a tool that's actually built to produce web pages, like Dreamweaver or Kompozer.

Separate subject: screenshots. There's no need to create PDF's to show others what you're seeing on your monitor. Install a simple screenshot application, one that saves JPG's or PNG's. I like Greenshot, a freebie.
bethatuw
Posts: 2
Joined: Fri Jan 18, 2013 6:14 am

Re: Cannot Get Highslide To Work on my Website

Thank you Early - does it help if I mention I'm a 60 year old grandmother of four and that's why I'm using Publisher? I really don't build a lot of websites, so Publisher makes it easier to get something going, except when you want to make your website more dynamic.

I made the changes and it all works perfectly now.

I can see one place to where using Publisher is a drawback because of not editing the code at the entry level of the program, it means that I cannot update the website when I have changed it in Publisher b/c it will wipeout the pages where the Highslide code is, at least that's what I think will happen. So I will check out the programs you have suggested.

Thanks again :D
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Cannot Get Highslide To Work on my Website

bethatuw wrote:Thank you Early - does it help if I mention I'm a 60 year old grandmother of four and that's why I'm using Publisher?
I firmly believe that 1952 was a banner year, having been born then myself. ;)

Return to “Highslide Editor”