How to specify the position to the popups?

[shahadatakbar]

Hello,

I have used Highslide in a few of my projects. This particular page that I am working on requires the popup to be loaded in the specified location (somewhat center) of the site. The thumbnail is not in the center, that's why I'm here.
I'm currently uploading the site on my slow connection. I'll post the live link as soon as I have it.
(OS X 1.6.6, Adobe Dreamweaver, Safari)

Please, any help would be appreciated.

Thank you

[RoadRash]

Hi,

I'm not sure what you mean with "somewhat center". You can place the popups in the center by using

Code: Select all

hs.align = 'center';

Note: Requires highslide-with-gallery.js if you are using images, and requires highslide-full.js or a customized highslide js file from the Configurator with the stuff you need + Advanced Positioning enabled if you are using HTML popups.

See also hs.targetX/Y - reference page: http://highslide.com/ref/hs.targetX
Note: Requires highslide-full.js or a customized highslide js file from the Configurator with the stuff you need + Advanced Positioning enabled.

[shahadatakbar]

Thanks for your reply. I'll try your instructions.
Here's the link to the page: http://shahadatakbar.com/coj/index_new.html

[RoadRash]

What about this suggestion - it requires a wider image than the one you have now: http://screencast.com/t/0Et135zuElcV (video screenshot)

1. Use highslide-full.js instead of highslide.js.
2. Give an id to the td that holds the HTML markup for the tall thumbnail:

Code: Select all

<td [hilight]id="hs"[/hilight] width="116" align="left" valign="top" bgcolor="#45C289">
        <!--Highslide Codes-->

3. Add this to the Highslide settings/codes:

Code: Select all

hs.targetY = 'hs';
hs.targetX = 'hs';

[shahadatakbar]

O M G !!!

I love you so much, dear Hilde.
I don't like coding, probably coz I suck at it. This would've taken me at least day or two to figure out.

God bless you.

[RoadRash]

You're welcome.

[shahadatakbar]

If I wanted to have an external html (the same size as the full image) pop up instead of the jpeg what do you think I could use.
I just wanna put some text and a simple link where you see the gradient.

Thanks again for your tremendous help...

[RoadRash]

Replace this:

Code: Select all

<a class="highslide" href="images/sermon_full2.jpg"  onclick="return hs.expand(this)">
	<img src="images/jump_thumb.jpg" alt="Updates"
		title="Click to enlarge" height="504" width="155" /></a>

With this:

Code: Select all

<a class="highslide" [hilight]href="your-page.html"[/hilight]  onclick="return [hilight]hs.htmlExpand(this, {objectType: 'iframe', height: 503, width: 633})"[/hilight]>
	<img src="images/jump_thumb.jpg" alt="Updates"
		title="Click to enlarge" height="504" width="155" /></a>

You can adjust the width (and height) to fit your need.

[shahadatakbar]

Thanks a lot once again. One last questions (on this, lol), Is there any way that I could get rid of the wrapper (the border and the controls).

I tried a lot of things to make the html look like the image popup, only clickable. But no luck.

I'm really surprised to see so much support and generosity for a free product, more than most paid ones. God bless you guys...

[RoadRash]

First you should move the script tags to the head section of the page where they belong. Move this part to right below the included highslide.css file:

Code: Select all

<script type="text/javascript">
//<![CDATA[
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.graphicsDir = 'highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.targetY = 'hs1';
hs.targetX = 'hs1';
//]]>
</script>

Add this line below the hs.graphicsDir line:

Code: Select all

hs.outlineType = 'rounded-white';

You have this a bit further down in your page - you can remove it since you already have it in the other script tag and you donÔÇÖt need it twice:

Code: Select all

<script type="text/javascript">
//<![CDATA[
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});
</script>

Find this part in the head section of your page and remove it:

Code: Select all

<script type="text/javascript">
    hs.graphicsDir = '/highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>

Now all the highslide settings should be nicely placed in the head section ÔÇô looking like this:

Code: Select all

<script type="text/javascript">
//<![CDATA[
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'borderless';
hs.targetY = 'hs1';
hs.targetX = 'hs1';
//]]>
</script>

To make the HTML popups look like the image popups you first need to do some changes in the external HTML pages. You canÔÇÖt have any elements with fixed width and height, the image must be placed as background image for the body and the body must have margin and padding set to 0 - all this to avoid scroll bars in the popup.
Try this for the zoe_expnd.html page:

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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-family: Verdana;
	font-size: 12px;
	color: #FFF;
	background: black url(images/zoe_full.jpg) no-repeat;
}
.content {
	margin: 335px 15px 15px 15px;
}
</style>
</head>

<body>

<div class="content">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>

    <p>Read more...</p>
</div>

</body>
</html>

And this for the sermon_expnd.html page:

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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font-family: Verdana;
	font-size: 12px;
	color: #FFF;
	background: black url(images/sermon_full.jpg) no-repeat;
}
.content {
	margin: 290px 15px 15px 15px;
}
</style>
</head>

<body>

<div class="content">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    <p>Read more...</p>
</div>

</body>
</html>

A wrapperClassName is necessary to remove the Move/Close text, the footer and the padding from the popup.
Add this CSS to your highslide.css file:

Code: Select all

.image-like .highslide-header {
	display: none;
}
.image-like .highslide-footer {
	display: none;
}
.image-like .highslide-html-content {
	padding: 0;
}

And add the wrapperClassName to the onclicks:

Code: Select all

<a class="highslide" href="zoe_expnd.html"  [hilight]onclick="return hs.htmlExpand(this, {objectType: 'iframe', height: 503, width: 633, wrapperClassName: 'image-like'})"[/hilight]>
        <img src="images/zoe_thumb.jpg" width="155" height="503" /></a>

Code: Select all

<a class="highslide" href="sermon_expnd.html"  [hilight]onclick="return hs.htmlExpand(this, {objectType: 'iframe', height: 503, width: 633, wrapperClassName: 'image-like'})"[/hilight]>
	<img src="images/sermon_thumb2.jpg" alt="Updates"
		title="Click to enlarge" height="504" width="155" /></a>

Note the width and height for the popups ÔÇô itÔÇÖs the same as the background images but the popup will not get any scroll bars.

Now you need to tell the Mac style close button to appear on HTML popups; ÔÇô add the highlighted line to the registerOverlay code in the head section:

Code: Select all

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	[hilight]useOnHtml: true,[/hilight]
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});