trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Controls Not Showing up

Sun Sep 02, 2012 4:27 am

Hello,

I have been trying to get the controls to show up for two weeks. I have tweaked and changed things and started over. Below is what I currently have (My site is not live so I can only paste my code here). My 'highslide' folder is right below my root folder. I also copied the highslide.css into my dark.css in order to only have one css file. When I click on the thumbnail it expands into a separate webpage. I have also pasted part of my CSS file. Please help me figure out how to get the controls to show up.

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="dark.css" />
Javascript:

Code: Select all

<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: false
	}

});

// gallery config object
	var config1 = {
		slideshowGroup: 'group1',
		thumbnailId: 'thumb1',
		transitions: ['expand', 'crossfade']
	
};
	
</script>
HTML:

Code: Select all

<div id="highslide-gallery">

			<a href="images/mjmusicbw.png" class="highslide" onclick="return hs.expand(this, config1 )">
				<img src="images/mjmusicbw.thumb.jpg" title="Click to Enlarge" alt=""/>
			</a>
     
		<div class="hidden-container">

			<a href="images/IMG_0082e.jpg" class="highslide" onclick="return hs.expand(this, config1) ">
				<img src="images/IMG_0082e.jpg" alt=""/> </a>
    
	    	<a href="images/Image 3.jpg" class="highslide" onclick="return hs.expand(this, config1) ">
    			<img src="images/Image 3.jpg" alt="" /></a>
    

		</div>

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

Re: Controls Not Showing up

Sun Sep 02, 2012 10:43 am

trenikab wrote:When I click on the thumbnail it expands into a separate webpage.
That always means the same thing: the page is trying to load the Highslide JS script (like highslide-full.js), but the <script> tag is pointing to the wrong place. So, the Javascript is never loading on the page, and the link becomes just a link to the image, so it opens on a new tab, by itself.

When you say that the highslide directory is at the root level, what do you mean? Your script tag is telling the page to look for the highslide subdirectory in the same place as this index.html file. It's not looking for it at the root of your hosting account.

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

Re: Controls Not Showing up

Sun Sep 02, 2012 10:48 am

The other possibility is that you have Javascript disabled in your browser. Visit this page: http://matrix.earlyout.org. Do you get a big red warning box across the top? If so, that means you have Javascript turned off.

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 3:59 pm

I don't get the red warning box in the browser when I got to your link. I have added a screen shot of my folder structure so you could see what I was talking about when I was saying my highslide folder was under my root folder. It may be harder for me to describe.
Attachments
Screen shot 2012-09-02 at 10.55.27 AM.png
Screen shot of Folder structure
Screen shot 2012-09-02 at 10.55.27 AM.png (19.1 KiB) Viewed 9420 times

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

Re: Controls Not Showing up

Sun Sep 02, 2012 4:38 pm

Well, that should work. We'll have to see your page "live" to figure out what's wrong.

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 5:03 pm

Thank you. I am trying to get the person I am doing the site for to go ahead and purchase the hosting so I can upload the pages in order to see it live. I will let you know when it has been done. Hopefully it will be done soon.

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

Re: Controls Not Showing up

Sun Sep 02, 2012 5:25 pm

You may just have something wrong with the slideshow "group" stuff (that's something I never use, so I'm slow to spot problems in it). If you've got just one slideshow on the page, try getting rid of all of the highlighted code below:

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="dark.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({
[hilight]	slideshowGroup: 'group1',[/hilight]
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .75,
		position: 'bottom center',
		hideOnMouseOut: false
	}

});

[hilight]// gallery config object
	var config1 = {
		slideshowGroup: 'group1',
		thumbnailId: 'thumb1',
		transitions: ['expand', 'crossfade']
	
};[/hilight]
	
</script>

HTML:

<div id="highslide-gallery">

			<a href="images/mjmusicbw.png" class="highslide" onclick="return hs.expand(this[hilight], config1[/hilight] )">
				<img src="images/mjmusicbw.thumb.jpg" title="Click to Enlarge" alt=""/>
			</a>
     
		<div class="hidden-container">

			<a href="images/IMG_0082e.jpg" class="highslide" onclick="return hs.expand(this[hilight], config1[/hilight]) ">
				<img src="images/IMG_0082e.jpg" alt=""/> </a>
    
	    	<a href="images/Image 3.jpg" class="highslide" onclick="return hs.expand(this[hilight], config1[/hilight]) ">
    			<img src="images/Image 3.jpg" alt="" /></a>
    

		</div>

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 5:44 pm

I think it's getting close. I get Loading... when I click on the thumbnail. This is good since it is one of the controls in the highslide/graphics folder.

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 6:03 pm

I got the controls to show up. They are incorrect as they are all showing he previous arrow with the text on top but I think those are just changes to the css file.

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

Re: Controls Not Showing up

Sun Sep 02, 2012 8:00 pm

trenikab wrote:I got the controls to show up. They are incorrect as they are all showing he previous arrow with the text on top but I think those are just changes to the css file.
Getting better! The "text on the controls" problem is, indeed, usually a CSS problem, in which some attribute for the "li" class from your own CSS is interfering with the Highslide CSS.

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 8:13 pm

I fixed the text issue. I modified the highslide-full.js file and removed the text attributes. However, I am still having an issue with the controls. All of the buttons are showing the previous buttons. I did get the play and pause buttons to show by modifying the css and changing the '.' to '#' but it won't work for the rest of the buttons.

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

Re: Controls Not Showing up

Sun Sep 02, 2012 8:28 pm

Now you've truly entered the realm in which live examination of the page is going to be required, and probably the eagle eyes of RoadRash, as well. However, you shouldn't ever be changing anything in highslide-full.js. That's treating the symptoms rather than the cause of the problem, and is going to have unintended consequences elsewhere. I can't emphasize this strongly enough!

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 8:32 pm

I fixed all of the buttons. I only need to modify this part of the css for each of the buttons (.highslide-controls #highslide-next a:hover). All of the buttons are showing up correctly now.

trenikab
Posts: 15
Joined: Sun Sep 02, 2012 4:04 am

Re: Controls Not Showing up

Sun Sep 02, 2012 8:35 pm

I will look into other options of not having to change the .js file to find the cause of the issue.

User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Controls Not Showing up

Mon Sep 03, 2012 8:37 am

Hi,

There's no need to change anything in the js file.

There are two main issues here:
1. The highslide.css file is moved out of the highslide folder. The highslide.css file contains lots of url for graphic files ÔÇô among them the graphics for the controls. The controls will not show when the paths for the graphics are incorrect.

2. The first anchor - the visible anchor/thumbnail in your gallery - misses id="thumb1". This id is necessary for thumbnailId referenced in the configuration object (config1).

Code: Select all

<div id="highslide-gallery">
	<a [hilight]id="thumb1[/hilight]" href="images/mjmusicbw.png" class="highslide" onclick="return hs.expand(this, config1 )">
		<img src="images/mjmusicbw.thumb.jpg" title="Click to Enlarge" alt=""/>
	</a>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide Editor”