Control overlay in 5.0

[JeffLit]

I have been using highslide for many years and just recently attempted to upgrade to 5.0 but am having difficulty getting my controls overlay to appear. In previous version I used the code below and saw the controls in the upper right but with 5.0.0 I get nothing. What am I missing?

Code: Select all

	    hs.align = 'center';
	    hs.transitions = ['expand', 'crossfade'];
	    hs.outlineType = 'rounded-white';
	    hs.fadeInOut = true;

	    // Add the controlbar
	    if (hs.addSlideshow) hs.addSlideshow({
		    interval: 5000,
		    repeat: false,
		    useControls: true,
		    fixedControls: false,
		    overlayOptions: {
			    opacity: 1,
			    position: 'top right',
			    hideOnMouseOut: false
		    }
	    });

[MisterNeutron]

If no controlbar is showing up at all, that suggests that the needed file (controlbar-white.gif), which sits in the highslide/graphics directory, is missing. Or perhaps you're using the basic highslide.js script, which doesn't include any gallery support. Always use highslide-full.js or highslide-full.min.js, and you'll avoid that kind of problem.

But without a live page to look at, I can only guess.

BTW, version 5 isn't really any sort of upgrade. The only change was to declare the MIT License. There haven't been any actual code changes since 2011.

[MisterNeutron]

I should have spotted this earlier. You have:

Code: Select all

       if (hs.addSlideshow) hs.addSlideshow({
          interval: 5000,
          repeat: false,
          useControls: true,
          fixedControls: false,
          overlayOptions: {
             opacity: 1,
             position: 'top right',
             hideOnMouseOut: false
          }
       });

Get rid of the "if" test. All you need is:

Code: Select all

hs.addSlideshow({
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		opacity: 1,
		position: 'top right',
		hideOnMouseOut: false
	}
});

I think that will take care of the problem.

[JeffLit]

Thank you. I had both problems (version of script and graphics loading). I was running highslide.min.js, not highslide-full.min.js. After that it still didn't work but that was because it was trying to load the graphics from the folder containing the highslide.css file, even though I specified a different graphicsDir. I finally RTFM on graphicsDir and now realize "This setting tells Highslide where to find the graphic outline and the cursors. All other graphic paths are defined in highslide.css..." so it was easiest to just copy the graphics to my style folder. Now I'm good. Thanks again.

[MisterNeutron]

Every time I wade back into Highslide JS, I have to stop and think about graphicsDir. I can never quite remember what it's relative to.