Adding read more link to caption in gallery

Colleen · Fri Nov 25, 2016 5:42 pm

I apologize if this has already been asked. I did a lot of searching before posting this, but could not find an answer.

How can I add a caption with a "read more" link to gallery-controls-in-heading.html (from the Highslide package)?

OR, conversely: How can I add controls-in-heading to the large image in the Roadrash example shown at http://www.roadrash.no/hs-support/examp ... -link.html, without disturbing the appearance of the read-more link?

I've tried endless ways of combining the two examples, but am not familiar enough with Highslide to get the results I want. I can get the "read more" link to appear inside a caption area in gallery-controls-in-heading, but the "read more" popup keeps picking up the controls from gallery-controls-in-heading as well as "Move Close" (which then doesn't work).

Ultimately, I will have multiple galleries on the same page, each with its own thumbstrip. I have figured out how to do that from other Highslide gallery examples, but just can't seem to get the "read more" link to appear in a caption the way it does in the Roadrash example.

MisterNeutron · Fri Nov 25, 2016 7:09 pm

I've got too many other things on my plate at the moment, but here's an old mockup I did that should provide you with some essential clues. In short, look at the use of a slideshowgroup and some inline CSS (in the <head> section) to keep the slideshow controlbar away from the other popup. In your case, it would be a matter of putting that other popup in the caption, rather than elsewhere on the page.

http://misterneutron.com/HStwoCBs/

Colleen · Sat Nov 26, 2016 1:55 pm

Looking at your code, I immediately spotted the answer to my problem. It was in (1) adding the CSS and the hs.registerOverlay with a different slideshowGroup (slideshowGroup: 'ytonly'), (2) adding wrapperClassName: 'nocb no-footer', slideshowGroup: 'ytonly') to my hs.htmlExpand for the html "read more" popup, and (3) adding the "closebutton" div.

I have image numbering appearing in the heading for my main gallery images, so I added some styling to stop the numbering from appearing in the html popup ( .nocb .highslide-number {display: none;} ). Now, my test page is working perfectly. Thank you, thank you, thank you!

MisterNeutron · Sat Nov 26, 2016 3:09 pm

Glad to hear it! I was hoping that my old example page would give you the clues to the puzzle, since it's stripped-down enough to make sorting out the code possible.

Colleen · Sun Nov 27, 2016 4:48 pm

Your example was a tremendous help. I'd been working on this problem for days without finding a solution, but your example solved my problem in about three minutes. And now that I've buttered you up (LOL), can you stand one more question? I hope this will be an easy one.

PROBLEM: How to make the html "read more" popup anchor to a specific section on an external page?

Here's the original code I used inside the caption:
<a href="readmore.html" onclick="return hs.htmlExpand(this, {objectType: 'ajax', width: 560, allowSizeReduction: false, preserveContent: false, wrapperClassName: 'nocb no-footer', slideshowGroup: 'ytonly' } )"> Read more</a>

The entire external page (readmore.html) contains:
<a name="foo1"></a>
<BR>1ST ANCHOR SECTION
<BR>Anything I can do in Highslide, you can do better!

<a name="foo2"></a>
<BR><BR>2ND ANCHOR SECTION
<BR>My housekeeping style is best described as "There appears to have been a struggle..."

To anchor to just the "foo2" section of readmore.html, I changed <a href="readmore.html"...> to <a href="readmore.html#foo2"...>, but the popup still shows both foo1 and foo2 when I click my "read more" link. How do I fix this issue?

p.s. I think "a name" has been deprecated, but even trying <h1 id="foo2"></h1> didn't work, although it does on other pages of my site.

MisterNeutron · Sun Nov 27, 2016 6:29 pm

I've never toyed with the ajax functionality at all. But looking at the barebones ajax example, it appears that on your readmore.html page you need to put your ID into a <div>, not into an <a> anchor. Look at the includes/ajax.htm page called by the example. The anchors go on the calling page, not on the called page.

There's also some implication in the tutorial that your ajax page needs to have a <body> tag.

Colleen · Mon Nov 28, 2016 1:35 pm

I'm an idiot. The ajax.html example was right there in my Highslide package and I forgot about it completely. So now everything works great. All I had to do was replace the "a name" tag on the called page with <div id="foo2">...</div> and voila! Success!

FWIW, I used ajax for the objectType only because I didn't need to have special styling inside the popup html page. From http://highslide.com/ref/hs.objectType:

"Note that when using AJAX, the inserted content takes the styles of the parent page."

"On the contrary to AJAX, iframe popups take the styles defined in the included page itself."

So I'm a happy camper now. Thanks again VERY much for saving this damsel in distress.

Colleen · Wed Dec 07, 2016 4:36 pm

I'm still experimenting with this "read more" html popup issue and have a problem I can't seem to fix.

In this example (see code below), each large image has a "Read more" link in the caption. But clicking those links (1) causes the thumbstrip to "jump" slightly, and (2) causes additional active "Read more" links to appear up in the thumbstrip area.

I also noticed while opening and closing the page during testing that it doesn't matter which "read more" link is clicked on first, second or third. The first click will show 3 "Read more" links in the thumbstrip area, the second "read more" click for either of the other two images will show 2 "Read more" links in the thumbstrip, and the third "read more" click will show 1 "Read more" link in the thumbstrip area.

