Highslide and Xara

xedox · Fri Apr 15, 2011 9: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

RoadRash · Fri Apr 15, 2011 10:15 am

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.

xedox · Fri Apr 15, 2011 10:38 am

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

RoadRash · Fri Apr 15, 2011 1: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

xedox · Fri Apr 15, 2011 6: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

RoadRash · Fri Apr 15, 2011 8: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.

xedox · Fri Apr 15, 2011 9: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 · Fri Apr 15, 2011 9: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>

RoadRash · Fri Apr 15, 2011 11:34 pm

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.

xedox · Sat Apr 16, 2011 7: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

RoadRash · Sat Apr 16, 2011 11:29 am

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,
          [hilight]position: 'top right',[/hilight]
          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.

xedox · Sat Apr 16, 2011 11:45 am

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...

RoadRash · Sat Apr 16, 2011 12: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, { [hilight]headingText: ''[/hilight] } )"

Adding some text should give you a visible heading:

Code: Select all

onclick="return hs.expand(this, { [hilight]headingText: 'Text in the heading' [/hilight]} )"

xedox · Sat Apr 16, 2011 2: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

RoadRash · Sat Apr 16, 2011 2: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';

Highslide and Xara

Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara

Re: Highslide and Xara