I require limitless onclick functionality, but unfortunately, transitions are not functioning as expected

I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed...

  1. The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle multiple clicks.

  2. My image transitions aren't functioning as expected - they move instantaneously instead of smoothly transitioning, and this disrupts the aesthetic appeal. I require smooth transitions to enhance the overall look of the gallery.

Fiddle : http://jsfiddle.net/0Lg891p0/

<!DOCTYPE html> 
<html lang="cs-CZ"> 
    <head>
        <meta charset="UTF-8"> 
        <meta name="generator" content="John_Doe">
        <link rel="stylesheet" href="Web.css">
        <title>John Doe</title>
    </head>
    <body>
        <div id="web">
            <div id="gallery">
                <div id="photos">
                    <img id="photo1" src="photo1.jpg" alt="photo1" />
                    <img id="photo2" src="photo2.jpg" alt="photo2" />
                    <img id="photo3" src="photo3.jpg" alt="photo3" />
                </div>
                <div id="arrow_left" class="animation1"></div>
                <div id="arrow_right" class="animation2"></div>
                <script>
                    document.querySelector('.animation1').onclick=function() {
                        var d = document.getElementById("photo1");
                        d.className = d.className + " fly1";
                        var t = document.getElementById("photo2");
                        t.className = t.className + " fly1";
                        var t = document.getElementById("photo3");
                        t.className = t.className + " fly1";
                    }
                </script>
                <script>
                    document.querySelector('.animation2').onclick=function() {
                        var d = document.getElementById("photo1");
                        d.className = d.className + " fly2";
                        var t = document.getElementById("photo2");
                        t.className = t.className + " fly2";
                        var t = document.getElementById("photo3");
                        t.className = t.className + " fly2";
                    }
                </script>
            </div>
        </div>
    </body>    
</html>

CSS

#web {
    background-color: #FF0;
    height: 700px;
    width: 1500px;
}
#gallery {

}
#photos {

}
#photo1 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 500px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#photo1.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#photo1.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#photo2 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 200px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#photo2.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#photo2.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#photo3 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 800px;
    border: solid 10px;
    z-index: 1;
    display: block;
    transition: ease-in-out 1s;
}
#photo3.fly1 {
    position: absolute;
    left: 300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#photo3.fly2 {
    position: absolute;
    left: -300px;
    top: 8px;
    transition: ease-in-out 1s;
}
#arrow_left {
    width: 50px;
    height: 50px;
    background-color: #F00;
    margin-top: 450px;
    margin-left: 470px;
    position: absolute;
    z-index: 10;
}
#arrow_right {
    width: 50px;
    height: 50px;
    background-color: #F00;
    margin-top: 450px;
    margin-left: 800px;
    position: absolute;
    z-index: 10;
}

Answer №1

To resolve one issue, ensure you remove old classes before adding new ones to elements in order for the click function to work consistently. Here's an example in your code:

<script>
    document.querySelector('.animace1').onclick = function () {
        document.getElementById("fotka1").className = "fly1";
        document.getElementById("fotka2").className = "fly1";
        document.getElementById("fotka3").className = "fly1";
    };
    document.querySelector('.animace2').onclick = function () {
        document.getElementById("fotka1").className = "fly2";
        document.getElementById("fotka2").className = "fly2";
        document.getElementById("fotka3").className = "fly2";
    };
</script>

Another problem causing a "sudden jump" effect is conflicting CSS styles. Simplify it with the following adjustments:

#fotka1 {
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: 300px;
    margin-left: 500px;
    border: solid 10px;
    z-index: 1;
    display: block;
    top: 8px;
    left: 0px;
    transition: ease-in-out 1s;
}
#fotka1.fly1 {
    left: 300px;
}
#fotka1.fly2 {
    left: -300px;
}

View updated code on jsfiddle: http://jsfiddle.net/0Lg891p0/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for rearranging a span following an image?

Looking for a solution to rearrange a span element after an image within automatically generated HTML. Sample HTML: <span>closed</span> <img alt="Click to reset" src="xxx" class=""> Currently, the span appears before the img in the cod ...

Online application for saving a vast quantity of information on the user's device

Is there a way for a web application to store an extensive amount of data client-side, allowing for millions of records to be accessed offline by users exclusively on Chrome? I initially considered indexedDb, but I discovered it becomes almost unusable wi ...

Tips for successfully including a forward slash in a URL query string

My query involves passing a URL in the following format: URL = canada/ontario/shop6 However, when I access this parameter from the query string, it only displays "canada" and discards the rest of the data after the first forward slash. Is there a way to ...

Is there another option besides PHP not being compatible with JavaScript?

I'm looking to dynamically change the properties of a div, so I've turned to using the jquery.keyframes plugin. The second class currently has a low-res blurred background image from the croploads directory. Now my goal is to switch it out for a ...

How odd! Using window.location or location.replace redirects to the page and then reverses back!

While in debug mode, I am able to track which page is being accessed. Interestingly, whenever I use window.location or window.location.replace(..), the browser redirects to the specified page but then quickly returns to the original one! This strange beh ...

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

Received the error message "Material-UI: capitalize(string) expects a string argument" while implementing the snackbar feature in a React Material-UI project

While working with Material-UI, I came across an issue with the snackbar where I received an error message saying: Error: Material-UI: capitalize(string) expects a string argument. Here's a snippet of my code: this.state = { snackBarOpenVer ...

Implementing Bootstrap 4 accordions within a Knockout foreach loop, adjusting the icon upon expansion/collapse dilemma

I have a collection of collapsible sections within a main collapsible section like: <div id="parentAccordion" class="card-accordion"> <div class="card"> <div class="card-header bg-black text-white pointer-cursor"> ...

Leveraging the power of node pkg to generate standalone executables while configuring npm

I have successfully used pkg to create an executable file for my node js application. Everything is working fine in that aspect. However, I am also utilizing the config module to load yaml configuration files based on the environment. During the packaging ...

Having difficulties with hovering over a td that has a rowspan

I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...

When jQuery fails to detach() due to the presence of an input tag

I have a situation where I am trying to rearrange elements within a table. Everything works fine, until I introduce a tag, which triggers this error message:</p> <pre><code>Error: this.visualElement is undefined Source File: http://192. ...

The response parser in Angular 7 is failing to function correctly

Hey, I recently updated my Angular from version 4.4 to the latest 7 and after encountering several errors, I was able to get my service up and running. However, I'm facing an issue with my output parser function which is supposed to parse the login re ...

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

Should You Ajaxify Your Website?

Absolutely loving the way Ajax can transform a web app into something that performs like a desktop application. The concern, however, arises when dealing with high volume sites. Currently working on an intranet-based database app meant for only 2-4 users a ...

Step-by-step guide on populating a state using an array

I am having trouble populating a list within a state using the set method, as the state remains empty App.js // Initiates the secrets word game const startGame = () => { // pick word and pick category const { word, category } = pickWordAndCat ...

What steps should be taken to address the issue when the .media$thumbnail.url cannot be located

Creating a custom widget for bloggers <script type="text/javascript"> function mycallback(jsonData) { for (var i = 0; i < jsonData.feed.entry.length; i++) { for (var j = 0; j < jsonData.feed.entry[i].link.length; j++) { ...

Exploring SubjectBehavior within my UserService and Profile Component

Within my ShareService, I have the following code snippet: isLogin$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); <==== default value is false CheckUser = this.isLogin$.asObservable(); public isLogin (bool){ ...

What is the best way to insert my words within the boundary?

I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! li { list-sty ...

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...