Javascript solution for image link issue

[jundo12]

Is it possible that javascript could solve an issue i'm having with an image zoom transform? the issue is the images are not accepting normal href linking because they are transforms and not accepting special display options either *well, one of them is but the rest aren't, read on....

when i attempted to use display: inline-block, it worked but only on the first image in the zoom. the rest of the images ignored the html (presumably because the first image in the zoom is acting like the parent of the following images and thus not allowing them to be image links, in fact, they stopped displaying once i linked them. only the first image in the zoom would accept the display inline-block link without hiding itself).

i cant use the input buttons for it either, as they are strictly for zooming to each image. i need the images to be individual href links in their own right.

here's the code i'm trying to create image links with
http://codepen.io/ge1doot/pen/XXJNov

[jundo12]

i know this is a tough question as it delves into zoom transforms, but i'm pretty sure somebody here either has the solution or can create the solution. javascript is a remarkable thing. one guy suggested resolving a similar issue i read about, with a javascript that made all images on a html page into linkable elements, but it didn't work for my purposes because you still need to input the href html to the images and they don't accept that kind of html due to their classification.

the answer is out there.

[jscheuer1]

z-index?

[jundo12]

z-index?

howdy!

where would i put the z-index? have you looked at the code? its a zoom transform. you start off with a big image and a row of input buttons that zooms you forward to a different image.etc. it gives the effect of travelling across a great planetscape. if i try to use any html in the section where the images are,

<z-oom>

<img src="Images1c.png" alt="">
<img src="Images1.png" alt="">
<img src="Images1b.png" alt="">
<img src="Images1.png" alt="">

<img src="Images1t.png" alt="">
</z-oom>

it doesn't work without display: inline-block and then it doesn't display anything but the first image. where would i put the z-index? in the img statements? they don't seem to want to accept html statements. even if the z index was ordered (wouldn't that mess up the zoom?) there's still the issue that the following images won't accept links. only the first one.

[jundo12]

so i tried z-index in the image statements. i gave them all the same z-index so they wouldn't disappear from the zoom visual...which is pretty nifty looking. i linked up the first one, no problemo. i linked up the second one, it vanished. the rest of the zoom remained and just compensated for the loss of one image in the zoom by stitching the first image and the third image, to each other. now it could be because i didn't use the right z-index but i'm thinking its because the zoom transform is a picky bugger that doesn't want to accept dom things like links without special help and i can't figure out what that would be.

if the normal solution is to use display: block or display: inline-block and those options only work for one image in this case, there must be something in his css for the zoom that's hampering it. there's really no javascript for it. its just css transforms

[jscheuer1]

Well, I'm not looking at what your doing, yet. I may get into that if we have to. The thing with z-index is, if you're having even limited success with it, you need to keep increasing it incrementally for each successive element that you want to be able to have dominance. That or decrease the previous element or elements z-index as you progress. The z-index property in css governs which element is "on top" in situations where more than one element can be seen in the same position.

If you need more help, let me know, and I will have a closer look. And if so, please post a link to your latest effort so I can see what you're doing with it.

[jundo12]

yes i could use more help. if you review the link i posted *it's a codepen*, it shows the working model and the css/html for it. the javascript he included was just to play a text statement when the zoom had reached it's farthest point.

i don't have the code on the internet, i'm just using it on my desktop. i can copy and paste the code here if ya want?

[jundo12]

so i tried it where each image was 1 higher in z-index, than the former image. didn't work. screen went blank. all images vanished. and then tried it where each image was 1 lower in z-index, than the former image. same issue. screen went blank. all images vanished . the links are causing the issue. linking them even in display: inline-block, and even in z-index, causes them to disappear. the first image continues to be visible till i link all the other images and then the whole thing goes blank.

[jscheuer1]

OK, this is pretty strange, and there may be a better solution, but this appears to work (totally different approach - no z-index used):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
		overflow: hidden;
		touch-action: none;
		content-zooming: none;
}

body {
		position: absolute;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background: #000;
}

