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);
});
}
Related
I have two slider section with same class.
Each of them has 3 images.
But all 6 image show one by one.
How display two slider with 3 images as same time?
I can't and I don't want to change their classes.
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 1000);
}
</script>
something like this?
function eventedSlider_(){
document.querySelectorAll('.slide_container:not(.evented)')
.forEach(function(container_){
container_.classList.add('evented');
let items_ = container_.querySelectorAll('.slide_item');
if( items_.length ){
let i = 0;
setInterval(function(){
items_.forEach(function(item_){ item_.classList.remove('active'); });
items_[i].classList.add('active');
i = i+1 < items_.length ? i+1 : 0;
},1000);
}
});
}
eventedSlider_();
.slide_item{
width:20px;
height:20px;
margin:4px;
background:gray;
}
.slide_item:not(.active){
display:none;
}
<div class="slide_container">
<div class="slide_item">a</div>
<div class="slide_item">b</div>
<div class="slide_item">c</div>
</div>
<hr />
<div class="slide_container">
<div class="slide_item">d</div>
<div class="slide_item">e</div>
<div class="slide_item">f</div>
</div>
<hr />
<div class="slide_container">
<div class="slide_item">g</div>
<div class="slide_item">h</div>
<div class="slide_item">i</div>
<div class="slide_item">j</div>
<div class="slide_item">k</div>
</div>
//JS page one
let box = document.getElementsByClassName("box");
//click event
box[0].addEventListener("click", fn1);
box[1].addEventListener("click", fn2);
box[2].addEventListener("click", fn3);
box[3].addEventListener("click", fn4);
//show description at click and hide "click for info"
function fn1() {
window.location = 'carousel.html';
}
function fn2() {
window.location = 'carousel.html#2';
}
function fn3() {
window.location = 'carousel.html';
}
function fn4() {
window.location = 'carousel.html';
}
//JS page two
/*lightbox code*/
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");
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";
}
<!--HTML PAGE ONE-->
<div id="container">
<!--one-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/1.jpg">
<p class="showText"></p>
</div>
<!--two-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/2.jpg">
<p class="showText"></p>
</div>
<!--three-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/3.jpg">
<p class="showText"></p>
</div>
<!--four-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/4.jpg">
<p class="showText"></p>
</div>
</div>
<!--HTML PAGE 2 - CAROUSEL-->
<div id="lightbox">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img class="image" src="images/paintings/1.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img class="image" src="images/paintings/2.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img class="image" src="images/paintings/3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img class="image" src="images/paintings/4.jpg">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
I was wondering if it is possible to show the desired image in page 2 Html based on what is clicked in page 1 Html. I know a solution could be to create an HTML page for each photo I want to show on click: I should just change the windows.location of the addEventListener and then in the JS file set the number corresponding to the slideIndex but it would be really good to find a solution without duplicating the pages. I hope I was clear
I found a good alternative. Basically in Html page one I assigned an id to each image and in js page one in the fn1, fn2, fn3 and fn4 window.location I added the hash of the relative id eg: (window.location = 'carousel.html#1'). Then in js page 2 I added the following code:
window.addEventListener('load', (event) => {
if(location.hash === "#1") {
currentSlide(1)
}
if(location.hash === "#2") {
currentSlide(2)
}
if(location.hash === "#3") {
currentSlide(3)
}
if(location.hash === "#4") {
currentSlide(4)
}
})
to avoid a possible slow loading in the css file I added a loading gif as a background image in the .image class
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 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>
I want to make javascript slideshow who will change automaticly + on click.
Here is code so far (changes pictures onClick)
slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var 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";
}
Please help!
Here is HTML
<div class = "slideshow_container">
<div class="mySlides fade">
<img src="main_slide/dzive.jpg">
<div class = "slide_text_modules">
<div class="text1">Kristaps Slakters - Zvejsalnieks</div>
<div class="text2">Dzīve kļūst skaistāka,<br> kad satiec savu īsto frizieri</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/keepcalm.jpg">
<div class = "slide_text_modules">
<div class="text1">Kristaps Slakters - Zvejsalnieks</div>
<div class="text2">Keep calm <br>and change your hair!</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/koelju.jpg">
<div class = "slide_text_modules">
<div class="text1">Paulu Koelju</div>
<div class="text2 text_small">Katrai dienai savs brīnums. Tāpēc pieņem <br>
svētību, strādā un radi savus mazos mākslas<br>
darbus jau šodien! Rīt tev taps dāvāts vēl.</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/lopedevega.jpg">
<div class = "slide_text_modules">
<div class="text1">Lope de Vega</div>
<div class="text2">Spēks uzvar spēku,<br> skaistums uzvar visu.</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/slakters.jpg">
<div class = "slide_text_modules">
<div class="text1">Gotholds Efraims Lesings</div>
<div class="text2 text_small">Jo skaistāka ir sieviete, jo godīgākai tai ir jābūt,<br>
jo tikai viņas godīgums spēj novērst to ļaunumu,<br>
ko spēj radīt viņas skaistums.</div>
</div>
</div>
<div class = "arrows arrow_right" onclick="plusSlides(1)">❭ </div>
<div class = "arrows arrow_left" onclick="plusSlides(-1)">❬ </div>
</div>
It would be great if someone could explain how to do that not give just code :)