Creating a modal previous and next interaction for images - javascript

I am having trouble adding a functioning previous and next button to my modal windows to allow users to navigate through my images without clicking the X and finding the next image. Here is my website link to see and how everything is set out. http://monospaced.co.uk/
I have been struggling for months, my last test I managed to get the previous and next buttons, but they were sitting on the main page when i need them inside of the modal window for each image, and it wouldn't switch. Thanks, for taking the time to help. (if anyone does!)
I am a designer so while it's probably simple to create a previous and next button for your images inside a modal window, I am not sure how to do it without starting from scratch as I wouldn't understand what to change in my code without breaking the website.
Sorry I couldn't get the code into the question. I would really appreciate help, but I understand If it's too much effort because my question is trash...

Related

can't properly implement a MODAL (beginner)

Ive been stuck on this for a while now.
I have an API of a LIST that I want to display, each one of the objects on the list needs to be cliackable and a MODAL should appear with the LIST OBJECTS info ''pokemon height'', 'pokemon name'' and ''pokemon type''. The MODAL should also be CLOSED when clicking ESC or outside of the MODAL.
The thing is, I believe I added all the codes correctly but everytime I find an error, or the list simply disappears. I fix an error and another one appears, when there is no errors it simply just doesn't work. I am sorry if that is a rather simple thing to do but I am brand-new to programming and I am trying to learn.
It just seems that everytime I ''correct'' something, I get further away from the correct way of doing it. PLEASE if somebody could take a look in what I've done and give me some tips or point what should be done here. THANKS
HERE IS THE LINK TO MY "PROJECT":
added functions to loadDetails, loadList, addListItem (it worked)
then by adding the MODAl, CLOSE MODAL, HIDE MODAL, it just doesnt answer accordingly

Multiple buttons function to expand and hide div section with javascript

Hope everyone is having fun on this fun (or frustrating šŸ˜‚ like me) coding day. So, I came across a problem and was hoping someone could help guide me to the right solution. I want to set it so that when I click on the ā€œread moreā€ button, it adds the ā€œactiveā€ class and would expand the paragraphs.
I was able to do a loop function for multiple buttons on the page, but when I click on one, it affects all the buttons. I know this is a looping problem but I have not figured out a way to solve it.
What Iā€™m trying to do is basically only have the button I click on add the class, without it working on all the buttons on the webpage. I intend to add more buttons to the page, so if anyone has a better solution or knows of a looping method (cause Iā€™m pretty sure the looping Iā€™m using is the wrong way), please help.
Please see the video for what I mean when I click on one button, both buttons get affected by it.

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

I need users to proceed to the next page on mouseover in javascript with turn.js

I'm having a problem with the turn.js api.
Rather than using this for a book, I'm trying to use it for an ad I'm developing. Basically, I want to have the first page immediately 'uncover' the second page when the user hovers over the page, but can pull from the corner on page 2 (as normal) to go back to the first.
I'm thinking that I could set a function of onmouseover to mousedown or something like that. Or maybe something totally different.
Any help would be appreciated. Thanks.

Image gallery that refreshes page

I want to build or find a image slider/gallery that will refresh the page whenever the next button is clicked (to increase page views/impressions). I know that it is possible to refresh the page on click with JavaScript or Jquery but the problem is that the JavaScript is reset and begins at the first slide. I read that it may be possible to achieve this by storing the active slide variable in a cookie. Does anyone know of a gallery that does this? or something similar that I could reference? or any other way I can achieve the desired result?
I think you just need to add this function to your next button (when clicked):
location.reload();
Hope it solved the problem, best regards :)
EDIT: Sorry, yes it does reset the slide. What if you create an HTML gallery? you won't have any problem, and I find it easier / quickier... Sorry for not solving your problem...

Categories