I'm making an e-commerce website, where i'm allowing a user to upload up to 3 images of the item that the user is willing to sell, the images are displayed in a caroussel and are stored in my database.
I'm using foreach php loop to display all the images in a caroussel, the problem is that, it's working only for the first image (normally displayed), and once i click on "next", everything disapeers from the other items except the one i'm browsing.
if($total_row > 0)
{
foreach( $result as $row ){
$output .= '
<div class="box product item">
<div class="product__img">
<div class="slideshow-container">
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image1"].'" style="width:100%">
</div>
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image2"].'" style="width:100%">
</div>
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image3"].'" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<div class="product__details">
<div class="product__details__title">
<h4>'.$row["name"].'</h4>
</div>
<div class="product__details__price">
<h3 " class="text-danger">'.intval($row["price"]).' دج' .'</h3>
</div>
</div>
<div class="product__contact">
<hr class="style11">
<i class="far fa-envelope"></i>
<input class="product__contact__btn" type="submit" value=" Contacter vendeur"><br><br>
<input class="product__contact__comparateur" type="checkbox" name="comparateur" value="comparateur"> Ajouter au comparateur <br>
</div>
</div>
';
}
}
And this is the JS i'm using for the caroussel:
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");
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";
}
DB:
Thanks for helping me.
Please note that using carousel for each product items with different images requires unique id or class ("mySlides"), as it seems all of your product images are using same carousel class that is why clicking on one product next button is affecting the other products items also which are using same class for carousel, so try identifying the click on current item container only so it won't affect other products with same carousel class.
I think you are not storing 3 images into database kindly check that images are being store are not.Then try to store images through loop against every product.
I think this is the issue.
Hope so this will help you.
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";
}
So I am creating a simple project gallery, and to do so I followed a W3schools tutorial on making a photo gallery and converting this to my needs. However with that tutorial the number of items is predefined, for mine, it is connected to MongoDB using Nodejs and stuff.
The original tutorial follows this html scheme:
<div class="section-projects-main-container">
<!-- Full-width images with number text -->
<div class="section-projects-project-container">
<div class="section-projects-project-title">Great Tree 1</div>
<div class="section-projects-project-date">21<span id="slashs">/</span>69<span id="slashs">/</span>4200</div>
<img class="section-projects-project-img" src="tree.jfif">
<div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>
<button class="section-projects-project-btn">Learn More</button>
</div>
<div class="section-projects-project-container">
<div class="section-projects-project-title">Great Tree 2</div>
<div class="section-projects-project-date">21/21/21</div>
<img class="section-projects-project-img" src="tree2.jfif">
<div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>
</div>
<!-- Next and previous buttons -->
<a class="section-projects-btn-prev" onclick="plusSlides(-1)">❮</a>
<a class="section-projects-btn-next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnail images -->
<div class="section-projects-thumbnail-mtitle">Other Projects</div>
<div class="section-projects-thumbnail-row">
<div class="section-projects-thumbnail-col" >
<img class="section-projects-thumbnail-img cursor" src="tree.jfif" onclick="currentSlide(1)" alt="The Woods">
<h3 class="section-projects-thumbnail-title">Project Title 1</h3>
<h4 class="section-projects-thumbnail-date">21/69/4300</h4>
</div>
<div class="section-projects-thumbnail-col">
<img class="section-projects-thumbnail-img cursor" src="tree2.jfif" onclick="currentSlide(8)" alt="Cinque Terre">
<h3 class="section-projects-thumbnail-title">Project Title 2</h3>
<h4 class="section-projects-thumbnail-date">21/69/4200</h4>
</div>
</div>
</div>
And the JS used was :
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n = id) {
showSlides(slideIndex = id);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("section-projects-project-container");
var column = document.getElementsByClassName("section-projects-thumbnail-col");
var dots = document.getElementsByClassName("section-projects-thumbnail-img");
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++) {
column[i].className = column[i].className.replace(" active", "");
column[i].style.display = "inline-block";
}
slides[slideIndex-1].style.display = "inline-flex";
column[slideIndex-1].className += " active";
column[slideIndex-1].style.display = "none";
}
So the onclick was passed into <img> of each thumbnail image, and the specific order of the thumbnail was listed into it's parameter as such currentSlide(n).
Now with EJS, the html is as such :
<div class="section-projects-main-container">
<% projectdetails.forEach(project => { %>
<!-- Full-width images with number text -->
<div class="section-projects-project-container">
<div class="section-projects-project-title"><%= project.projectName %></div>
<div class="section-projects-project-date"><%= project.projectDate %></div>
<img class="section-projects-project-img" src="data:<%=project.img.contentType%>;base64,<%=project.img.data.toString('base64')%>">
<div class="section-projects-project-description"><%= project.projectDescription %></div>
<button class="section-projects-project-btn">Learn More</button>
</div>
<% }) %>
<!-- Next and previous buttons -->
<a class="section-projects-btn-prev" onclick="plusSlides(-1)">❮</a>
<a class="section-projects-btn-next" onclick="plusSlides(1)">❯</a>
<!--Thumbnail images-->
<div class="section-projects-thumbnail-mtitle">Other Projects</div>
<div class="section-projects-thumbnail-row">
<% projectdetails.forEach(item => { %>
<div class="section-projects-thumbnail-col" >
<img class="section-projects-thumbnail-img cursor" src="data:<%=item.img.contentType%>;base64,<%=item.img.data.toString('base64')%>" onclick="currentSlide()" alt="The Woods">
<h3 class="section-projects-thumbnail-title"><%= item.projectName %></h3>
<h4 class="section-projects-thumbnail-date"><%= item.projectDate %></h4>
</div>
<% }) %>
</div>
</div>
But I am not sure how to pass the _id of each project into the thumbnail onclick function. I have tried sending the _id into the html <div id="hiddendiv" style="color: white; display: none; position: relative;"><%=project.id %></div> and then retrieving this value via JS and running the function as such. But this does not work properly.
Is there any solution to this? and if not what is the next possible way to make the currentSlide() function without a variable being needed?.
THank you
I would probably skip using a hidden div as some sort of data keeper. Use data-id attribute instead: data-id="<%=project.id %>"
Or on the other hand, why not just do onclick="currentSlide(<%= project.id %>)"?
I would gladly like to help you more, but I don't know what's the point of the JavaScript above and what it should do.
Also, I would probably add an event click listener to every <div class="section-projects-project-container"> and then in the JavaScript got the data-id using: getAttribute('data-id'). You can get the element that called the function using this so you could probably then do:
this.getAttribute('data-id')
Edit:
Well, if it's really that similar to that W3 example - why not just do this?
<% for (var i = 0; i < projectdetails.length; i++) { %>
<div class="section-projects-thumbnail-col">
<img
class="section-projects-thumbnail-img cursor"
src="data:<%= projectdetails[i].img.contentType %>;base64,<%= projectdetails[i].img.data.toString('base64') %>"
onclick="currentSlide(<%= i %>)"
alt="Alternate text"
/>
<h3 class="section-projects-thumbnail-title"><%= projectdetails[i].projectName %></h3>
<h4 class="section-projects-thumbnail-date"><%= projectdetails[i].projectDate %></h4>
</div>
<% } %>
Hopefully it works, but the principle is clear
this is output
how to separate it to different place like top left and bottom right something?
the dots of second slide can't run properly and it will display the dot of slide 1 also...
the next button of this two slide mix together already, when i click the next button at third picture, it will go to second slide but no move back to first picture ...
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("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";
}
<body>
<div class="slideshow-container">
<div class="mySlides 1">
<div class="numbertext">1 / 3</div>
<img src="special14-double-black.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides 1">
<div class="numbertext">2 / 3</div>
<img src="images.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides 1">
<div class="numbertext">3 / 3</div>
<img src="Taroball Shiruko.jpeg" style="width:100%">
<div class="text">Caption 3</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>
<div class="slideshow-container">
<div class="mySlides 2">
<div class="numbertext">1 / 3</div>
<img src="Sesame Supreme.jpeg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides 2">
<div class="numbertext">2 / 3</div>
<img src="Bestseller 'Cold'.jpeg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides 2">
<div class="numbertext">3 / 3</div>
<img src="Bestseller 'Hot'.jpeg" style="width:100%">
<div class="text">Caption 3</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>
</body>
#yandy. Your JavaScript code appears to be working but I see several problems.
You have two slideshows. I am unsure why you have two slideshows at once. Is there any reason for that?
Your images are not all different. That could explain the problems you are describing switching between them (if I understand you correctly).
I got your slideshow code to work by removing one of the slideshows and structuring the logic you have to check if the slide goes out of the bounds of the index position of your slides like so:
if (n > slides.length) {slideIndex = 1}
else if (n < 1)
{slideIndex = (slides.length)}
You are missing an ending </body> tag also in your HTML.
I think that one of your biggest problems though is that you have both sets of controls (previous and next buttons/dots) targeting the same class name (mySlides), and it is moving through slides from both slideshows at once.
If you wanted, you definitely could have two separate slideshows, and one way to do so might be to give each slideshow different id selector names on the parent div (e.g. id='slideshow-container1', & id='slideshow-container2'). Then you might store the value of the parent container id (containing your slide show) when clicking the appropriate next/previous buttons. Then do a check of which slideshow is the one that you need to shift slides on.
It is tough for me to understand what you are trying to accomplish aside from getting the slideshow to work. Can you please elaborate and I or someone else will work to help you? Also, can you edit your question to include a JavaScript tag because it is more than html that you need help with?
EDIT
#yandy if you want to do something similar to what you have already with two different slideshows, and assuming that you are only going to have 3 slides in each slideshow (as you have already stated in your responses), you could do something like the following example I am providing below.
I added comments to the JavaScript explaining each piece so I hope that makes sense to you. I broke out portions of your showSlides function into more functions and added comments to all of them.
This is not exactly an ideal solution since the way you have done this is not how I would personally choose to code this, but I wanted to give you an example of how to make this work with what you already have.
If you want to learn more about how to do this in a better way, I recommend picking up a good book that covers the fundamentals of JavaScript like Eloquent JS (https://eloquentjavascript.net) or to read through the 'Get Started' book/chapters of the You Don't Know JS at their Github repo which you can access here: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md
These books are excellent resources to learn more about JavaScript and to be able to understand how to make all sorts of useful and fun projects with it!
You also might do a search on your favorite search engine for a good tutorial on 'vanilla JavaScript slideshow tutorial'. I am not sure what resources you have already been looking at, but when posting to StackOverflow it is a good idea to include examples of code/tutorials you are following along with or trying to replicate & incorporate into your own project when asking a question.
<body>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://images.pexels.com/photos/207691/pexels-photo-207691.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://images.pexels.com/photos/1366942/pexels-photo-1366942.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://images.pexels.com/photos/1366944/pexels-photo-1366944.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 3</div>
</div>
<div id="control">
<a class="prev" onclick="plusSlides(-1, this)">❮</a>
<a class="next" onclick="plusSlides(1, this)">❯</a>
</div>
<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>
</div>
<hr>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://assets.imgix.net/unsplash/moon.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://assets.imgix.net/unsplash/astronaut.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://assets.imgix.net/unsplash/bridge.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 3</div>
</div>
<div id="control">
<a class="prev" onclick="plusSlides(-1, this)">❮</a>
<a class="next" onclick="plusSlides(1, this)">❯</a>
</div>
<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>
</div>
</body>
<script>
var slideIndex = 1;
//pass null on initial load which meets the first condition of the if statement in showSlides
showSlides(slideIndex, null);
//changed to pass elem (this in HTML above)
function plusSlides(n, elem) {
showSlides((slideIndex += n), elem);
}
//I have not tested this but it looks reasonable (if the dots are visible)
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n, elem) {
// var i; commented this out because it is unnecessary
var slides;
//this is for the first initialization/first loading of the slide shows when you aren't passing anything as 'elem' (elem = null).
if(elem === null)
{
slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
}
else {
//this is for when 'this' is passed into the showSlides function (in the HTML above)
// get appropriate slide show regardless of which arrow controls are selected
var parental = elem.parentNode;
var outerParent = parental.parentNode;
slides = outerParent.querySelectorAll('.mySlides');
var dots = outerParent.getElementsByClassName("dot");
}
//call prevNext function passing n and slides
prevNext(n, slides);
//call slideDisplay function
slideDisplay(slides);
//call dotActive function
dotActive(dots);
}
//new function to move between slides
function prevNext(n, slides){
if (n > slides.length) {slideIndex = 1}
else if (n < 1)
{slideIndex = (slides.length)}
}
//new function to display slides
function slideDisplay(slides){
for (i = 0; i < ((slides.length)); i++) {
slides[i].style.display = "none";
}
//this displays the appropriate slide in most instances
slides[slideIndex-1].style.display = "block";
//this only applies to the second slide show when first loaded (since there are only three images)
if (slides.length > 3) {
slides[3].style.display = "block";
}
}
//this function controls which dots are active
function dotActive(dots){
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex-1].className += " active";
}
</script>
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);
});
}
I have been researching trying to figure out why its doing this, maybe I just dont understand modals. IDK.
Anyways what is happening is I started with a light box: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox
and changed the body to:
<body>
<h2 style="text-align:center">Title</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%"
onclick="openModal();currentSlide(1)"
class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
</div>
to create a single image in the modal, and to scroll through it. I love it, and I thought that it would solve my issue. Alas
When I implemented it in my web page it worked. but then I copied and pasted, and it in another area of the page, changed the images, but it is still showing the original images from the first modal. So I dont know where to turn.
I have 0 experience in jscript, jquery. (those classes are yet to come in my schooling...).
I was thinking:
1.) have the images on an external html page and import that I have looked at AJAX, but im confused. (dont necessarily want to use bootstrap)
I have looked at these resources, and they kinda help but again, I dont know how to craft them to my needs.
using Bootstrap
modals, nonimported html
modals
See the Pen Work issue by Michael Barnhouse (#Kardee785) on CodePen.
So as Curious 13, and Nate Whittaker Suggested I needed to make each section have its own unique Id. I had posted that that didn't work, and the reason it didnt work was because my .js wasnt reading/importing what to display. So I had to create a var in js (named modalId), and then call that information into the opening, closing, and navigating of the modal.
Here is the .js, I had one of my friends help me with.
function openModal(modalId) {
document.getElementById(modalId).style.display = "block";
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(modalId, n) {
showSlides(modalId, slideIndex += n);
}
function currentSlide(modalId, n) {
showSlides(modalId, slideIndex = n);
}
function showSlides(modalId, n) {
var i;
var modal = document.getElementById(modalId);
var slides = modal.getElementsByClassName("mySlides");
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;
}