dimplesshop
Posts: 2
Joined: Sun Mar 02, 2014 7:16 pm

adding "x" out option and arrows

Hi,

im using the Highslide.js with yahoo stores. I have been using it for 3 years and just this week realized I could add an "x" in the top and direction arrows. However, I have no idea how to do it.

The following is my current code In my head tags. what do I add and where to add this functionality:

Code: Select all

<!-- Highslide js Script begins -->
<!--
 1 ) Reference to the files containing the JavaScript and CSS.
 These files must be located on your server.
-->
 
<script type="text/javascript" src="http://www.dimplesshop.com/lib/yhst-43210482468533/highslide.js%22%3E%3C/script>
<link rel="stylesheet" type="text/css" href="http://www.dimplesshop.com/lib/yhst-43210482468533/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.dimplesshop.com/lib/yhst-43210482468533/highslide-ie6.css" />
<![endif]-->
 
 
 
<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript"> 
hs.graphicsDir = 'http://site.dimplesshop.com/highslide1/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
 
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
 //slideshowGroup: 'group1',
 interval: 5000,
 repeat: false,
 useControls: true,
 fixedControls: 'fit',
 overlayOptions: {
  opacity: .6,
  position: 'bottom center',
  hideOnMouseOut: true
 }
});


</script>
 
<link href="http://www.dimplesshop.com/lib/yhst-43210482468533//highslide.css" rel="stylesheet" type="text/css" />
 
 
<!-- Highslide js Script ends --> 
Thanks in advance,
Jeremy

http://www.DimplesShop.com
seba
Posts: 4415
Joined: Tue Jul 31, 2012 2:26 pm

Re: adding "x" out option and arrows

Sebastian Bochan
Highcharts Developer
dimplesshop
Posts: 2
Joined: Sun Mar 02, 2014 7:16 pm

Re: adding "x" out option and arrows

Sebastian,

I tried adding that code, but it didn't work...not sure I added it correctly or in the correct place.

please help.
Jeremy
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: adding "x" out option and arrows

Not quite sure I understand what you're after. On your site, I'm not seeing any actual galleries, i.e., groups of images linked by "next" and "previous" controls. I'm just seeing single image expanders.

If you want to put an "X" in the corner to close the expander, see if the code on this demo page helps:

(demo page removed)
Last edited by MisterNeutron on Sun Aug 23, 2015 12:18 pm, edited 1 time in total.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: adding "x" out option and arrows

One huge problem is that the version of Highslide JS that page is using is obsolete and is only a subset of the full script. You need to be loading Highslide version 4.1.13, and using the full script, highslide-full.min.js.

What you've got is version 4.1.8, and only the basic script, without any of the code that is necessary to use many of the features. That would certainly explain why your attempts to customize things aren't working.

Return to “Highslide JS Usage”