Page 1 of 6 123 ... LastLast
Results 1 to 10 of 51

Thread: Javascript solution for image link issue

  1. #1
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default Javascript solution for image link issue

    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
    Last edited by jundo12; 03-30-2017 at 11:51 PM.

  2. #2
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    z-index?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Last edited by jundo12; 03-31-2017 at 02:45 AM.

  5. #5
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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
    Last edited by jundo12; 03-31-2017 at 03:44 AM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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?

  8. #8
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

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

    Code:
    <!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.
    Last edited by jscheuer1; 03-31-2017 at 05:12 AM. Reason: minor syntax error
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jundo12 (03-31-2017)

  11. #10
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

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

Similar Threads

  1. JavaScript and/or CSS solution
    By Sebah in forum JavaScript
    Replies: 2
    Last Post: 07-18-2010, 09:03 PM
  2. Javascript Issue (swapping image)
    By TMM1BX in forum JavaScript
    Replies: 0
    Last Post: 03-15-2009, 07:31 PM
  3. Javascript image swap with link
    By sakocreative in forum JavaScript
    Replies: 0
    Last Post: 06-13-2007, 05:30 PM
  4. Image copyright solution
    By The Roman in forum Other
    Replies: 20
    Last Post: 05-26-2006, 05:34 PM
  5. Javascript Dilemma, Simple Solution.?
    By f0ssil0o in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-22-2006, 11:43 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •