Multiple galleries on the same page

[mezentia]

I’ve been going through some of the forum postings, so I appreciate that Highslide might, to some, seem to be antiquated by now, but for me it has the benefits that it’s free and it does pretty much what I need. The website I’m developing is not commercial, is not designed, nor indeed appropriate, for viewing on phones or probably even tablets. I don’t know much about HTML, and nothing about Java (although I do have a book about it ), so I need a little bit of help in getting Highslide to work as I want it to.

I have pages where a single image gets enlarged and has a caption displayed either to the right or below with the larger image that works ok. I have pages where I have a combination of single images and galleries with a thumbstrip below that work fine together. I now need a more complex page where I can have the user:

• click on a thumbnail to see a larger version of an image,
• where I can place one or more galleries to display a sequence of photographs that each require only a single line caption,
• where I can display a gallery when the user clicks on a text link, with a longer caption appropraite to each image displayed either alongside or below

I’ve used separate test pages to get each of the above elements to work on their own, based on:

• Barebones sample : Drop shadow and no border, semi transparent close button
• Roadrash’s samples: In-page gallery with thumbstrip below caption
• Roadrash’s samples: Open mini gallery from text link

However, I’ve hit problems when combining these, and I've have noticed some things I don’t understand.

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';
//]]>

What significance is the:

Code: Select all

 //<![CDATA[ ?   …   //]]>

I thought the initial // meant that the line was commented out?

When setting up a slideshow, what is the significance of this:

Code: Select all

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',

Again, I thought that // means comment. In the definition of the variable inpageoptions that occurs later in the page

Code: Select all

//slideshowGroup: 'group1',

occurs again. Then, the following appears in another sample:

Code: Select all

// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',

Being a bear of very little brain, I’m now totally confused as to what each of these variants is actually doing. Do these all imply that any effects apply to all slideshows on the page?

Then there is this in one example:

Code: Select all

<!--
	3) Modify some of the styles
-->
<style type="text/css">
	.highslide-image {
		border: 1px solid black;
	}
	.highslide-controls {
		width: 90px !important;
	}
	.highslide-controls .highslide-close {
		display: none;
	}
	.highslide-caption {
		padding: .5em 0;
	}
</style>

I’m assuming that these style modifications affect all the galleries on the page, so how do I restrict the modifications to just the gallery or galleries they should affect, and not other galleries on the same page?

Using all three gallery types on one page, the effects I’m getting are that the in page gallery and thumbstrip works ok, but the text linked gallery doesn’t display the controls. However, the left/right arrows do allow navigation through the gallery. When I do get the text-linked gallery to work, the controls appear over two rows, the close control doesn’t appear, and the thumbstrips on the other galleries have disappeared .

Any help will be greatly appreciated.

[MisterNeutron]

I've already given you a complete, working example of a page with multiple galleries on a page, with some different options applied to each: https://forum.highcharts.com/highslide- ... ys-t40308/

You never even responded to that post. And now you want more help? Honestly, I'm not prepared to do the work to put together examples if you're just going to disappear for a month at a time.

A couple of quick notes, however. You can pretty much ignore the CDATA stuff. The CDATA comment prevents an XML parser from trying to interpret those Javascript variables (and it's Javascript, not Java) as actual HTML markup. But this applied only to XHTML documents (all of the old Highslide examples are XHTML, which is now thoroughly dead). If you're sticking to HTML5, you don't need the CDATA stuff at all. That example <script> tag could be written simply as:

Code: Select all

<script>
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right'
});
hs.graphicsDir = '../highslide/graphics/';
hs.wrapperClassName = 'borderless';
</script>

No need for the type="text/javascript" attribute, either - in HTML5, that's the default.

Now, the slideshowGroup line that's commented out. That means that the hs.addSlideshow will be applied to all groups. If it were not commented out, it would apply to whatever groups are specified, and to no others. Again, look at the example I posted last month.

There's no need to specify how many lines to allow for a caption - the script will make that <div> as large as it needs to be to show whatever text you're feeding it. If you want to put the caption in a different position for just one gallery, you can override the position inline. See the second block of sample code here: http://highslide.com/ref/hs.captionOverlay

Targeting the CSS differently for different galleries would be very tricky. I'd have to tinker with that a bit, since a lot of the classes are created "on the fly" by the script. Stick to using slideshowGroup to control which attributes are applied to which galleries before you start wading into the CSS. And yes, of course, CSS changes made in the <head> of the page apply to the entire page.

[MisterNeutron]

I haven't been into this stuff much in a while. Using different CSS for different galleries is easy. See http://highslide.com/ref/hs.wrapperClassName

ETA: A working example: https://misterneutron.com/HSmixed2/

[mezentia]

Dear Mr Neutron

Thank you for taking the time to respond to my questions, I do appreciate your help.

I must apologise for not acknowledging your reply to a previous post of mine. All I can say is that in my acute embarrassment at your obvious displeasure at my posting my question in the wrong forum, quite by accident I should add, I failed to read your reply in its entirety and therefore missed your reference to the page you mentioned with the examples of multiple galleries on a single page. This omission has now been rectified.

