| Both sides previous revision Previous revision Next revision | Previous revision |
| steve-image-carosel-test-page3 [2023/02/08 19:23] – steve.wang | steve-image-carosel-test-page3 [2023/02/09 06:44] (current) – steve.wang |
|---|
| let info=[{ | let info=[{ |
| imageSrc:'./what is this.png', | imageSrc:'./what is this.png', |
| portriatSrc:'./measure-portriat.PNG', | portraitSrc:'./measure-portrait.PNG', |
| href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=about-space_invaders', | href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=about-space_invaders', |
| description:'hi,hi,hi', | description:'hi,hi,hi', |
| },{ | },{ |
| imageSrc:'./steve-color-scrolling.png', | imageSrc:'./steve-color-scrolling.png', |
| portriatSrc:'./homework-portriat.PNG', | portraitSrc:'./homework-portrait.PNG', |
| href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=my_planet', | href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=my_planet', |
| description:'hio,hio,hio', | description:'hio,hio,hio', |
| },{ | },{ |
| imageSrc:'./steve-drawing-fractals.png', | imageSrc:'./steve-drawing-fractals.png', |
| portriatSrc:'./circuits-portriat.jpg', | portraitSrc:'./circuits-portrait.jpg', |
| href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=agriculture', | href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=agriculture', |
| description:'hiv,hiv,hiv', | description:'hiv,hiv,hiv', |
| let info=[{ | let info=[{ |
| imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-students.jpg', | imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-students.jpg', |
| portriatSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-students.jpg', | portraitSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-students.jpg', |
| href:'https://renickbell.net/ed/2022service/doku.php?id=about-students', | href:'https://renickbell.net/ed/2022service/doku.php?id=about-students', |
| description:'about our students', | description:'about our students', |
| },{ | },{ |
| imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-arduino.jpg', | imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-arduino.jpg', |
| portriatSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-arduino.jpg', | portraitSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-arduino.jpg', |
| href:'https://renickbell.net/ed/2022service/doku.php?id=arduino', | href:'https://renickbell.net/ed/2022service/doku.php?id=arduino', |
| description:'arduino', | description:'arduino', |
| },{ | },{ |
| imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-simulation.jpg', | imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-simulation.jpg', |
| portriatSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-simulation.jpg', | portraitSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-simulation.jpg', |
| href:'https://renickbell.net/ed/2022service/doku.php?id=partner-simulation', | href:'https://renickbell.net/ed/2022service/doku.php?id=partner-simulation', |
| description:'simulation of elderly experience', | description:'simulation of elderly experience', |
| },{ | },{ |
| imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-hydra.jpg', | imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-hydra.jpg', |
| portriatSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-hydra.jpg', | portraitSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-hydra.jpg', |
| href:'https://renickbell.net/ed/2022service/doku.php?id=hydra-practice', | href:'https://renickbell.net/ed/2022service/doku.php?id=hydra-practice', |
| description:'hydra', | description:'hydra', |
| },{ | },{ |
| imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-visual.jpg', | imageSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-landscape-visual.jpg', |
| portriatSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-visual.jpg', | portraitSrc:'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=image-carosel-portrait-visual.jpg', |
| href:'https://renickbell.net/ed/2022service/doku.php?id=art-museum', | href:'https://renickbell.net/ed/2022service/doku.php?id=art-museum', |
| description:'visual cues', | description:'visual cues', |
| } | } |
| else{ | else{ |
| this.mainImg1.href=this.info[1].portriatSrc | this.mainImg1.href=this.info[1].portraitSrc |
| } | } |
| this.mainImg1.className='mainImg' | this.mainImg1.className='mainImg' |
| } | } |
| else{ | else{ |
| this.mainImg2.src=this.info[0].portriatSrc | this.mainImg2.src=this.info[0].portraitSrc |
| } | } |
| this.mainImg2.className='mainImg' | this.mainImg2.className='mainImg' |
| arrowSizes=100 | arrowSizes=100 |
| } | } |
| else if (deviceOrientation=='portriat'){ | else if (deviceOrientation=='portrait'){ |
| console.log('acknowledged') | console.log('acknowledged') |
| arrowSizes=browserZoomLevel/6 | arrowSizes=browserZoomLevel/6 |
| } | } |
| else{ | else{ |
| toChangeTo.src=this.info[this.currentImage].portriatSrc | toChangeTo.src=this.info[this.currentImage].portraitSrc |
| } | } |
| } | } |
| |
| let higs; | let higs; |
| let screenSize | |
| window.addEventListener("load", function(e){ | window.addEventListener("load", function(e){ |
| screenSize=new Point(window.outerWidth,window,outerHeight) | |
| browserZoomLevel = Math.round(window.devicePixelRatio * 100); | browserZoomLevel = Math.round(window.devicePixelRatio * 100); |
| if (window.innerWidth<window.innerHeight){ | if (window.innerWidth<window.innerHeight){ |
| console.log('portriat mode') | console.log('portrait mode') |
| deviceOrientation='portriat' | deviceOrientation='portrait' |
| } | } |
| else{ | else{ |
| })) | })) |
| } | } |
| window.addEventListener("resize", function(e){ | |
| if (window.innerWidth<window.innerHeight && screenSize.x ==window.outerWidth && screenSize.y == window.outerHeight){ | if (deviceTyp!='mobile'){ |
| //document.location.reload() | window.addEventListener("resize", function(e){ |
| console.log('Resize detected: portriat mode') | console.log('options',deviceType!='mobile',deviceOrientation!='portrait') |
| deviceOrientation='portriat' | if (window.innerWidth<window.innerHeight){ |
| higs.sequenceActions('quickRight') | //document.location.reload() |
| setTimeout(()=>{ | console.log('Resize detected: portrait mode') |
| higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' | deviceOrientation='portrait' |
| },200) | higs.sequenceActions('quickRight') |
| //adaptToOrientationChange() | setTimeout(()=>{ |
| } | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| else if (screenSize.x ==window.outerWidth && screenSize.y == window.outerHeight){ | },300) |
| //document.location.reload() | } |
| console.log('Resize detected: landscape mode') | //adaptToOrientationChange() |
| deviceOrientation='landscape' | else{ |
| higs.sequenceActions('quickRight') | //document.location.reload() |
| setTimeout(()=>{ | console.log('Resize detected: landscape mode') |
| higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' | deviceOrientation='landscape' |
| },200) | higs.sequenceActions('quickRight') |
| //adaptToOrientationChange() | setTimeout(()=>{ |
| } | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| }) | },200) |
| | //adaptToOrientationChange() |
| | } |
| | }) |
| | } |
| |
| /* | /* |