Navigate through images using next and previous button HTML - javascript

I have an image gallery with a bunch of photos. I have a next and previous buttons next to the image to navigate through the images (Only single image of the gallery is displayed on the page at a time).
On click of this 'next' and 'previous' buttons, the user should be able to navigate to next/ previous image respectively. I am not sure how this could be achieved.
I am new to web development and I am looking for a resource which would help me with the same. Any resource which could guide me through this would be helpful.
Thanks,

I would look at the Jquery library. (Jquery.com) or even some type of plugins. worst case scenario you can dynamically generate divs with unique IDS and then hide and show them based on the id with the buttons.

Related

Change the URL after creating a new page via JS

I have a main page and in it there is an "add" button that adds an image on the screen with each click (like cards).
Each image has an id and a name and they are arranged in an array in order.
Every time the "add" button is pressed I execute the command
var newDoc = createHTMLDocument("image name")
I want to change the default url (about:blank) to something else, for example the name of the image (of course without spaces) so that I can put this URL in the onclick of the image and by clicking on the image, its page will open. I want to change the URL because I had many pages (1 for each image I create).
You have to remember that my main page will have a lot of clickable pictures (cards) and each one has to open its own page.
My main problem right now is that I can't change the URL.
I'm not sure accessing the URL and changing it is the right way to do it, but that's what I thought was needed. (I would love to hear more suggestions if any).
Right now it just generates HTML documents with a default URL that I don't even know how to get to.
In addition, I work on a computer locally that is not connected to any network at all and there is no server. Everything locally!
Many thanks to the helpers

Access Post Content with JS

I've created a lightbox function which loads over the top when a user clicks on a post link in the archive. The overlay needs to display images and short paragraphs of text in a slideshow style (with next and prev buttons), those fields are created with as Advanced Custom Fields flexible repeater.
I'm using JS to .append() a div to the body and I need to then query the post, by ID I guess, within my js to fetch the first value from that ACF repeater, then second, then third and so on, when the next/prev buttons are hit. I'm thinking that I could perhaps quickly grab an array of those values when the lightbox is loaded and then cycle through them, but am not sure where to start.
What I don't want to do is simply .load() the post, headers and all, into the lightbox, just the images (and short peices of text) one at a time.
Any pointers greatly appreciated.
I've got around this issue by storing the information that I need in an array during the initial loop so that when the user clicks on the post I .append() an overlay to the body and then create a slide for .each() of the nodes in that array. The information displayed in each slide is pretty minimal in this case, just an image or a single line of text so this solution works more efficiently than querying the database on each click or lightbox load.

Creating multiple modal windows with same styling but different content?

I have 140 link items that essentially are going to do a modal window of a user profile for each link. I have created a div(the modal window) and styled it but the problem is that the elements on each user profile have to be different. So there is a div containing 3 images which are going to be different for everyone, a profile picture, a paragraph of text and social icons.
What would be the easiest way to make this work? Been looking for some information for couple of hours with no results.
Thank you.
Create a single blank modal (yes, one will do).
Everytime you display content to it, clear the body of the modal first
Load the content you want to display
Show the modal.
Do steps 2 to 4 everytime you want to show it with different content.

Change Tab Link on Click (and Already Active Anchor)

Trying to piece together js knowledge as I go here. But I have a website that will be relying on a tabbed (just 2) concept to flip between the companies two services.
So when navigating to the page, they user will be directed to Company1 and I would like to have a tab of Company 2 on the right. It will be the same domain, just domain.com#company2.
When they navigate to Company 2 directly (via domain.com#company2) I would like the tab on the right to link to Company 1.
So basically, it looks like js is the only way to do this. Something that could read the active id and style the tab accordingly.
The main function would be based on click. So if you click the tab, it switches to the non-active companies tab.
The tab itself will remain the same, all I need to change is the href.
Thanks in advance guys!
I think you could use CSS float :
$("#tab1_id").click(function(){
$(".2tabs_class").css("float","left)
})
$("#tab2_id").click(function(){
$(".2tabs_class").css("float","right)
})
Make sure 2 tabs are inside a div

Adding view count to external links on site

I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .

Categories