PDA

View Full Version : Javascript solution for image link issue



jundo12
03-30-2017, 11:03 PM
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
03-30-2017, 11:58 PM
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. :D

jscheuer1
03-31-2017, 02:30 AM
z-index?

jundo12
03-31-2017, 02:39 AM
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
03-31-2017, 03:17 AM
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
03-31-2017, 03:56 AM
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
03-31-2017, 04:02 AM
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
03-31-2017, 04:20 AM
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
03-31-2017, 05:05 AM
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
03-31-2017, 05:21 AM
it displays the pointer as if it's a link but it doesn't click thru to anything. not even a blank page,

jundo12
03-31-2017, 05:27 AM
oh wait. it's working! yehaaa!

thank you, mr. genius. :D

jscheuer1
03-31-2017, 05:31 AM
I think perhaps you just copied the script and/or maybe just the style into your code pen without realizing there were several other changes. Maybe not. Anyways, it worked here, and I decided to make it more specific, and put up a demo:

http://john.dynamicdrive.com/demos/tidbits/zoom-h/demo.htm

Let me know if that works or not, if not, what browser and OS are you using?

jundo12
03-31-2017, 05:44 AM
it's really odd but sometimes it works and sometimes it doesnt. google chrome. windows 7
also, i had a div at the bottom, outside the zoom code, that positioned an absolute div over top of the zoom at a z-index of 9999.. it was centered and not in the way of the image zooms i needed to be clickable. now, for whatever reason, i can't seem to get the div to show up at all. any idea why it wouldn't display?

jundo12
03-31-2017, 05:49 AM
here's my version


<!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: 100%;
max-height: 100%;
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: 100%;
height: 100%;
top: 0%;
left: 0%;
margin-left: 0px;
margin-top: 0px;
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: black;
margin: 0;
z-index: 100;
border-radius:5px;
outline: none;
border-radius:6px;
border: 1px solid aqua;
}

#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><font face="arial" color="aqua">




<input id="i1" data-link="http://www.google.com/" name="doot" type="radio" checked>
<label for="i1">Food</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">Engine</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">Cabin</label>
<input id="i6" data-link="http://www.theirc.org/" name="doot" type="radio">
<label for="i6">Flight</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="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>

</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>

<div id="foo" style="position: absolute; left: 45%; top:70%; z-index: 9999; width: 20%;">
<img src="earthfemalebackblondeidle.gif" width="71%" style="z-index: 9999;"><img src="stand.png" width="100%">

</div><div id="foo" style="position: absolute; left: 30%; top:45%; z-index: 9998; width: 40%;">
<img src="stand.png" width="90%">

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

jscheuer1
03-31-2017, 05:55 AM
Perhaps my demo, which is more specific, would resolve the issue:

http://john.dynamicdrive.com/demos/tidbits/zoom-h/demo.htm

But I'm sure it's possible that if you're introducing another element or elements and overlaying it/them via z-index on top of the display of zoomed images, things could break down. To help further, I would need to see what you currently have. My demo appears to work consistently in Chrome, FF, Opera (all latest versions) and IE 11, all under Win 7. But if my demo fails in any of those occasionally (possible), please state what I must do to replicate the failure.

jscheuer1
03-31-2017, 06:03 AM
MMMM, in your post:

http://www.dynamicdrive.com/forums/showthread.php?81069-Javascript-solution-for-image-link-issue&p=321405#post321405

You've changed things quite a bit. My demo relied upon the fact that there were the same number of input buttons as images. I copied your code from that post, but without the images that go with it I'm having trouble visualizing what you're trying for. It's hard to hit a moving target.

jundo12
03-31-2017, 06:04 AM
the first two links work but the second two don't.

on the first, third, fifth and sixth images i have the need for links. i really don't need to link all the images in my zoom.

in fact i have 1 or 2 images less in my zoom than the original, primarily because i am using them at 100 percent width/height and the code he wrote has limitations based on browser memory perhaps? my zoom covers the entire browser window

jundo12
03-31-2017, 06:09 AM
hmm. i need to buy a website server i think. just everything is so expensive nowdays and last time i did that, they kept sneaking in new costs and auto charge them to my card. i can describe my images.

they are a series of images of a tunnel, like a tram or a subway. every input button that is labelled *only 4 of them are labelled* corresponds to an image with a door in the wall of the tunnel that goes to the left or to the right, and one door is at the end of the zoom. each of those 4 images that the labelled input buttons go to, needs to be linkable. so far, two of them are working links, and 2 are not. it's as if the final two images are being effected by my changes perhaps? do all your image links work in your zoom example? i mean full click thru, including the last two? if so i may have messed something up with my changes. i don't want all the input buttons. only 4. i only need the first, third, fifth and sixth images to be linkable. however, i don't know at this point, if my version of what is first , third, fifth and sixth, is actually the first, third, fifth and sixth images in the original lol been struggling with it for awhile and moving things around

jundo12
03-31-2017, 06:33 AM
the zindexed divs, outside the code are showing now. i'm going to remove them to see if they are making the last two images unclickable. can't imagine why but ya never know.


nope didn't work

jundo12
03-31-2017, 07:41 AM
i copied the last one you linked, changed the width and height, changed the color and location of the input buttons, changed the amount of input buttons, put my zindexed div over top, and now 3 of the 4 images are clickable. as far as i know, the only thing i did differently this time was keep the last two img srcs in the zoom, even though there's no image data in them, i erased the image html, so they are just blank img srcs. <img src="" alt="">

what the heck lol

jundo12
03-31-2017, 07:44 AM
and now all 4 are working. i had removed input buttons 2, 4 and 7. i just put 7 back in and now all four are clickable. lol

woot and sheesh. this thing is so sensitive.

jscheuer1
03-31-2017, 03:35 PM
Well we don't have to have one to one equivalency between the inputs and the images, and there can be other images and other inputs on the page. But then we must access them in a more specific manner in javascript so as not to create unwanted associations, and/or not attempt to access elements that might not be there. But there's another potential issue once you get involved with anything else positioned. Even if you can see through it, a later (later in the DOM - usually the same as later in the HTML code) element will block the ability to click on an earlier element if it's over the earlier element or has a higher z-index, even an earlier element can "cover" a later one if it has a higher z-index or if it's the only one of the two which is positioned. Using zoom and other styles can sometimes have the same results as positioning, but I see you're also using position for everything, at least in the first code pen demo.

Here's what you could do. Setup a code pen that has what you want in it, the whole thing, including any images. Tell me which images in it you want linked. I should be able to take it from there.

jundo12
04-01-2017, 02:35 PM
it's working now. i'm having fun with it, zooming back and forth. lol thank you again for the help!

i am stuck on a new problem. well i've been struggling with it for awhile now *like a couple years*
it's three.js webgl of the planet earth and a moon, in 3d. i've been trying to wrap my head around how to
click a 2d image link and make the camera move to a planet in 3d space. it's a canvas, unfortunately, and they
are just not link friendly so i can't even figure out how to get the 2d link to work much less how to get it to
move the camera. was also trying to figure out how to get it to load into a new html page when you reach a certain
coordinate above the planet's surface. here's the code
https://threejs.org/examples/misc_controls_fly.html

jundo12
04-01-2017, 11:21 PM
and another question:
during the zoom, if i have an image in the series that depicts a curvature (like a camera going thru a curving tunnel), could the zoom curve as well? i mean is there a way to make it skew from the straight forward view? whats actually moving, the camera or the browser? err that's not the right question. what's moving, the camera or the scene? bleh i can't think of the right way to describe it. is the scene coming to and passing by the camera or is the camera going thru the scene?

jundo12
04-04-2017, 01:52 AM
as regards the 3d planet questions, i did attempt to learn how to add a href image link but even the one that is embedded in the script already doesn't appear to be working. so something may have changed in three.js since that planet script was written that caused that feature to break - an issue i must say, that makes this type of coding even harder to learn.

i attempted to learn how to load a new html page when a coordinate range was reached in 3d space, but it just reads like goobedly gook to me, as i am just a newb and a bit old (cant teach an old dog new tricks?). first of all the answers are scant to not available, so finding the answer required searching scripts that have actually achieved a similar effect, such as a 3d maze that upon reaching a certain location, automatically loads a new html page, no clicking even required. that seemed coordinate based but perhaps not actual 3d coordinates. i suppose it's similar enough. i mean you have y, x and you just add z, for the 3d dimension, right?

