So for my website I'm trying to implement a Carousel but the pictures are not being resized and the next and prev functions aren't working. Any suggestions?
I tried including the script at the bottom of the html function and making sure the functions were all defined. What I'm trying to do is have the pictures be smaller on the html page and have the prev and next functions underneath the pictures and make sure that the carousel is working
HTML
<h1 class="header"> Projects </h1>
<div id="container">
<div class = "carousel-item fade" style="width: 50%">
<img src = "hackBU.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "pigGame.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "connect4.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "ese123clock.png">
<div class = "carousel-text"> Text </div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusItem(-1)">❮</a>
<a class="next" onclick="plusItem(1)">❯</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
CSS
#projects{
width: auto;
height: 40rem;
margin: 4rem;
text-align: center;
}
.header{
color: white;
text-align: center;
font-family: Helvetica Neue',Helvetica,Arial,sans-serif;
}
.container{
width: 40rem;
position: relative;
margin: auto;
}
.carousel-item{
display: none;
width: 10%;
}
.prev,.next{
cursor: pointer;
position: inherit;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: blue;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
JS
document.addEventListener("DOMContentLoaded", function(event) {
var itemIndex = 1;
showItem(itemIndex);
// Next/previous controls
function plusItem(n) {
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
},false);
I'm assuming you just need someone to tell you why your events aren't firing on click; If you need more help than this, please let me know.
The functions you're calling (plusItem) aren't defined when you click the arrow because you're defining them in the "DOMContentLoaded" handler which is not firing.
I would move the function declarations outside the "DOMContentLoaded" handler. See the snippet below;
var itemIndex = 1;
document.addEventListener("DOMContentLoaded", function(event) {
showItem(itemIndex);
},false);
// Next/previous controls
function plusItem(n) {
console.log('plusitem')
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
As to why your "DOMContentLoaded" handler isn't firing, I believe this executes too early for a footer script to detect page load. If your script is in the footer ,you shouldn't need to detect page load for this. Alternatively, look at window load: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
For future reference, it's a great idea to see what feedback the console gives you when developing javascript, as in this case you would see "plusItem is not defined" which would give you a clue. Using console logging (console.log("abc")) is also very useful to see which parts of your script are being executed.
Related
I am using this JS code I found to make a slideshow work:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("hp-slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.slides-container {
display: block;
position: relative;
width: 100%;
}
.slides-container img {
width: 100%;
height: auto;
display: block;
}
.button {
position: absolute;
top: 50%;
transform: translate(0%,-50%);
user-select: none;
border: none;
background-color: rgb(0,0,0,0);
cursor: pointer;
border: none;
}
.buttonL {
left: 0;
height: 100%;
padding: 0 10% 10px 2.8%;
}
.buttonR {
right: 0;
height: 100%;
padding: 0 2.8% 10px 10%;
}
.arrowL,
.arrowR {
width: 25px;
height: 25px;
color: #fff;
border-bottom: 6px solid;
border-left: 6px solid;
margin-bottom: 20px;
}
.arrowL {transform: rotate(45deg);margin-left: 5px;}
.arrowR {transform: rotate(-135deg); margin-right: 5px;}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="slides-container">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg/1200px-ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Akita_Inu_dog.jpg/1200px-Akita_Inu_dog.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg" alt="">
<button class="button buttonL" onclick="plusDivs(-1)"><div class="arrowL"></div></button>
<button class="button buttonR" onclick="plusDivs(1)"><div class="arrowR"></div></button>
</div>
</body>
But the images move right as I click = too fast/ not elegant.
I saw this other code in other JS slider examples, which made the slides move slower (Those other codes didn't work for me for other reasons (couldn't be resized, needed complicated/hidden jQuery, etc.))
setInterval(function() {
showDivs()
}, 5000);
But I don't know where to place it. I changed the name to be one of the function names (showDivs) and tried sticking it in between functions, but it didn't work.
I'm already on 3-4 days looking for a simple slider with arrows that will scale with the page and losing my mind.
Thank you!
Check out this codepen
in js:
// automatic slider
var autoSlider = setInterval(slideRight, 3000);
// change that line (34) to control the time each slide is shown.
in css:
transition: all 3s cubic-bezier(1,.01,.32,1);
/* change that line (162) to control the transition length. */
in html:
replace the divs inside the li elements with your img tags.
(lines 14->17, 22->25, etc...)
Modal Images With Image Description
I found this code on here about making multiple Modal Images.
However I cannot seem to find the best way to add the description text along with it when I open the modal up. I have been following the code on the 2nd to last answer on this post:
Several Modal Images on page
which was helping me a lot but I need description text not caption text.
If anyone is willing to help me solve this it would be much appreciated.
Thank you in Advance!
CODE :
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#text {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content,
#text {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
<img class="myImg" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
<img class="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div class="text"></div>
</div>
< script >
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImg');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementsByClassName("text");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
} </script>
</body>
</html>
You need to wrap img + text with div so after click on wrapped div then pick inside content by .innerHTML property and change modal img to div.
Just small modification into your js code modalImg.src = this.src to modalImg.innerHTML = this.innerHTML; something like below snippet.
I hope below snippet will help you lot.
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImg');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementsByClassName("text");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
// modalImg.src = this.src;
modalImg.innerHTML = this.innerHTML;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
*,*:before, *:after{box-sizing: border-box;}
body{
margin: 0;
padding: 0;
font-family: Arial;
}
.myImg{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
display: inline-block;
vertical-align: top;
width: 300px;
min-height: 200px;
}
.myImg:hover {
opacity: 0.7;
}
.myImg img{
max-width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
overflow-y: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.modal-content {
margin: 0 auto 20px auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content img{
width: 100%;
display: block;
}
.modal-content .text{
font-size: 16px;
color: #f1f1f1;
padding: 10px;
}
.modal-content{
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<div class="myImg">
<img src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>
<div class="myImg">
<img src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
</div>
<div class="myImg">
<img src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
</div>
<!-- Modal Elements -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="modal-content" id="img01"></div>
</div>
It would be far more simple to place image and text in the same container.
<div class="image-container">
<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>
Then use JavaScript to declare a variable called modalContent and select your container.
var modalContent = getElementById('image-container');
It just simplifies everything and reduces the number of selectors required. Looking at your code I was having trouble trying to understand if each image displayed in a modal window separately or all together. I hope that this has helped.
I need help with this slideshow. I want it to be automatic and to be able to be controlled manually aswell. so far its working fine in the automatic part. However when I click the manual controls it takes me to a wrong slide and the time interval for the next 1 or 2 slides is messed up. If anyone has a solution to this then please help.
I have tried to change slideIndex to 0 but that takes me to the 1st slide istead of the next slide.
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 10000); // Change image every 10 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
<h2>Automatic Slideshow</h2>
<p>Change image every 10 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I expect the interval to be 10 seconds but it turns out to be a couple seconds instead. Also i expect the next / previous slide when buttons are clicked and they aren't working properly
I believe the problem is the fact that you are setting a timeout for your slideshow automatically and when you press the next or previous buttons your old timeouts do not cancel so now you have switched slides, the old timeout will still trigger and then you've also set a new one so it will trigger as well all way within the range of time that you would like.
Instead of creating a timeout for each button click i would suggest using intervals and keeping track of it outside any functions.
When the user presses a forward or back button cancel that interval and create a new one so that you don't run into the issue you are having now where you basically have like 10 loops spamming your carousel at the same time.
JAVASCRIPT
let slideIndex = 0;
const slideTime = 5000;
let slideInterval = setInterval(() => changeSlide(true), slideTime);
function jumpSlide(forward) {
clearInterval(slideInterval);
changeSlide(forward)
slideInterval = setInterval(() => changeSlide(true), slideTime);
}
function changeSlide(forward) {
const slides = document.getElementsByClassName('slide');
slides[slideIndex].classList.remove('active');
if (forward) {
if (slideIndex + 1 > slides.length - 1) {
slides[0].classList.add('active');
slideIndex = 0;
} else {
slides[slideIndex + 1].classList.add('active');
slideIndex ++;
}
} else {
if (slideIndex - 1 < 0) {
slides[slides.length - 1].classList.add('active');
slideIndex = slides.length - 1;
} else {
slides[slideIndex - 1].classList.add('active');
slideIndex --;
}
}
}
HTML
<div class='slide-container'>
<div class='slide active'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
<button onclick='jumpSlide(false)'>last slide</button>
<button onclick='jumpSlide(true)'>next slide</button>
CSS
.slide-container{
display: flex;
}
.slide {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.25)
}
.active {
background-color: red;
}
I'm just trying to change gently div's size.
When I click that div, I can unfold and fold those h5 elements
but how can I adapt animation about this action?
I already tried to apply keyframe animation or css transition, but I failed
for (var i = 1; i <= 5; i++) {
$('#sampleNumberList').append('<h5>#' + i + '</h5>');
}
$('#topSampleNum').on('click', function() {
if ($('#sampleNumberList').hasClass('active') === true) {
$('#sampleNumberList').removeClass('active');
} else {
$('#sampleNumberList').addClass('active');
}
});
.topFloatBar {
position: fixed;
width: 100%;
top: 0;
z-index: 5;
text-align: center;
background-color: #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#sampleNumberList {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topFloatBar" id="topSampleNum">
<h2 id="mainNumber"> #1 </h2>
<div id="sampleNumberList"> </div>
</div>
Like this?
var sampleList = document.querySelector('#sampleNumberList');
var listTrigger = document.querySelector('#mainNumber');
for(var i=1; i<=10; i++){
let el = document.createElement('h5');
el.innerText = i;
sampleList.append(el);
}
listTrigger.addEventListener('click', ()=> {sampleList.classList.toggle('active');});
.topFloatBar{
position:fixed;
width:100%;
top: 0;
z-index:5;
text-align:center;
background-color: #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:pointer;
}
#sampleNumberList {
position: absolute;
width: 100%;
overflow:hidden;
height: auto;
transform: scale(0);
transition: transform 0.5s ease-in-out;
transform-origin: top;
}
.active{transform: scale(1) !important;}
<div class="topFloatBar" id="topSampleNum" >
<h2 id="mainNumber">#1</h2>
<div id="sampleNumberList"></div>
</div>
Use jQuery slideToggle() to smoothly toggle those h5.
See Demo: JSFiddle
$('#clickableDiv').click(function() {
$('h5').slideToggle();
});
#sampleNumberList>h5 {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style='background:red'>
<h2 id='mainNumber'> #1 </h2>
<div id='clickableDiv' style='background:yellow'> Click Me </div>
<div id='sampleNumberList' style='background:blue'>
<h5> #1 </h5>
<h5> #2 </h5>
<h5> #3 </h5>
</div>
</div>
I cant seem to get this to work. I'm trying to convert a javascript bookmarklet into a javascript onclick function to zoom in on images in the page.
The bookmarklet is as follows...
javascript:(function(){ function zoomImage(image, amt) { if(image.initialHeight == null) { /* avoid accumulating integer-rounding error */ image.initialHeight=image.height; image.initialWidth=image.width; image.scalingFactor=1; } image.scalingFactor*=amt; image.width=image.scalingFactor*image.initialWidth; image.height=image.scalingFactor*image.initialHeight; } var i,L=document.images.length; for (i=0;i<L;++i) zoomImage(document.images[i], 2); if (!L) alert("This page contains no images."); })();
But this is what I have so far but is not working properly...
The JS:
(function vbZoom() {
function zoomImage(image, amt) {
if (image.initialHeight == null) {
image.initialHeight = image.height;
image.initialWidth = image.width;
image.scalingFactor = 1;
}
image.scalingFactor *= amt;
image.width = image.scalingFactor * image.initialWidth;
image.height = image.scalingFactor * image.initialHeight;
}
var i, L = document.images.length;
for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
if (!L) alert("This page contains no images.");
})();
The Link: (from an image)
<img id="vZoomIn" onclick="vbZoom()">
Please help, anyone.
EDIT: I should note... it partially works. What it currently does is makes images on the page twice as big upon loading but then the button does nothing at all.
Wrapping the function in those brackets means it's called immediately and not available outside the brackets, known as Immediately-invoked function expression, change it to
function vbZoom() {
function zoomImage(image, amt) {
if (image.initialHeight == null) {
image.initialHeight = image.height;
image.initialWidth = image.width;
image.scalingFactor = 1;
}
image.scalingFactor *= amt;
image.width = image.scalingFactor * image.initialWidth;
image.height = image.scalingFactor * image.initialHeight;
}
var i, L = document.images.length;
for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
if (!L) alert("This page contains no images.");
}
Actually there's a lot that should probably be changed in the code however that should at least work and be available to the rest of the page and not automatically called.
You can use fancybox
use Jquery then use fancybox css & js
use the fancy box html given below, it help to zoom your image as much you want.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css">
<a class="hidden-md hidden-lg" href="https://bdtender.com/tenderimage/Feb04/Feb04_BT040221-2A.jpg" data-fancybox="images" data-caption="My caption">
<img src="https://bdtender.com/tenderimage/Feb04/Feb04_BT040221-2A.jpg" style="width:100%; height:auto;" alt="" />
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js">
</script>
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
}
modal.onclick = function() {
img01.className += " out";
setTimeout(function() {
modal.style.display = "none";
img01.className = "modal-content";
}, 400);
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
display: block;
margin-left: auto;
margin-right: auto
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 75%;
//max-width: 75%;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
.out {
animation-name: zoom-out;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(2)}
}
#keyframes zoom {
from {transform:scale(0.4)}
to {transform:scale(1)}
}
#keyframes zoom-out {
from {transform:scale(1)}
to {transform:scale(0)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<img id="myImg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/journey_start_thumbnail.jpg" alt="Trolltunga, Norway" width="500" height="300">
<!-- The Modal -->
<div id="myModal" class="modal">
<img class="modal-content" id="img01">
</div>