Click to enlarge not working

[mezentia]

I'm a bit new to all this HTML stuff.

I have some web pages I'm working on where the text has a 7.5% left-hand margin. To allow images on the page to be captioned, images are placed in tables, 1 column by two rows, with the image in the top cell and a caption in the bottom cell. The table is aligned left and has also has a 7.5% margin set to align the left-hand side of the table with the text. The table is set so that the text wraps around the table. Left at that, there is a large white gap between the right-hand side of the table and the wrapped text. To overcome this, the table's right margin is set negative to eliminate this large gap as the text's margin seems to be enforced from the right hand side of the table, and not the page! This all works.

I want now to use highslide to show a larger version of the image in the table, so the highslide code has been placed into the table as shown in the code snippet:

Code: Select all

<p Class="DDNarrative>
blah de blah ...
</p>

<table class="DDtableimage1">
	<tr>
		<td>
		<div>
			<!--
			    3) 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="memories_files/image001-web.jpg" class="highslide" onclick="return hs.expand(this)">
				<img src="memories_files/image001-thumb.jpg" alt="Highslide JS"
					title="Click to enlarge" height="187" width="250" />
			</a>
			
			<!--
			    4 (optional). This is how you mark up the caption. The caption must be directly
			    after the anchor above.
			-->
		
			<div class="highslide-caption">
			    Highslide caption.
			</div>
	
			</div>
		</td>
	</tr>
	<tr>
		<td>Image caption below the image in the table</td>
	</tr>
</table>

<p Class="DDNarrative>
blah de blah ...
</p>

The cursor only turns to a magnifying glass if it is alongside the gap between two paragraphs. If the browser window size is adjusted so there is no paragraph break alongside the image, it's not possible to expand the image

How do I make the click to enlarge stuff work irrespective of where the cursor is over the image?

[MisterNeutron]

The snippet you've posted should work, though using HTML tables for layout has been frowned upon for about 20 years, now, and shouldn't be needed just to supply captions below images. We'll need a link to a live page if we're going to have any hope of debugging it.

[mezentia]

using HTML tables for layout has been frowned upon for about 20 years

But I'd looked at various options for captioning images, and it's still being suggested ...

However, I tried this :

Code: Select all

<figure style="float: left;
	  width: 225px;
	  text-align: center;
	  font-style: italic;
	  font-size: smaller;
	  text-indent: 0;
	  background: #CCCCCC;
	  margin-left: 7.5%;
	  margin-right: -7%">
  
 <div>
	<!--
	    3) 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="memories_files/image002-web.jpg" class="highslide" onclick="return hs.expand(this)">
		<img src="memories_files/image002-thumb.jpg" alt="Highslide JS"
			title="Click to enlarge" height="275" width="200" />
	</a>
	
	<!--
	    4 (optional). This is how you mark up the caption. The caption must be directly
	    after the anchor above.
	-->

	<div class="highslide-caption">
	    Highslide caption.
	</div>

	</div>
	
	<figcaption style="caption-side:bottom">
 	Sylvia
 	</figcaption>
</figure>

This gave me the same results in Firefox and Edge - I can only display the larger image when the cursor is alongside a gap between paragraphs

The site I'm working on is not on a public server. It's a family history site and will only be distributed within the family as I've been requested not to make it public, and in any case, I've not been able to contact all living people referenced to get their permission. The bulk of the site has been automatically generated using Family Historian software, but I'm now at the stage of adding a large amount of contextual stuff. I'm using the css generated by Family Historian to give me the look and feel, and I've created my own CSS to define specific aspects of the site's appearance for my own material. Temporarily commenting out the other css files doesn't change the behaviour when trying to enlarge an image.

[MisterNeutron]

Well, I'm certainly willing to help, but without a link to a live page, there's not much I can do. Put together a test page without any personal stuff - just use stock images with placeholder captions. Sorry, but this guy isn't on duty tonight:

[MisterNeutron]

BTW, for what it's worth, I plugged your code snippet into a basic HTML page that includes the pieces necessary to make Highslide JS work (calls to the script and the standard CSS), plus my own images, and it works fine. So whatever problems you're having are being caused by something else on the page.

[mezentia]

I've been experimenting.

The problem was caused by a position=relative qualifier on the text surrounding the image, and a negative margin on the image to remove the white space that appeared between the image and text. By removing the relative part of the text style, and setting a positive RH margin on the image to add space between the image and surrounding text, the enlarge icon now appears when the cursor is placed anywhere on the image.

Thanks for your help (and patience!).

[mezentia]

But now, how do I put a caption under the thumbnail image ? And where can I get a red close button?

[MisterNeutron]

But now, how do I put a caption under the thumbnail image ?

This is sort of HTML 101. Here's a demo page that shows how to do a thumbnail grid three different ways, each with a caption under the thumbnail. The inline-block method is by far the best, since it responds to the viewport width (try narrowing the browser window and watch what happens), while keeping the last row centered.

https://misterneutron.com/thumbsDemoCaps/

And where can I get a red close button?

Another demo using a close button (the default black one).

https://misterneutron.com/closex/

For red, you need another PNG - attached is a quick stab at it. Change the background image in the Highslide CSS on the .closebutton class to point to it.

[MisterNeutron]

A somewhat cleaner red X.