s-creen {
		position: absolute;
		width: 100vw;
		height: 100vh;
		max-width: 640px;
		max-height: 480px;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
}

z-oom {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		transition: transform 2s ease-in-out 0s;
		transform: scale3d(0.000729, 0.000729, 1);
}

s-creen img {
		position: absolute;
		width: 640px;
		height: 480px;
		top: 50%;
		left: 50%;
		margin-left: -320px;
		margin-top: -240px;
		cursor: pointer;
}

z-oom img:nth-child(7) {transform: scale3d(1, 1, 1);}
z-oom img:nth-child(6) {transform: scale3d(3.3333, 3.3333, 1);}
z-oom img:nth-child(5) {transform: scale3d(11.1111, 11.1111, 1);}
z-oom img:nth-child(4) {transform: scale3d(37.037, 37.037, 1);}
z-oom img:nth-child(3) {transform: scale3d(123.4567, 123.4567, 1);}
z-oom img:nth-child(2) {transform: scale3d(411.5226, 411.5226, 1);}
z-oom img:nth-child(1) {transform: scale3d(1371, 1371, 1);}

s-creen input[type="radio"] + label {
		position: absolute;
		bottom: 10px;
		width: 8%;
		height: 30px;
		cursor: pointer;
		background: #fff;
		margin: 0;
		z-index: 100;
		border-radius:5px;
		outline: none;
}

#i1 + label {left: 16%;}
#i2 + label {left: 26%;}
#i3 + label {left: 36%;}
#i4 + label {left: 46%;}
#i5 + label {left: 56%;}
#i6 + label {left: 66%;}
#i7 + label {left: 76%;}

s-creen > input {
	position:absolute;
	top:-1000px;
}

s-creen > input:checked + label {background: #f80;}

#i1:checked ~ z-oom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ z-oom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ z-oom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ z-oom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ z-oom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ z-oom {transform: scale3d(0.3, 0.3, 1);}
#i7:checked ~ z-oom {transform: scale3d(1, 1, 1);}
</style>
</head>
<body>
<s-creen>
	
		<input id="i1" data-link="http://www.google.com/" name="doot" type="radio" checked>
		<label for="i1"></label>
		<input id="i2" data-link="http://www.dynamicdrive.com/" name="doot" type="radio">
		<label for="i2"></label>
		<input id="i3" data-link="http://www.bing.com/" name="doot" type="radio">
		<label for="i3"></label>
		<input id="i4" data-link="http://jscheuer1.com/" name="doot" type="radio">
		<label for="i4"></label>
		<input id="i5" data-link="http://www.oceanconservancy.org/site/PageServer?pagename=home" name="doot" type="radio">
		<label for="i5"></label>
		<input id="i6" data-link="http://www.theirc.org/" name="doot" type="radio">
		<label for="i6"></label>
		<input id="i7" data-link="http://www.dynamicdrive.com/forums/showthread.php?81069-Javascript-solution-for-image-link-issue#post321398" name="doot" type="radio">
		<label for="i7"></label>
	
		<z-oom>
				<img src="bd1b.jpg" alt="">
				<img src="bd2b.jpg" alt="">
				<img src="bd3b.jpg" alt="">
				<img src="bd4b.jpg" alt="">
				<img src="bd5b.jpg" alt="">
				<img src="bd6b.jpg" alt="">
				<img src="bd7b.jpg" alt="">
		</z-oom>
	
</s-creen>
<script>
/*

To meet my beloved. This I dreamed of a thousand times. Each time I got nearer, but never reached her. Still, it was a beautiful dream.

*/

(function(){
	var inp = document.getElementsByTagName('input'),
	img = document.images, ln = inp.length, currid = 'i1';
	while(--ln > -1){
		inp[ln].addEventListener('click', function(){
			currid = this.id;
		}, false);
		img[ln].addEventListener('click', function(){
			window.location.href = document.getElementById(currid).getAttribute('data-link');
		}, false);
	}
})();
</script>
</body>
</html>

Any questions, just let me know.

[jundo12]

it displays the pointer as if it's a link but it doesn't click thru to anything. not even a blank page,