Second Image Heading Not Showing in Gallery

[suzanne]

Hi,

I have Highslide set up with the full.packed.js version on my WordPress blog. The files are located in a folder (within my theme) named highslide and the structure is identical to the download. I have the gallery with controls in the heading script in my header which looks like this. The only thing I'm doing differently from the download is that I've changed the graphics directory in the script shown below and enabled the dimming opacity.

Code: Select all

	<script type="text/javascript">
		hs.graphicsDir = '/images/highslide/';
		hs.align = 'center';
		hs.transitions = ['expand', 'crossfade'];
		hs.outlineType = 'rounded-white';
		hs.wrapperClassName = 'controls-in-heading';
		hs.fadeInOut = true;
		hs.dimmingOpacity = 0.75;

		// 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
			}
		});
	</script>

MY PROBLEM

I have a few images in a post I've displayed. Here's the code I'm using:

Code: Select all

<div class="highslide-gallery">
	<a href="/images/screenshots/welcome.jpg" class="highslide" onclick="return hs.expand(this)">
		<img src="/images/screenshots/welcome.jpg" width="125" height="160" /></a>
	<div class="highslide-heading">Heading for the 1st image.</div>

	<a href="/images/screenshots/welcome.jpg" class="highslide" onclick="return hs.expand(this)">
		<img src="/images/screenshots/welcome.jpg" width="125" height="160" /></a>
	<div class="highslide-heading">Heading for the 2nd image.</div>

	<a href="/images/screenshots/aboutme.jpg" class="highslide" onclick="return hs.expand(this)">
		<img src="/images/screenshots/aboutme.jpg" width="125" height="160" /></a>
	<div class="highslide-heading">Heading for the 3rd image.</div>

	<a href="/images/screenshots/welcome.jpg" class="highslide" onclick="return hs.expand(this)">
		<img src="/images/screenshots/welcome.jpg" width="125" height="160" /></a>
	<div class="highslide-heading">Heading for the 4th image.</div>
</div>

In Safari latest version the first image is displayed correctly with the heading above the image and the controls on the right. However, any image after the first one does not show the heading at all, despite the code being identical. I can paste 10 duplicates of the first image and only the first will display the header. Controls are visible on every image however.

In Firefox latest version and IE7 latest version I get the heading on the first image but no controls. Subsequent images get no heading and no controls.

I do not have any browser-specific CSS in place that could be overwriting the HS CSS. I have not altered the source JS in any way. I have not altered the source CSS in any way either. It's all stock.

The only thing different here is that this is a WordPress installation so I'm wondering of there aren't relative references to things here that don't actually work when the source files are not relative to the root of the document, but to the theme.

Any insights into this would be greatly appreciated. I paid for a business license for this script probably two years ago and there's nothing else out there that does it all. I use it for all kinds of content pop-ups too. Absolutely love it. This new heading option is perfect for what I like to do too. I hope there's a logical answer to this I'm just missing.

[suzanne]

Ooops - clarification... the situation is identical in all three browsers. Heading on the first image WITH controls, but no headings on subsequent images. The controls are on every image.

I flipped the group option on and forgot about it before I tested FF and IE.

[RoadRash]

Do you have the same problem with this page: http://highslide.com/example-gallery-co ... ading.html?
And are you using the latest version of Highslide ÔÇô version 4.011?

[suzanne]

The demo is always going to work. Big surprise. Its JS and CSS are relative to the page. I can make the demo work on my own server. When you use WordPress however, the Highslide files are NOT relative to the page. They're relative to the theme. There's also many other potential scripts at play that could reveal a bug like that (although I yanked out all my JQuery and tests were the same).

Yes it's 4.011.

[suzanne]

I also tried moving the scripts to my site root, calling them with src="/js/highslide-full.packed.js". This also *works* in that the images pop up in the nice white box. However, the glyphs for the controller and to the left of the heading are not showing either. I still have the original problem of subsequent images not showing headers too.

So there has to be something about the physical location of the script files and their relative position to the HTML or PHP file that's coming into play. If I put the scripts in a sub-folder to the HTML page it all works, but in WordPress that's not the way it works.

