I am currently attempting to open a modal for these images. When I click them, nothing happens. My best guess is that it has something to do with the openModal function on the first two lines of the JS file, I think I need to change where it gets the document, but I am not too sure.
function openModal(){
document.getElementById("myModal").style.display = "block";
}
function closeModal(){
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function plusSlides(n) {
showSlides(slideIndex = n);
}
function currentSlides(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for ( i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active ", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
<!--Gallery-->
<section id="gallery">
<div class="container">
<h1>Gallery</h1>
<div class="flex-container">
<!--photo container-->
<div class="photo-container">
<div class="photo">
<img src="images/thumbnail_1.jpg" onclick="openModal();currentSlide(1)" alt="">
<div class="photo-overlay">
<h3>Click to Enlarge</h3>
<p>We have several books fr you</p>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
<div class="mySlides">
<div class="numberText">1 / 9</div>
<img src="images/thumbnail_1.jpg" style="width: 100%;" alt="image 1">
</div>
<!--Thumbnail Image Controls-->
<div class="column">
<img class="demo" src="images/thumbnail_1.jpg" onclick="currentSlide(1)" alt="image">
</div>
Related
I am quite new to coding from scratch, but I am trying to build a very very simple website. And I wanted an image carousel at the start. I already have it coded // I copied some code from a tutorial.
My problem is that, when I open my websites front page the first image doesn't load in, until I either click forwards or backwards. And I want it to load image 1 as soon as the website loads in. Can anyone help me with that?
index.html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
script.js
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let 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";
}
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";
}
Maybe you forgot to copy the "dots"-elements from the tutorial. If you get errors in your console, this could be the reason, why it aborts further execution.
Try to change your HTML as follows:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I added the three "dots"-elements. If you don't want them, you can remove them from the HTML, but you have to remove every JS code that works with the dots variable.
Here is the JS code without the dots handlings:
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
I have this code for the JavaScript image slider:
<div class="container">
<!-- Full-width images with caption text -->
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 1</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 2</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 3</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 4</div>
</div>
</div>
<!-- The dots/circles -->
<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>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
And Js code is :
<script type="text/javascript">
var slideIndex = 0;
showSlides(); // call showslide method
function currentSlide(n) {
console.log(n);
showSlides(slideIndex = n);
}
function showSlides( n ) {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
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";
}
if(!n) {
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, 3000);
}
</script>
It's looping automatically and I want to go to a specific slider on click event. Now, If I click on a specific slider using the dot then the slider is looping too fast !
Is there anything I am wrong? How can I fix it?
Reason why it keeps speeding p is you keep adding more and more timers. You need to cancel timers that may exist when you click.
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
showSlides(slideIndex = n);
}
and when you create the timer
sliderTimer = setTimeout(showSlides, 3000);
I am trying to create a slideshow image gallery by following this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery
I am also using #foreach to get the images. So far, I have managed to get the images and the next/previous buttons are working fine. But I am not sure how to do the onClick part.
here is my code
view/blade
<div class="row">
#foreach ($images as $image)
<div class="mySlides">
<img src="{{ asset($image->image_location) }}" style="width:100%" alt="slide">
</div>
#endforeach
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="row">
#foreach ($images as $image)
<div class="column">
<img class="demo cursor" src="{{ asset($image->image_location) }}" style="width:100%" onclick="currentSlide(1)" alt="Image not Available">
</div>
#endforeach
</div>
script
var slideIndex = 1;
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("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
Inside the blade #foreach loop, a $loop variable is available, as described here: https://laravel.com/docs/7.x/blade#the-loop-variable
You may use $loop->index to access the index of your thumbnail image in the array, and use that in the onclick event:
onclick="currentSlide({{ $loop->index }})"
Web console from the pageI have a simple website based on PHP platform, then I decided to add an automatic JavaScript slider on one of the specific page, before then that the side link works fine but when automatic slide show kicks in the side link doesn't work. Again i removed the slideshow code then it again works fine? My question is how can i make the js slideshow and side link work?
I have tried searching the queries, played with divs and tags but couldn't find the solution
<div id="slide">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<tr>
<td>
<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>
<span class="dot" onclick="currentSlide(4)"></span>
<script>
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
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, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
</div>
</td>
</tr>
</div>
</td>
</tr>
I want my side navigation link to be working with slideshow, when slideshow loads as the side link doesnot navigate me to other page.
So I'm building this webpage and I have some photos for slideshow inside divs that open up a modal. I want to get all children of clicked div (myModal). I want to get all divs with class "mySlides" who are the children of a click div with class "myModal". This is my code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
console.log(slides);
var dots = document.getElementsByClassName("dot1");
if (n > 3) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active1", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active1";
}
<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg">
<a class="myBtn" onclick="getSlides()"></a>
<div class="myModal modal1">
<!-- Modal content -->
<div class="modal1-content">
<span class="close1">×</span>
<h2>smth</h2>
<div class="post1-container">
<div class="post1-thumb">
<div class="slideshow1-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis slike1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike3</div>
</div>
<button class="prev1" onclick="plusSlides(-1)">❮</button>
<button class="next1" onclick="plusSlides(1)">❯</button>
</div>
<br>
<div style="text-align:center">
<span class="dot1" onclick="currentSlide(1)"></span>
<span class="dot1" onclick="currentSlide(2)"></span>
<span class="dot1" onclick="currentSlide(3)"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried using $(this).children but no luck like that:
function getSlides() {
var slides1 = $(this).children('img').attr('src');
console.log(slides1);
}
How can I achieve this? I have multiple reference items in my page all with different 3 images to show on modal open. But I want to select only those that are children to the clicked element (as now it returns me all "mySlides" divs).
You can remove onclick="getSlides()" from DOM and Use this Jquery
$('.myBtn').off().on('click',function(){
$(this).next('.myModal').find('.mySlides').each(function(i,v){
console.log($(v)[0].outerHTML);
});
});
Look at this. You have to pass getSlides(var) a new variable postContainer. In this case is: <div class="post1-container">
function getSlides(postContainer) {
$('.'+postContainer+' .mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}
Lets start again:
Using the self object to find the slides
<a class="myBtn" onclick="getSlides($(this))"></a>
//Pass the object to the function
function getSlides(dis) {
//Search from the object, the nexts .mySlides
$(dis).next().find('.mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}