jundo12
04-05-2017, 04:00 PM
oh update on the 3d question.......appears three.js is using raycasting for trigger events like a 3d coordinate causing a new html page to load.
bleh. reading the info on raycasting is like listening to charlie brown's teacher https://www.youtube.com/watch?v=ss2hULhXf04

jundo12
05-04-2017, 07:14 PM
Well we don't have to have one to one equivalency between the inputs and the images, and there can be other images and other inputs on the page. But then we must access them in a more specific manner in javascript so as not to create unwanted associations, and/or not attempt to access elements that might not be there. But there's another potential issue once you get involved with anything else positioned. Even if you can see through it, a later (later in the DOM - usually the same as later in the HTML code) element will block the ability to click on an earlier element if it's over the earlier element or has a higher z-index, even an earlier element can "cover" a later one if it has a higher z-index or if it's the only one of the two which is positioned. Using zoom and other styles can sometimes have the same results as positioning, but I see you're also using position for everything, at least in the first code pen demo.

Here's what you could do. Setup a code pen that has what you want in it, the whole thing, including any images. Tell me which images in it you want linked. I should be able to take it from there.

here's what you were helping me with http://theangelsquest.com/test/earthfemale/european/shuttle/testings4.html
its fine in chrome, in firefox and in IE. it blurs till it loads in firefox, however. not sure about safari. firefox has some weird large image interpolation.

coothead
05-05-2017, 12:02 AM
Hi there jundo12,


the following example has individual links for each image state...



<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
touch-action: none;
content-zooming: none;
}

body {
margin: 0;
padding: 0;
background: #000;
}

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

#zoom {
width: 100%;
height: 100%;
transition: transform 2s ease-in-out 0s;
transform: scale3d(0.000729, 0.000729, 1);
}

#zoom img {
position: absolute;
width: 640px;
height: 480px;
top: 50%;
left: 50%;
margin-left: -320px;
margin-top: -240px;
}
#screen a {
position: absolute;
width: 100%;
height: 100%;
}

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

#screen 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%;}

#screen > input {
position: absolute;
top: -1000px;
}

#screen > input:checked + label {background: #f80;}

#i1:checked ~ #zoom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ #zoom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ #zoom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ #zoom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ #zoom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ #zoom {transform: scale3d(0.3, 0.3, 1);}
#i7:checked ~ #zoom {transform: scale3d(1, 1, 1);}

#i1:checked ~ #a1,
#i2:checked ~ #a2,
#i3:checked ~ #a3,
#i4:checked ~ #a4,
#i5:checked ~ #a5,
#i6:checked ~ #a6,
#i7:checked ~ #a7 {
z-index: 2;
}
</style>

</head>
<body>

<div id="screen">
<input id="i1" name="doot" type="radio" checked>
<label for="i1"></label>
<input id="i2" name="doot" type="radio">
<label for="i2"></label>
<input id="i3" name="doot" type="radio">
<label for="i3"></label>
<input id="i4" name="doot" type="radio">
<label for="i4"></label>
<input id="i5" name="doot" type="radio">
<label for="i5"></label>
<input id="i6" name="doot" type="radio">
<label for="i6"></label>
<input id="i7" name="doot" type="radio">
<label for="i7"></label>

<a id="a1" href="https://aws.amazon.com/"></a>
<a id="a2" href="https://google.com"></a>
<a id="a3" href="https://yahoo.com"></a>
<a id="a4" href="https://www.ecosia.org/"></a>
<a id="a5" href="https://www.startpage.com/"></a>
<a id="a6" href="https://bing.com/"></a>
<a id="a7" href="https://duckduckgo.com/"></a>

<div id="zoom">
<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="">

<!-- #zoom --></div>

<!-- #screen --></div>

</body>
</html>



coothead

jundo12
05-05-2017, 04:43 AM
ty coothead!

coothead
05-05-2017, 08:10 AM
No problem, you're very welcome. ;)


coothead

jundo12
05-05-2017, 12:59 PM
No problem, you're very welcome. ;)