I will be very grateful for any help in figuring out what is causing the thumbstrip to "jump" when the "read more" links in the captions are clicked, and what's causing the extra links to appear in the thumbstrip?

Here's my code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS</title>

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
hs.numberPosition = 'heading';
hs.dimmingOpacity = 0.25;

// Add the controlbar
if (hs.addSlideshow)
 hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false
	},
		thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}
});

// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
	thumbnailId: 'thumb1'
}
</script>

<style>
.nocb .highslide-controls {
	display: none;
}
.nocb .highslide-number {
	display: none;
}
.nocb .highslide-html-content {
	display: none;
	width: 600px;
	padding: 0 15px 25px 15px;
}
</style>

</head>

<body>

<a id="thumb1" class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', thumbnailId: 'thumb1', slideshowGroup: 1})">
	<img src="flower01_thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="100" width="100" /></a>
<div class="highslide-caption">
    This caption can be styled using CSS. 
    <a href="#" onclick="return hs.htmlExpand(this, {wrapperClassName: 'nocb no-footer'})"> Read More</a>
<div class="highslide-maincontent">
	<h3>Flower 1</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
</div><!-- end highslide-maincontent -->
</div><!-- end highslide-caption -->


<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
	<img src="flower02_thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="100" width="100" /></a>
<div class="highslide-caption">
    This caption can be styled using CSS. 
    <a href="#" onclick="return hs.htmlExpand(this, {wrapperClassName: 'nocb no-footer'})"> Read More</a>
<div class="highslide-maincontent">
	<h3>Flower 2</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
</div><!-- end highslide-maincontent -->
</div><!-- end highslide-caption -->


<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
	<img src="flower03_thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" height="100" width="100" /></a>
<div class="highslide-caption">
    This caption can be styled using CSS. 
    <a href="#" onclick="return hs.htmlExpand(this, {wrapperClassName: 'nocb no-footer'})"> Read More</a>
<div class="highslide-maincontent">
	<h3>Flower 3</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
</div><!-- end highslide-maincontent -->
</div><!-- end highslide-caption -->

</body>
</html>

MisterNeutron · Wed Dec 07, 2016 7:01 pm

I'm not seeing any "jumping" of the thumbstrip in my test case. I'd have to see a link to your actual page.

To get rid of the extraneous "Read More" links in the thumbstrip, this seems to work:

First, uncomment the slideshow group line in the overlay definition:

Code: Select all

hs.addSlideshow({
     slideshowGroup: 'group1',
     interval: 5000,
     repeat: false,
     useControls: true,
(etc.)

Then explicitly attach each image to group1, like:

Code: Select all

<a id="thumb1" class="highslide" onclick="return hs.expand(this, {src: '../images/gallery1.jpg', thumbnailId: 'thumb1', slideshowGroup: 'group1'})">

There's an inherent problem in using these kinds of popups, however. If your visitor is viewing image1 and opens the "read more" popup, but then clicks the "next" arrow, or clicks one of the other images in the thumbstrip, that first "read more" popup will remain open, behind the second expanded image.

I suspect that curing that problem would require some fairly involved scripting to detect and close only certain types of expanders. Way over my head.

MisterNeutron · Wed Dec 07, 2016 9:03 pm

This was all beginning to feel very familiar, and I finally remembered. RoadRash and I wrestled with this problem - the "read more" popup remaining open when the visitor went to the next image in the gallery - many years ago, and never succeeded in beating it. In short, the Highslide JS script just doesn't provide a good way to "target" specific expanders when there's more than one open at a time.

In my own application, I finally surrendered, and just used a hidden <div> for extra material - see the "Photo Info" link in the captions on this: http://jgromit.com/matrix/sidepanel/

Colleen · Thu Dec 08, 2016 4:57 pm

Thank you -- You solved the problem re: extra "Read more" links appearing in the thumbstrip.

I see what you mean about the html popups not closing when another image is opened. I hadn't even noticed that before. I had little hope of fixing that problem since you and Roadrash couldn't do it with all your expertise (much greater than mine!). But fighting to the bitter end and enjoying a challenge, I thought maybe forcing the html popup to close onmouseout might work, so among other things I experimented with all of the following (with high hopes for the 3rd one since it referred to closing HTML popups onmouseout), but just couldn't figure out how to do it so I've given up on that.

Roadrash: An onmouseover tooltip
http://www.roadrash.no/hs-support/tooltip.html

http://forum.highcharts.com/highslide-j ... tml-t3443/

hs.Expander.prototype.onMouseOut
Fires when the mouse cursor leaves the image or HMTL popup.
http://highslide.com/ref/hs.Expander.pr ... onMouseOut

Re: the "jumping" of the thumbstrip, I still haven't solved that issue, but it's a moot point now. As you did, I'm also surrendering, and will probably end up doing something similar to what you did at http://jgromit.com/matrix/sidepanel/

Thanks again so very much for all your help and the prompt responses; it was very much appreciated!

Adding read more link to caption in gallery

Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery

Re: Adding read more link to caption in gallery