ashshira
Posts: 2
Joined: Sun Dec 27, 2009 11:04 pm

Gallery In Parent Page

I'll start with the standard disclaimer that I am not a web guru and that I can get around in JS, but I know way less than a little bit.

I am getting ready to set up a gallery for a non-profit. I really want to do something very similar to the example at http://highslide.com/examples/gallery-in-page.html. I'm close using the editor, but not completely there. What choices should I be making in the Editor to:

Have the first image open on page open.

Make it so the image does not close upon click - I want the choices to be to scroll through the images to the left or right, but not to close completely at all.

And now for the really stupid, fundamental question - how do I position the thing somewhere besides the very top of the page?

Thanks in advance for any guidence. I will be sending payment your way as soon as I can prove to myself that it is going to work the way I want it to. I know the problem is not with the product . . . it is limited skill set.

Susan S.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Gallery In Parent Page

Hi Susan,

You canÔÇÖt use the Editor to set up a complete in-page gallery.
This is the part of the code between the head tags in the in-page example gallery (http://highslide.com/examples/gallery-in-page.html) that loads the first image on page load (this can't be done in the Editor):

Code: Select all

// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
	document.getElementById('thumb1').onclick();
});
(See this FAQ: http://www.highslide.com/forum/viewtopic.php?f=4&t=1882)
And the first image needs to have corresponding id: 'thumb1' (this can't be done in the Editor):

Code: Select all

	<a id="thumb1" class='highslide' href='../images/thumbstrip11.jpg'
			onclick="return hs.expand(this, inPageOptions)">
		<img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/>
	</a>
This part of the code that prevents the images to be closed when clicking it, and open the next image instead (this can't be done in the Editor):

Code: Select all

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	if (/in-page/.test(this.wrapper.className))	return hs.next();
}
The in-page gallery is actually ÔÇ£floating over the pageÔÇØ as all other Highslide popups, but the in-page gallery is tied to the gallery-area div with the targetX/Y function (this can't be done in the Editor).
This is the HTML code for the gallery-area div in the in-page example gallery, and you can position this div wherever you want:

Code: Select all

<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>


Non-profit use doesnÔÇÖt require buying a license.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
ashshira
Posts: 2
Joined: Sun Dec 27, 2009 11:04 pm

Re: Gallery In Parent Page

Thank you for your very prompt reply. That gives me something to play with - I had been looking at the source from the sample, but I see that I missed some things. I'll play some more over the next week or so and let you know how it turns out.

Thanks again!

Susan S.

Return to “Highslide Editor”