As regards my disappearing for months at a time, it is a truth universally acknowledged that the demands of one’s family will always take precedence over one’s attempts to document one’s family history, the reason for my attempt to create a family history website in the first place. As the time available for me to pursue this interest is, as a consequence, limited, so my visits to various forums, not only yours, tends to be sporadic and arranged so as to fit in with other demands on my time.

I will take the time to consider your replies and learn from them. Despite a career of over half a century in computing and IT, this is my first foray into the actual processes involved in creating web pages from scratch using HTML and other technologies: I used just to pay other people to do this for me . If my questions appear rather simple, please remember we all started the learning journey at the same place, but that some of us get delayed or diverted en-route and need a helping hand sometimes to get back on the right path …

Kind regards

mezentia

[mezentia]

I've had a look at using wrapperClassNames and this seems to be the way to implement different gallery types on a single page. I've created one in highslide.css to contain the style attridutes specific to one of the gallery types I'm using. However, the image anchor contains a reference to the variable inPageOptions1:

Code: Select all

<a id="G1thumb1" class='highslide' href="../Family History Web 2018/RSF_files/image002-web.jpg"
			onclick="return hs.expand(this, inPageOptions1 )" title="Mill and cottages.">
		<img src="../Family History Web 2018/RSF_files/image002-thumb.jpg" alt=''/></a>

that comprises:

Code: Select all

// Options for the in-page items
	var inPageOptions1 = {
		slideshowGroup: 'Gallery1',
		outlineType: null,
		allowSizeReduction: true,
		wrapperClassName: 'in-page controls-in-heading zoomin',
		useBox: true,
		width: 600,
		height: 450,
		targetX: 'gallery-area1 10px',
		targetY: 'gallery-area1 10px',
		captionEval: 'this.a.title',	
	};

1. Can I put my own wrapperclass definitions in another css file to avoid having to modify highslide.css?
2. In the line "wrapperClassName: 'in-page controls-in-heading zoomin',", I can find the wrapper "controls-in-heading" in highslide.css, but not "in-page" or "zoomin". How do these two strings affect the wrapperclass? The description of wrapperClassName in the reference doesn't seem to cover this method of use.
3. I'm assuming that to achieve the effect I want, I need to merge the wrapper "controls-in-heading" with the css overrides that appear in the head of my page, and change the "controls-in-page" to my wrapperClassName. Is this simply creating my own wrapper definition, e.g. DDGalleryStyle1, and then copying the entries for "controls-in-heading", replacing that name with "DDGalleryStyle 1" like this:

Code: Select all

/*****************************************************************************/
/* Styles for the Individual wrapper class names.							 */
/* See www.highslide.com/ref/hs.wrapperClassName							 */
/* These are my custom wrappers.				 */
/*****************************************************************************/

/* hs.wrapperClassName = 'DDGallery1' */
/* wrapperClasName controls-in-heading plus mods*/

.DDGallery1 .highslide-heading {
	color: gray;
	font-weight: bold;
	height: 20px;
	overflow: hidden;
	cursor: default;
	padding: 0 0 0 22px;
	margin: 0;
	background: url(graphics/icon.gif) no-repeat 0 1px;
}
.DDGallery1 .highslide-controls {
	width: 105px;
	height: 20px;
	position: relative;
	margin: 0;
	top: -23px;
	left: 7px;
	background: none;
}
.DDGallery1 .highslide-controls ul {
	position: static;
	height: 20px;
	background: none;
}
.DDGallery1 .highslide-controls li {
	padding: 0;
}
.DDGallery1 .highslide-controls a {
	background-image: url(graphics/controlbar-white-small.gif);
	height: 20px;
	width: 20px;
}

.DDGallery1 .highslide-controls .highslide-move {
	display: none;
}

.DDGallery1 .highslide-controls .highslide-previous a {
	background-position: 0 0;
}
.DDGallery1 .highslide-controls .highslide-previous a:hover {
	background-position: 0 -20px;
}
.DDGallery1 .highslide-controls .highslide-previous a.disabled {
	background-position: 0 -40px !important;
}
.DDGallery1 .highslide-controls .highslide-play a {
	background-position: -20px 0;
}
.DDGallery1 .highslide-controls .highslide-play a:hover {
	background-position: -20px -20px;
}
.DDGallery1 .highslide-controls .highslide-play a.disabled {
	background-position: -20px -40px !important;
}
.DDGallery1 .highslide-controls .highslide-pause a {
	background-position: -40px 0;
}
.DDGallery1 .highslide-controls .highslide-pause a:hover {
	background-position: -40px -20px;
}
.DDGallery1 .highslide-controls .highslide-next a {
	background-position: -60px 0;
}
.DDGallery1 .highslide-controls .highslide-next a:hover {
	background-position: -60px -20px;
}
.DDGallery1 .highslide-controls .highslide-next a.disabled {
	background-position: -60px -40px !important;
}
.DDGallery1 .highslide-controls .highslide-full-expand a {
	background-position: -100px 0;
}
.DDGallery1 .highslide-controls .highslide-full-expand a:hover {
	background-position: -100px -20px;
}
.DDGallery1 .highslide-controls .highslide-full-expand a.disabled {
	background-position: -100px -40px !important;
}
.DDGallery1 .highslide-controls .highslide-close a {
	background-position: -120px 0;
}
.DDGallery1 .highslide-controls .highslide-close a:hover {
	background-position: -120px -20px;
}
DDGallery1 .zoomout .highslide-image {
		cursor: url(../Family History Web 2018/highslide/graphics/zoomout.cur), pointer;
		}