[suzanne]

Here's a working example of what I'm describing. http://scentuosity.com

For this case all paths are absolute URLs which you can see if you view the source.

http://scentuosity.com/js/highslide-full.packed.js

http://scentuosity.com/js/graphics/ ... (all images either for the controls or for the gallery)

I pasted the code straight out of the demo and only changed the paths to the images.

Another side note for Tor, it appears that overriding the graphics directory with the script in the head doesn't work with WordPress. This is why the images were disappearing in my second round of tests. I moved them into a sub-directory relative to the script and magically they appeared again. I could have edited the script itself too but I'm not one to edit source code.

[RoadRash]

The missing headings are caused by some p tags. The highslide-heading div must be placed directly after the closing a tag for the thumb.
I guess both the <p></p> tags and the <br /> tags somehow comes from copy/paste.

Your HTML code for the gallery looks like this:

Code: Select all

<div class="highslide-gallery">
<!--<br />
	4) This is how you mark up the thumbnail image with an anchor tag around it.<br />
	The anchor's href attribute defines the URL of the full-size image.<br />
--><br />
<a href="http://scentuosity.com/js/graphics/gallery1.jpg" class="highslide" onclick="return hs.expand(this)"><br />
	<img src="http://scentuosity.com/js/graphics/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /><br />
</a></p>
<p><!--<br />
	5 (optional). This is how you mark up the heading. The correct class name is important.<br />
--></p>
<div class="highslide-heading">
	Heading for the first image.
</div>
<p><!-- Repetionion of the above --><br />
<a href="http://scentuosity.com/js/graphics/gallery2.jpg" class="highslide" onclick="return hs.expand(this)"><br />
	<img src="http://scentuosity.com/js/graphics/gallery2.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a></p>
<div class="highslide-heading">
	Heading for the second image.
</div>
<p><a href="http://scentuosity.com/js/graphics/gallery3.jpg" class="highslide" onclick="return hs.expand(this)"><br />
	<img src="http://scentuosity.com/js/graphics/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a></p>
<div class="highslide-heading">
	Heading for the third image.
</div>
</div>

It should look like this:

Code: Select all

<div class="highslide-gallery">
<!--
	4) This is how you mark up the thumbnail image with an anchor tag around it.
	The anchor's href attribute defines the URL of the full-size image.
-->
<a href="http://scentuosity.com/js/graphics/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="test/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a>
<div class="highslide-heading">
	Heading for the first image.
</div>

<a href="http://scentuosity.com/js/graphics/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="test/gallery2.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a>

<div class="highslide-heading">
	Heading for the second image.
</div>

<a href="http://scentuosity.com/js/graphics/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="test/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a>
<div class="highslide-heading">
	Heading for the third image.
</div>
</div>

[suzanne]

Okay there's a lead... WordPress does that automatically with line breaks... even when you're using the HTML textarea to enter the code. Let me edit the entry to avoid those and I'll see if that solves it. Thanks again for the lead.

[suzanne]

You were correct - it's the extra paragraph tags that WordPress inserts. Even when I ran all the code together, no spaces no nothing, WordPress STILL inserted paragraph tags after the DIV tags

http://scentuosity.com/?p=1

I set up that page to illustrate this. The first set of images were inserted to the post using the standard post entry in the admin screens. Then, I edited the single post template and inserted the exact same code right into the file. There you go. The second one works.

So this is a peculiar situation. WordPress kinda has to do that to ensure what you type in your post looks like it's supposed to (for basic users) but in the case of Highslide this is a royal pain. Tor is you're reading this, could you consider an update to the script that does not break in this situation? I know an old version of HS had an id on the caption and then your hyperlink referenced that ID. Not sure why you removed that but something like that would eliminate this issue for WordPress users and anyone else using a CMS that auto-formats your entries.

Thanks RoadRash for your leads. I would not have guessed that would cause a problem... well maybe after three days of beating my head

[RoadRash]

CaptionId is still around - see reference page: http://highslide.com/ref/hs.captionId
See also captionEval and captionText