coothead

you wouldn't happen to know how to set up a multiple choice quiz where the score is displayed with graphics instead of numbers?
or how to use raycasting in three.js to place 2d hrefs in 3d coordinate space? http://theangelsquest.com/test/earthfemale/european/shuttle/earth/earthshipfirstperson.html i'd like to make it so if you're flying toward the planet's surface, once you reach a certain coordinate range, anywhere around the planet in a big sphere (like an invisible gigantic raycasted sphere that encases the planet so that flying into it immediately opens a new html page)
or how to make the zoom script you helped with, controllable with up and down arrow keys instead of the input buttons?

:D

i'd like to give her the chance to walk instead of always being on the tram or a conveyer belt. in the cafe sequence, for example, i'd like to make it so she walks between each cooking area, rather than riding the tram. i have an animation of her walking that contains two images, that can be animated (if memory serves) when one of the arrow keys is pressed and held down. of course, since you always see her from the back in third person camera perspective, if she were to go backwards, she'd appear to be walking backwards from the back unless i made another animation where's she's walking from the front. that might be a tad bit disconcerting though (She'd look like she was moonwalking from the back though hehe). here's the sequence i'd like to use arrow keys from keyboard instead of input buttons
http://theangelsquest.com/test/earthfemale/european/shuttle/cafe.html

jundo12
05-07-2017, 08:07 PM
Hi there jundo12,


the following example has individual links for each image state...



<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
touch-action: none;
content-zooming: none;
}

body {
margin: 0;
padding: 0;
background: #000;
}

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

#zoom {
width: 100%;
height: 100%;
transition: transform 2s ease-in-out 0s;
transform: scale3d(0.000729, 0.000729, 1);
}

#zoom img {
position: absolute;
width: 640px;
height: 480px;
top: 50%;
left: 50%;
margin-left: -320px;
margin-top: -240px;
}
#screen a {
position: absolute;
width: 100%;
height: 100%;
}

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

#screen 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%;}

#screen > input {
position: absolute;
top: -1000px;
}

#screen > input:checked + label {background: #f80;}

#i1:checked ~ #zoom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ #zoom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ #zoom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ #zoom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ #zoom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ #zoom {transform: scale3d(0.3, 0.3, 1);}
#i7:checked ~ #zoom {transform: scale3d(1, 1, 1);}

#i1:checked ~ #a1,
#i2:checked ~ #a2,
#i3:checked ~ #a3,
#i4:checked ~ #a4,
#i5:checked ~ #a5,
#i6:checked ~ #a6,
#i7:checked ~ #a7 {
z-index: 2;
}
</style>

</head>
<body>

<div id="screen">
<input id="i1" name="doot" type="radio" checked>
<label for="i1"></label>
<input id="i2" name="doot" type="radio">
<label for="i2"></label>
<input id="i3" name="doot" type="radio">
<label for="i3"></label>
<input id="i4" name="doot" type="radio">
<label for="i4"></label>
<input id="i5" name="doot" type="radio">
<label for="i5"></label>
<input id="i6" name="doot" type="radio">
<label for="i6"></label>
<input id="i7" name="doot" type="radio">
<label for="i7"></label>

<a id="a1" href="https://aws.amazon.com/"></a>
<a id="a2" href="https://google.com"></a>
<a id="a3" href="https://yahoo.com"></a>
<a id="a4" href="https://www.ecosia.org/"></a>
<a id="a5" href="https://www.startpage.com/"></a>
<a id="a6" href="https://bing.com/"></a>
<a id="a7" href="https://duckduckgo.com/"></a>

<div id="zoom">
<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="">

<!-- #zoom --></div>

<!-- #screen --></div>

</body>
</html>



coothead

hmmm doesn't appear to be working. where's the screen.css file? you mean the css in the header? none of the images are appearing, even though they are the same images in the working example

jundo12
05-07-2017, 08:20 PM
oh i figured out the problem. the "base href" was not necessary and went to an inaccessible page

