Our support has moved

Instead of continuing the battle against spammers, we decided to close the forum for new users and topics. But don't worry, there are still plenty of ways to reach us. Most notably, we will move our attention to Stack Overflow, where we will monitor questions under the tags [highcharts], [highstock] and [highslide].

For other ways of getting in touch with us, see Highcharts Support or Highslide Support.

Torstein Hønsi, CTO, 2013-01-29

Highslide and Xara

Help for using the Highslide Editor, the visual way of setting up Highslide.
Post a reply

Highslide and Xara

Postby xedox » Fri Apr 15, 2011 11:21 am

Hi,

I did a small galery using HS Editor, but I don't know how to use it with Xara WD - is this
possible to do at all?

Thanks,
xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Fri Apr 15, 2011 12:15 pm

Hi xedox,

I’m not familiar with Xara WD - I don't think I've heard of it.

There are some instructions in the Publish screen in the Highslide Editor – Step 1, 2 and 3. Step 1 tells you to download the zip archive and unzip it to the root of your web folder. I will guess this is possible in Xara. Step 2 and 3 tells you to copy and paste some code in the head and body section of your page. This means you need to have access to edit the code of your page. So you need to find out if you have access to edit the code of your page in Xara.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Fri Apr 15, 2011 12:38 pm

thank you - I tried to follow the instruction, but so far I can't manage it to work in Xara Web Designer...
In fact, highslide is integrated in Xara, with possibility to change some basic option, but I can't
(or better said, don't know), how to use scripts I got through HS Editor..
xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Fri Apr 15, 2011 3:12 pm

I think you should look for information on this subject at the Xara web site and support forum instead. I found this at the Xara web site: http://support.xara.com/index.php?_m=kn ... 901#tabs-4
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Fri Apr 15, 2011 8:30 pm

Yes, I tried, but so far I can't find the answer... In fact, the only thing I want to do is to move controls out of image (to header),
but I can't find anything relevant in API References. I tried to use script for example "Controls in the heading" but doesn't
work. I know how to apply script in Xara (through placeholders), but here I can't find apropriate script and I am not skilled
enough to create my own...
In any case, thank you for your time...
xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Fri Apr 15, 2011 10:10 pm

I might be able to help you with what code you need to add, but first I need to know what you have in your existing gallery.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Fri Apr 15, 2011 11:04 pm

I just took three image to test. I did a script
Code: Select all
<script type="text/javascript">
hs.captionOverlay.position = "above";
hs.captionOverlay.width = "30px";
hs.align = 'center';
hs.addSlideshow({
   // slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   fixedControls: true,
   overlayOptions: {
      opacity: 1,
      position: 'top center',
      hideOnMouseOut: true
   }
});
</script>

and put it in head section through placeholder. All works fine, except controls are not visible (but they are present and react on mouse click).
I'd very much appreciate any suggestion, specially if would be possible to place controls above top image margin...
xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby xedox » Fri Apr 15, 2011 11:10 pm

just in case, here is whole code of page preview
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1250"/>
<meta name="Generator" content="Xara HTML filter v.4.0.3.645"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/highslide.css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="index_htm_files/highslide-ie6.css" /><![endif]-->
<script type="text/javascript" src="index_htm_files/highslide.js"></script>

<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
<script type="text/javascript">
hs.addSlideshow({
   // slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   fixedControls: true,
   overlayOptions: {
      opacity: 1,
      position: 'top center',
      hideOnMouseOut: true
   }
});
</script>
<script type="text/javascript">
                hs.align = 'center';
   hs.captionOverlay.position = "above";
   hs.captionOverlay.width = "30px";
</script>
</head>
<body style="background-color: #404F5F">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1000px; top:0px; left:50%; margin-left: -380px;">
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>

<img class="xr_ap" src="index_htm_files/0.png" alt="" title="" style="left: -2px; top: -2px; width: 774px; height: 1014px;"/>
<!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 760px; height: 1000px; clip: rect(0px 760px 1000px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 760px; height: 1000px; clip: rect(0px, 760px, 1000px, 0px);"><!--<![endif]-->
<a href="index_htm_files/5.jpg" class="highslide" onmouseover="hs.headingText=''" onclick="return hs.expand(this, { headingText: '' } )">
  <img class="xr_ap" src="index_htm_files/8.jpg" alt="ZLATNE JABUKE" title="" onmousemove="xr_mo(this,0,event)" style="left: 218px; top: 65px; width: 131px; height: 91px;"/>
</a>
<a href="index_htm_files/6.jpg" class="highslide" onmouseover="hs.headingText=''" onclick="return hs.expand(this, { headingText: '' } )">
  <img class="xr_ap" src="index_htm_files/9.jpg" alt="IVANČICA" title="" onmousemove="xr_mo(this,0,event)" style="left: 52px; top: 65px; width: 126px; height: 94px;"/>
</a>
<a href="index_htm_files/7.jpg" class="highslide" onmouseover="hs.headingText=''" onclick="return hs.expand(this, { headingText: '' } )">

  <img class="xr_ap" src="index_htm_files/10.jpg" alt="SVETI JURAJ NA BREGU" title="" onmousemove="xr_mo(this,0,event)" style="left: 392px; top: 65px; width: 132px; height: 91px;"/>
</a>
<div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
<a href="" onclick="return(false);">
</a>
</div>
<div id="xr_xd0"></div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->

<script type="text/javascript">xr_aeh()</script>
</body>
</html>
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Sat Apr 16, 2011 1:34 am

You can use this line to place the controls above the image:
Code: Select all
hs.wrapperClassName = 'controls-in-heading';

I think the controls still will be invisible – probably because the paths for the graphic files in the highslide.css file are wrong. But I can’t say this for sure without seeing your live page.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Sat Apr 16, 2011 9:56 am

Hi Hilde,

it was very helpfull - it all works now with this script. I have controls above in heading, what I'd like to know is how to change possition of
controls in heading (to be on on right edge).
here is working script:
Code: Select all
<script type="text/javascript">
hs.wrapperClassName = 'controls-in-heading';
hs.addSlideshow({
   // slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   fixedControls: true,
   overlayOptions: {
      opacity: 1,
      position: 'above',
      hideOnMouseOut: false
   }
});
</script>
<script type="text/javascript">
        hs.align = 'center';
   hs.captionOverlay.position = "below";
   hs.captionOverlay.width = "30px";
</script>
<style type="text/css">
.close-simple-white {
width: 0px;
height: 0px;
cursor: pointer;
}
</style>

xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Sat Apr 16, 2011 1:29 pm

See highlighted code:
Code: Select all
<script type="text/javascript">
    hs.wrapperClassName = 'controls-in-heading';
    hs.addSlideshow({
       // slideshowGroup: 'group1',
       interval: 5000,
       repeat: true,
       useControls: true,
       fixedControls: true,
       overlayOptions: {
          opacity: 1,
          position: 'top right',
          hideOnMouseOut: false
       }
    });
    </script>
    <script type="text/javascript">
            hs.align = 'center';
       hs.captionOverlay.position = "below";
       hs.captionOverlay.width = "30px";
    </script>
    <style type="text/css">
    .close-simple-white {
    width: 0px;
    height: 0px;
    cursor: pointer;
    }
    </style>

I need to see your live page if this doesn’t work.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Sat Apr 16, 2011 1:45 pm

I have just wrote the message but I don't see it posted - however, thanks to example at your site (http://www.roadrash.no/hs-support/galle ... ading.html)
I solved a proble (top right is OK), now I just try to figure out how to have caption and heading overlay visible (as in you example). I try with this script
Code: Select all
<script type="text/javascript">
   hs.captionOverlay.position = "below";
   hs.captionOverlay.width = "30px";
   hs.headingOverlay.position = "above";
   hs.headingOverlay.width = "30px";
</script>

but heading is not present... Any suggestion?
I can't send you a live page as I test this on my coputer only...
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Sat Apr 16, 2011 2:42 pm

Caption area and heading area will not be visible until you add some text. I can see from one of your previous posts that you have an empty headingText in the onclick:
Code: Select all
onclick="return hs.expand(this, { headingText: '' } )"

Adding some text should give you a visible heading:
Code: Select all
onclick="return hs.expand(this, { headingText: 'Text in the heading' } )"
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top

Re: Highslide and Xara

Postby xedox » Sat Apr 16, 2011 4:17 pm

I thought that something like this should be a problem - now I have to see how to achieve this in Xara, where I can do changes only through placeholders...
I will work around, maybe there is some way to do this.
Additional question: is it anyhow possible to have caption overlay on both side (like "above" and "below")? Or some othe way to have around 30px
margin above and below image?

xedox
xedox
 
Posts: 10
Joined: Fri Apr 15, 2011 11:08 am
Top

Re: Highslide and Xara

Postby RoadRash » Sat Apr 16, 2011 4:28 pm

You can use the text in the alt attributes for the img tags as text in the heading by adding this:
Code: Select all
hs.headingEval = 'this.thumb.alt';

You can add a heading without text (which will create space above the image) by adding this:
Code: Select all
hs.headingText = '&nbsp;';

You can add the same heading text to all images by adding this (replace the text):
Code: Select all
hs.headingText = 'Same text to all images';
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8174
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway
Top
Next
Post a reply

Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 2 guests

Powered by phpBB® Forum Software © phpBB Group