Page 1 of 2

Controls Not Showing up

Posted: Sun Sep 02, 2012 4:27 am
by trenikab
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>

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 10:43 am
by EarlyOut
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 10:48 am
by EarlyOut
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 3:59 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 4:38 pm
by EarlyOut
Well, that should work. We'll have to see your page "live" to figure out what's wrong.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 5:03 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 5:25 pm
by EarlyOut
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>

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 5:44 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 6:03 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 8:00 pm
by EarlyOut
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 8:13 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 8:28 pm
by EarlyOut
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!

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 8:32 pm
by trenikab
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.

Re: Controls Not Showing up

Posted: Sun Sep 02, 2012 8:35 pm
by trenikab
I will look into other options of not having to change the .js file to find the cause of the issue.

Re: Controls Not Showing up

Posted: Mon Sep 03, 2012 8:37 am
by RoadRash
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>