jundo12
05-17-2017, 11:51 AM
is there a way with javascript to have it auto click one of the buttons i indicate *by putting the id (either a7 or i7, for example)? i have tried pretty much every combination and the auto click function just seems to not understand what it needs to click, even when i indicate the id of the link or input id. i've tried it with auto click link javascript and auto click input button javascript. neither worked. it treats it like a jump to image, rather than clicking the link button and letting it perform its function (zooming)

jundo12
05-17-2017, 12:40 PM
k i resolved it for the first click. thing is, i'm trying to chain the zoom into another zoom of the same thing on a new page. i have a timer that tells it after 4 seconds, load a new page. i'd prefer the timer start after it auto clicks. but the real issue is what happens when the new page loads with same auto click, same images, mostly the same html. it seems to be acting like its cached and therefore will not auto click the button again. is there a way to force it to auto click again on a new page?

i mean, i suppose i could give it a different id for each new page, just seems silly that it doesn't understand this is a new page. do what the javascript says to do on this new page. also it does occassionally ignore the zoom function entirely and just jumps to the last image. it needs to just push the button each time the javascript tells it to and let the button do what it does. dunno why it's trying to also do the function of the button itself. just push button. nothing more nothing less. lol

p.s. i'm using the i7 id, rather than the a7 id.

styxlawyer
05-17-2017, 03:45 PM
I don't fully understand what it is you are trying to do but this might help:

https://www.w3schools.com/js/js_cookies.asp

jundo12
05-17-2017, 05:40 PM
I don't fully understand what it is you are trying to do but this might help:

https://www.w3schools.com/js/js_cookies.asp

this link is an example of the zoom http://theangelsquest.com/test/earthfemale/european/shuttle/testings4.html
now say i want to simulate a nearly endless zoom. which is started when the person clicks the link that goes to the page containing the first set of zooms. it can only zoom up to 7 images per page. i usually go for 5-6 images. so to simulate an endless zoom i got the idea that i could put a timer on the page, that after so many seconds, it automatically goes to the next page of zooms. and to make the whole thing automated, a script that automatically pushes the button that zooms to last image on the page. i know that's a clumsy way to do so. if you know how i could include the timer into the auto click script, that'd be great. these are the two scripts

<script type="text/javascript">
document.getElementById("i7").click();
</script>

<script type="text/JavaScript">
setTimeout(function(){document.location.href = "south3.html"},3000);

</script>
--

the issue is, when the timer goes to the next page of zooms, the auto click doesn't click. it just sits there. i have to hard reload the page to get it to run the script, and occasionally, it will jump to the last image, rather than zooming to last image

styxlawyer
05-18-2017, 09:05 AM
.
.
the issue is, when the timer goes to the next page of zooms, the auto click doesn't click. it just sits there. i have to hard reload the page to get it to run the script, and occasionally, it will jump to the last image, rather than zooming to last image


When you load a new HTML page any JavaScript from the previous page is lost. In order to carry JavScript data forward to a new HTML page you will have to use temporary storage in the form of cookies. When leaving a page write the current state of the variables to cookies (in plain text), then read the cookies when the new page is loaded.

jundo12
05-18-2017, 11:58 AM
When you load a new HTML page any JavaScript from the previous page is lost. In order to carry JavScript data forward to a new HTML page you will have to use temporary storage in the form of cookies. When leaving a page write the current state of the variables to cookies (in plain text), then read the cookies when the new page is loaded.


but i use the same javascript on the new page. it doesn't need to be carried over since it's declared all over again. maybe i am misunderstanding you? it's acting like it's cached, sorta like large .gifs do, where you have to make the same .gif with different names to get it to play on later pages, since it's cached and browser says, "Been there, done that," and ignores running the animation. just shows the gif with its last frame. well that's essentially what is happening on pages following the first one. the first one won't even play, just jumps to last image in the zoom, if i have been to it recently. so it's caching. i have to hard reload the page to get it to read the javascript again. and then the second page just jumps to last image as well, cause now, it's cached from the first page, or simply ignores the javascript entirely and just sits there while the timer counts down.

p.s. it doesn't do this if i'm not trying to use the javascript to auto click the button. if i push the button manually, it doesn't jump to last image, it zooms to last image. so it's the auto click that seems to be causing the problem. is there perhaps an easier way to make an "endless zoom"?