.DDGallery1 .zoomout .highslide-caption {
		width: auto;
		background: #343434;
		color: white;
	}
.DDGallery1 .zoomin .highslide-image {
		cursor: url(../Family History Web 2018/highslide/graphics/zoomin.cur), pointer;
	}
.DDGallery1 .highslide-image {
		border: 1px solid black;
	}
.DDGallery1 .highslide-controls {
	width: 60px !important;
    }
.DDGallery1 .highslide-controls .highslide-close {
		display: none;
	}
.DDGallery1 .highslide-controls .highslide-full-expand {
		display: none;
	}
.DDGallery1 .highslide-caption {
		padding: .5em 0;
	}

[MisterNeutron]

I must apologise for not acknowledging your reply to a previous post of mine. All I can say is that in my acute embarrassment at your obvious displeasure at my posting my question in the wrong forum....

Not me. I'm not a moderator here, and can't edit or move someone else's post. In fact, I don't know the mods here at all, but it was one of them who moved the post and scolded you. I am a mod on another forum (under a different username), and over there, I just move misplaced posts, with a simple "I moved this" annotation. It happens all the time. No harm, no foul.

I hope the examples clear up some of the mysteries. I try to keep them as clear as possible, with all of the needed code on the page itself. In real life, you'd want to bury a lot of that stuff in separate files. For example, all of the <script> tag stuff that modifies the Highslide defaults would be better in some sort of highslide-config.js file, instead of being spelled out on the HTML page itself. Much easier to maintain that way. Similarly, the stuff in <style> tags would be better planted at the end of highslide.css, instead, or if there's a lot of it, in another file, like mystuff.css. Just remember to load highslide-config.js after highslide-full.js, and to load mystuff.css after highslide.css. Defaults first, modifications next.

[MisterNeutron]

1. Can I put my own wrapperclass definitions in another css file to avoid having to modify highslide.css?

Yes, and that's what I often do. Leave the distributed defaults alone, and put the changes in separate files, loaded on the HTML page immediately after the defaults get loaded.

2. In the line "wrapperClassName: 'in-page controls-in-heading zoomin',", I can find the wrapper "controls-in-heading" in highslide.css, but not "in-page" or "zoomin". How do these two strings affect the wrapperclass? The description of wrapperClassName in the reference doesn't seem to cover this method of use.

Very difficult to explain. [edit] The wrapperClassName is normally used to provide a target for some different CSS from the default. But it can also be used simply to plant a landmark on the wrapper that can then be used to provide some non-default Javascript. It's just there to give the Javascript a name to look for. [/edit] In this case, the "in-page" is used to modify the behavior of clicking on the image. See these lines in the distributed in-page example:

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();
}

I don't know where you're seeing "zoomin" - it's not in any of the distributed examples.

3. I'm assuming that to achieve the effect I want, I need to merge the wrapper "controls-in-heading" with the css overrides that appear in the head of my page, and change the "controls-in-page" to my wrapperClassName. Is this simply creating my own wrapper definition, e.g. DDGalleryStyle1, and then copying the entries for "controls-in-heading", replacing that name with "DDGalleryStyle 1" like this:

That should work, but without a live example to tinker with, I can only guess.

[MisterNeutron]

BTW, for someone who hasn't done much hand-coding before, you're actually doing very well. This is a complicated script to work with, and trying to combine different behaviors on a single page is quite a hurdle.

Torstein has moved on to greener pastures (i.e., things that actually keep the wolf from the door), but once admitted that if he were going to continue to develop Highslide JS, he would largely "rip the guts" out of it, and do things very differently. Internally, it does some horrendous stuff, like using HTML tables for layout, and using some needlessly complicated CSS.

The distributed examples are, similarly, afflicted by deprecated code, most of it having to do with using XHTML instead of HTML. I finally spent some time editing them so that I have an updated set of examples to work from.

[mezentia]

Hello Mr Neutron

Thanks for getting back to me, I appreciate your replies and they've been very helpful for me to achieve getting three different gallery types to work on a single page. Having done that, I can now proceed with putting together the content. So, may I bid you adieu for the time being as the next part will take some time. I may pop my head above the parapets from time to time, though, for the odd question

I understand that highslide js is now rather long in the tooth, but having looked for similar lightshow and gallery stuff for websites, it's difficult to get anything else that has the same flexibility or functionality.

Kind regards

Mezentia

[MisterNeutron]

Content? Pfft. Who needs content?