| Both sides previous revision Previous revision Next revision | Previous revision |
| steve-image-carosel-test-page3 [2023/02/08 19:38] – 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 |
| } | } |
| } | } |
| 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){ | if (deviceTyp!='mobile'){ |
| //document.location.reload() | window.addEventListener("resize", function(e){ |
| if (deviceType!='mobile' || deviceOrientation!='portriat'){ | console.log('options',deviceType!='mobile',deviceOrientation!='portrait') |
| console.log('Resize detected: portriat mode') | if (window.innerWidth<window.innerHeight){ |
| deviceOrientation='portriat' | //document.location.reload() |
| higs.sequenceActions('quickRight') | console.log('Resize detected: portrait mode') |
| setTimeout(()=>{ | deviceOrientation='portrait' |
| higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' | higs.sequenceActions('quickRight') |
| },200) | setTimeout(()=>{ |
| | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| | },300) |
| | } |
| | //adaptToOrientationChange() |
| | else{ |
| | //document.location.reload() |
| | console.log('Resize detected: landscape mode') |
| | deviceOrientation='landscape' |
| | higs.sequenceActions('quickRight') |
| | setTimeout(()=>{ |
| | higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' |
| | },200) |
| | //adaptToOrientationChange() |
| } | } |
| //adaptToOrientationChange() | }) |
| } | } |
| else if (deviceType!='mobile' || deviceOrientation!='landscape'){ | |
| //document.location.reload() | |
| console.log('Resize detected: landscape mode') | |
| deviceOrientation='landscape' | |
| higs.sequenceActions('quickRight') | |
| setTimeout(()=>{ | |
| higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px' | |
| },200) | |
| //adaptToOrientationChange() | |
| } | |
| }) | |
| |
| /* | /* |