styxlawyer
05-18-2017, 02:40 PM
but i use the same javascript on the new page. it doesn't need to be carried over since it's declared all over again. maybe i am misunderstanding you?

Yes, you are loading the same JavaScript code again, but the problem seems to be that the new code doesn't know how far the old code on the previous page had progressed. It's not the code that is the problem but the state of the variables used within the code which are all unknown when the new page loads.

I now also see that you are running animated GIFs, which you didn't mention before. As animated GIFs are self-contained it makes it much more difficult to know how far the animation has gone. As far as I know there's no means of determining which frame an animated GIF is currently displaying. Neither can you force an animated GIF to start displaying from a particular frame. You may need to separate the frames of each GIF file and animate them with JavaScript. Then you will be able to pass the data to the new page determining exactly which frame the animation has reached when the new page loads.

jundo12
05-18-2017, 03:35 PM
Yes, you are loading the same JavaScript code again, but the problem seems to be that the new code doesn't know how far the old code on the previous page had progressed. It's not the code that is the problem but the state of the variables used within the code which are all unknown when the new page loads.

I now also see that you are running animated GIFs, which you didn't mention before. As animated GIFs are self-contained it makes it much more difficult to know how far the animation has gone. As far as I know there's no means of determining which frame an animated GIF is currently displaying. Neither can you force an animated GIF to start displaying from a particular frame. You may need to separate the frames of each GIF file and animate them with JavaScript. Then you will be able to pass the data to the new page determining exactly which frame the animation has reached when the new page loads.

oh the gif is not having any problem. in fact, it goes happily along for the ride. the issue is the background images that are zoomed. so i need to load javascript as a cookie or something? can you give me an example of how to write this
<script type="text/javascript">
document.getElementById("i7a").click();
</script>

as a cookie?

jundo12
05-18-2017, 09:27 PM
When leaving a page write the current state of the variables to cookies (in plain text), then read the cookies when the new page is loaded.

not sure what you mean by this. i read the cookies link you gave, but not sure how that applies to what you are suggesting about "the current state of variables" nor how to "read" the cookies on new page

styxlawyer
05-18-2017, 09:49 PM
A cookie simply carries data from one HTML page to another one. Only you can decide what data needs to be forwarded so that a smooth transition can be displayed as you change HTML pages.

There is an excellent treatise on how to use cookies on this page (https://www.quirksmode.org/js/cookies.html).

jundo12
05-19-2017, 03:17 PM
i don't understand why a javascript code on a different page would be trying to keep track of javascript code on another page. such as your comment that it doesn't know the state of progress of the variables in the previous code. it's not the type of code that is supposed to be keeping track of what is happening on a different page. it's just supposed to perform its function when called for. and its only function is to auto click an input button

for example, the other javascript code is a timer. after 4 seconds, it goes to new html page. when it gets to new page, it's on that page as well. it doesn't stop counting because it counted on previous page. it doesn't keep track of the timer variables on the previous page. it just starts counting down again. so what is it about this other javascript auto click that makes it necessary for it to keep track of what is happening on previous page, when its only function was to click a button lol

like a mouseover function doesn't stop to check the state of variables of mouseover function on a previous page where it was also located . it's a new page. it forgets the old page, and performs its function on new page.

styxlawyer
05-19-2017, 04:43 PM
I'm sorry, but I don't understand what you are trying to do. I did look at the source of the page but couldn't follow the flow of the code as there are numerous nesting errors. I passed the page to the W3C validator and it finally gave up after clocking up 239 errors:

https://validator.w3.org/nu/?doc=http%3A%2F%2Ftheangelsquest.com%2Ftest%2Fearthfemale%2Feuropean%2Fshuttle%2Ftestings4.html

jundo12
05-19-2017, 11:13 PM
I'm sorry, but I don't understand what you are trying to do. I did look at the source of the page but couldn't follow the flow of the code as there are numerous nesting errors. I passed the page to the W3C validator and it finally gave up after clocking up 239 errors:

https://validator.w3.org/nu/?doc=http%3A%2F%2Ftheangelsquest.com%2Ftest%2Fearthfemale%2Feuropean%2Fshuttle%2Ftestings4.html
pretend like you've just walked into a nutty professor's laboratory. the professor is trying to piece together normal html, css, webgl and javascript commands so that they simulate game functions on a normal website page, without the full use of an actual game engine. it's all highly experimental and patchworked together in bits and pieces.

btw nice validator link. i'm surprised it's having a tizzy over basic html lol OMG I USED <CENTER>! hehe
they've gotten all high and mighty with the awesome css div and stylesheets (center is better used when all you need is to center something since the div equivalent would require several declarations instead of just one . they probably shouldn't deprecate basic html )
since when did they deprecate the font command? ya know <font face="arial"> etc? now you must put it in a stylesheet! that requires using separate styles for each instance of font change in the stylesheet. personally, i dont think they should deprecate font commands either.
i havent titled the page yet. didn't know that would be considered an error. i guess google is getting bossy. ;)
i did warn, earlier on, that my code is a tangled mess and that real coders would laugh at the insanity of it all. i must be psychic. lol

