how to avoid image's source being shown

badwater · Thu Jun 04, 2015 6:14 pm

Hi,
When I move the cursor over an image, the source of the image is shown (caused by the href attribute).
How can I avoid this behavior ?
Many thanks in advance for your kind help.

MisterNeutron · Thu Jun 04, 2015 6:40 pm

That's simply the normal behavior of a browser. AFAIK, there's no way to alter that.

badwater · Fri Jun 05, 2015 6:25 am

Thanks for your reply but I thought there is another way to link the source of the large photo not using the <a> tag.

Citation from the API Reference (http://highslide.com/ref/hs.src):
"The hs.src parameter is also the best way to specify the URL when you open the expander from an input button or other HTML elements."
OK but how can I do this ?

MisterNeutron · Fri Jun 05, 2015 7:02 am

Ah, yes - I'd almost forgotten about that. Take the gallery-white example from the distribution package, for instance. The first image expander looks like this:

Code: Select all

<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

Change it to this:

Code: Select all

<a class="highslide" onclick="return hs.expand(this, {src: '../images/gallery1.jpg'})">
	<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

Be careful about the syntax, with single quotes nested within double quotes.

It still operates the same way, but the target image doesn't show up in the browser's status bar. It does eliminate the fallback, where the raw image would open if the user had Javascript disabled, for example, but I suspect no one cares about that, anyway!

Edited to fix a typo. Talk about needing to be careful about the syntax!

MisterNeutron · Fri Jun 05, 2015 8:23 am

BTW, just be aware that this might damage SEO. Google and other search bots are looking for href's. They may not execute Javascript, so your images may be invisible to them.

badwater · Fri Jun 05, 2015 6:55 pm

Thank you very much for your help MisterNeutron.
It works.

Colleen · Sun Nov 20, 2016 4:36 pm

I am somewhat familiar with Highslide, and am also trying to avoid showing the image's source in the status bar.

Unfortunately, this solution you suggested didn't work for me. The gallery-white default example (included in the highslide packagage) works perfectly for me, but when I replace the code for the first image exactly as you suggested, the thumbnail doesn't expand into the full image. Nothing happens when the thumbnail is clicked (alhough the image's source is indeed hidden, which is great). What am I doing wrong?

In my own test page containing my own images, here's an example of one of my code snippets. It's exactly what I want, except that the image's source appears in the status bar when hovering over the thumbnail image. All I want is to avoid that. If I could just figure out why the gallery-white test didn't work, I might be able to adapt things for my own use, but so far, no luck getting gallery-white or my own code to work using the example you gave. Can you help?

MY OWN ORIGINAL WEBSITE CODE SNIPPET (fwiw, uses highslide-full.js):
<a href="large.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 })"><img src="thumb.jpg"></a>
<div class="highslide-heading"></div>
<div class="highslide-caption">Some text</div>

MisterNeutron · Sun Nov 20, 2016 5:15 pm

There was a typo in my original post - a missing close-curly-brace. Try it with the corrected syntax.

I'll post back in a bit with a modified version of gallery-white....

MisterNeutron · Sun Nov 20, 2016 5:23 pm

OK, here is a modified gallery-white example. It's identical to the distributed example, but with the "hide the URL" modification in it. Pay particular attention to the nested single quotes, within double-quotes.

Wish I could upload a file, but the forum software won't let me. Just copy and paste.

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>

<!--
	1 ) Reference to the files containing the JavaScript and CSS.
	These files must be located on your server.
-->

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

<!--
	2) Optionally override the settings defined at the top
	of the highslide.js file. The parameter hs.graphicsDir is important!
-->

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

// Add the controlbar
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .75,
		position: 'bottom center',
		hideOnMouseOut: true
	}
});
</script>

</head>

<body>

<!--
	3) Put the thumbnails inside a div for styling
-->

<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 class="highslide" onclick="return hs.expand(this, {src: '../images/gallery1.jpg'})">
	<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

<!--
	5 (optional). This is how you mark up the caption. The correct class name is important.
-->

<div class="highslide-caption">
	Caption for the first image. This caption can be styled using CSS.
</div>


<!-- Repetionion of the above -->
<a class="highslide" onclick="return hs.expand(this, {src: '../images/gallery2.jpg'})">
	<img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Caption for the second image.
</div>

<a class="highslide" onclick="return hs.expand(this, {src: '../images/gallery3.jpg'})">
	<img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<div class="highslide-caption">
	Caption for the third image.
</div>

</div>
</body>
</html>

Colleen · Mon Nov 21, 2016 4:25 pm

Beutiful - works perfectly. Thank you! I can definitely use the code you provided, but am wondering if it's possible to take it one step further.

I have an old test page using highslide html, in which the only thing I liked was that only "javascript" appears in the lower left corner of the browser when hovering over a thumbnail image, regardless of whether the thumbnail appears on the main web page or in a thumbstrip. Here's a snippet for one thumbnail image in that old html test page, where the href is "javascript":

<a class="highslide" href="javascript:;" onclick="return hs.htmlExpand(this, { slideshowGroup: 1 } )"><img src="thumb.jpg" alt="Some text" title=""></a>
<div class="highslide-maincontent"><img src="large.jpg"></div>

I do NOT want to use an "html" type of highslide display for my images anymore. Now, I want to use a modified version of gallery-horizontal-strip. Using the code you provided, I can now hide the image URL for thumbs on the main page, but the URL of the web page appears when hovering over thumbs inside the thumbstrip.

Is there any way to hide a URL completely for thumbs on the main page AND inside the thumbstrip? If not, is there a way to have only "javascript" appear when hovering over any thumbnail image?

My current code snippet; can this be adapted to get the results I'm looking for?:

<a class="highslide" onclick="return hs.expand(this, {src: 'large.jpg', slideshowGroup: 1})"><img src="thumb.jpg"></a>
<div class="highslide-heading"></div>
<div class="highslide-caption">Some text</div>

MisterNeutron · Mon Nov 21, 2016 5:37 pm

I believe that would require some serious hacking of the Highslide JS Javascript - far beyond my skill level, I'm afraid.

Colleen · Tue Nov 22, 2016 1:02 pm

No problem. The solution you posted above will still work fine for me, and I'm very grateful that you provided it. Thank you!

how to avoid image's source being shown

how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown

Re: how to avoid image's source being shown