as far as what i'm trying to do in these last few posts: all i was trying to do was to get a javascript to auto click an input button on each page where it is found. that's it. :D but it appears to want to cache the code as if it were running a gigantic .gif animation. but it isn't running a gif animation == its pushing a button! lol it's not supposed to be worrying about the zoom function, it's just supposed to auto click the input button that starts the zoom function. what's it doing, worrying about the state of the variables especially on a different page?

p.s. the page i linked you to, is not the page i'm having problems with. i just wanted you to see what the zoom was like. it zooms thru 1-7 images. done.
the nested issues are my pieced together UI, which is a series of toggled divs, some of which have toggled divs inside of them. this is all in a very rough state. ignore the ui. it's just a bunch of nested css divs with toggles. the actual problem is the javascript auto click not running on a second page, acting like its function is done even when it's being called on a brand new page. its behaving oddly.

the concept was to simulate an endless zoom by using two javascripts in association with the zoom html/css. the first javascript is a timer, that counts down 4 seconds before going to a new page. the second javascript auto clicks the input button that starts the zoom. i deliberately told it to click the input button that zooms to the last image in the zoom series . so while it's zooming to last image, the timer is counting down and changes to new page at the end of 4 seconds,where the whole thing should be repeated... et.al, the timer starts again, the auto click auto clicks again..... however, that's not what it ended up doing. only the timer starts again. the auto click doesn't auto click again. it's acting as if it were only usable one time on one page and that's it.

jundo12
05-20-2017, 02:07 AM
perhaps this would help. this is the code of the actual page i'm working on. i have left out the nested divs that compromise my makeshift game ui.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="" media="">-->
<style media="screen">
html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}

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

#screen {
position: absolute;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}

#zoom {
width: 100%;
height: 100%;
transition: transform 7s ease-in-out 0s;
transform: scale3d(0.000729, 0.000729, 1);
}

#zoom img {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
margin-left: 0px;
margin-top: 0px;
}
#screen a {
position: absolute;
width: 100%;
height: 100%;
}

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

#screen 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%;}
#i7a + label {left: 76%;}

#screen > input {
position: absolute;
top: -1000px;
}

#screen > input:checked + label {background: #f80;}

#i1:checked ~ #zoom {transform: scale3d(0.000729, 0.000729, 1);}
#i2:checked ~ #zoom {transform: scale3d(0.00243, 0.00243, 1);}
#i3:checked ~ #zoom {transform: scale3d(0.0081, 0.0081, 1);}
#i4:checked ~ #zoom {transform: scale3d(0.027, 0.027, 1);}
#i5:checked ~ #zoom {transform: scale3d(0.09, 0.09, 1);}
#i6:checked ~ #zoom {transform: scale3d(0.3, 0.3, 1);}
#i7a:checked ~ #zoom {transform: scale3d(1, 1, 1);}

#i1: checked ~ #a1,
#i2: checked ~ #a2,
#i3: checked ~ #a3,
#i4: checked ~ #a4,
#i5: checked ~ #a5,
#i6: checked ~ #a6,
#i7a: checked ~ #a7 {
z-index: 2;
}
</style>

</head>
<body>
<Script>
myAudio = new Audio('data3.mp3');
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
myAudio.play();

</script>


<script type="text/JavaScript">
setTimeout(function(){document.location.href = "south3.html"},3000);

</script>
<div id="screen">

<input id="i1" name="doot" type="radio" checked>
<label for="i1"></label>
<input id="i2" name="doot" type="radio" >
<label for="i2"></label>
<input id="i3" name="doot" type="radio" >
<label for="i3"></label>
<input id="i4" name="doot" type="radio" >
<label for="i4"></label>
<input id="i5" name="doot" type="radio" >
<label for="i5"></label>
<input id="i6" name="doot" type="radio" >
<label for="i6"></label>
<input id="i7a" name="doot" type="radio" >
<label for="i7a"></label>

<a id="a1" href="#"></a>
<a id="a2" href="#"></a>

<a id="a3" href="#"></a>
<a id="a4" href="#"></a>
<a id="a5" href="#"></a>
<a id="a6" href="#"></a>

<a id="a7" href="south2.html"></a>


<div id="zoom">

<img src="south1e.png" alt="">
<img src="south1d.png" alt="">
<img src="south1d.png" alt="">
<img src="south1d.png" alt="">
<img src="south1d.png" alt="">
<img src="south1d.png" alt="">



<!-- #zoom --></div>

<!-- #screen --></div>
<script type="text/javascript">
document.getElementById("i7a").click();
</script>

this bit
<script type="text/JavaScript">
setTimeout(function(){document.location.href = "south3.html"},3000); </script>

tells it to go to a new page named south3.html after 3 seconds.

this bit
<script type="text/javascript">
document.getElementById("i7a").click();</script>

tells it to auto click the input button with the id of "i7a." the input button i7a is the input button associated with the last image in the zoom, which normally causes the camera to zoom to the last image if it is clicked.

i'm not telling it to zoom to the last image of the entire endless zoom. i'm just telling it to zoom to the last image on THAT (the current) page. and when timer goes to new page, to auto click input button to zoom to last image on the NEW page. and keep repeating this every time the timer goes to new page. no need to pass variables since all images being called upon on that page, are all present and accounted for, on THAT page.*by last image i just mean the seventh image on any given page, since seven is the most images you can have per page. it works because all the images are identical. so it doesn't matter where it stops on one page to go to another cause every image is the same, no need to keep track of progress on prior page since the new page has identical images (visual continuity isn't a problem). it's similar in concept to a subway ride. if you were looking out the window at the wall, you would see the intermittent girders and walls are pretty much the same, repeatedly, as they whiz past your view. same idea.

jundo12
05-20-2017, 03:24 AM
maybe if i used the cookie thing to wipe from memory, the previous page, so it treats the auto click script as if it were a new thing, each time
.............
a few minutes later....

Nope. that's not going to work. it's still occassionally just jumping to last image in the zoom, instead of zooming to last image in zoom.
the auto click was just supposed to click the button. i didn't realize that it was also going to try to perform the button's function. that was the job of the css.
le mew, le sigh. back to the drawing board.

styxlawyer
05-20-2017, 12:13 PM
.
.
p.s. the page i linked you to, is not the page i'm having problems with.
.
.


Hmmm, that makes it impossible for anyone help you as without seeing the real problem it's all guesswork.

jundo12
05-21-2017, 01:40 AM
Hmmm, that makes it impossible for anyone help you as without seeing the real problem it's all guesswork.

it won't work anyway, as it just jumps to last image half the time. the javascript takes over the function of the input button but doesn't run the entire function. once in a great while it works. most of the time it doesn't.

what about this fantastic script http://arkadia.xyz/ any way that could be coded so that i can just insert normal images? looks like he might be using svgs or something. not sure. i looked at his javacript for the zoom and its pretty programmy. it's really cool that you can increase the forward momentum by pushing the up arrow on your keyboard! that is an amazing piece of javascript

on top of zooming endlessly thru several images, and offering the option of going faster or reverse, it also goes thru various color variations as it's running. that is a flippin' work of art.

jundo12
05-22-2017, 09:22 AM
was just watching the link http://arkadia.xyz/. on top of zooming endlessly thru several images, and offering the option of going faster or reverse, it also goes thru various color variations as it's running. that is a flippin' work of art. whoever made that is a genius.