The functionality of the photo swipe feature in HTML is currently not functioning as intended

I have been struggling to integrate photoswipe.js for swiping images in my project, but unfortunately the swipe functionality is not working as expected.

head

<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js">       </script>


 <script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);

function onDeviceReady() {
   // related functions
     alert("check");
   $("#Gallery a").photoSwipe();
} 
(function(window, PhotoSwipe){

    document.addEventListener('DOMContentLoaded', function(){

        var
            options = {},
            instance = PhotoSwipe.attach(    window.document.querySelectorAll('#Gallery a'), options );

    }, false);


}(window, window.Code.PhotoSwipe));

</script>

body

<ul id="Gallery" class="gallery">
<li><a href="img/img1.jpg"><img src="img/img1.jpg" rel="external" alt="" />   </a></li>
<li><a href="img/img2.jpg"><img src="img/img2.jpg" rel="external"  alt="" /></a></li>

</ul>

If anyone can provide insights on where I might have gone wrong, it would be greatly appreciated. Thank you in advance!

Answer №1

It appears that the cordova loading may have finished before the DOM is fully loaded. To fix this issue, consider adding the following line inside the document load function: document.addEvenListener("deviceready", onDeviceReady, true);

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

Parsing JSON data using a regular expression

Within my JavaScript file lies a plethora of object literals: // lots of irrelevant code oneParticularFunction({ key1: "string value", key2: 12345, key3: "strings which may contain ({ arbitrary characters })" }); // more irrelevant code My ta ...

"Enhance your table by adding a new row using user input in

I am just starting out with JavaScript and facing a challenge. I have created an HTML form to gather user input, with a submit button. My goal is to take the input values and add them as a new row in a table when the form is submitted. I have been strugg ...

Utilizing Javascript executor for selecting radio buttons

Having trouble selecting the 'Yes' and 'No' options on a page, I attempted to use JSExecutor since the normal 'Click()' function was not working. The issue is that while it is able to select the options, the value is not being ...

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

A different approach to achieve the same design using CSS

Looking to create a layout where each row displays identical images with unique content in HTML/CSS. I have successfully used tables in HTML and CSS to accomplish this task, but I am curious if there are better practices for creating such a design. The go ...

Angular: Generating components dynamically in HTML is unsuccessful

I possess the capability to dynamically generate components: import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { FilterComponent } from '../filter ...

Ways to merge duplicate entries in an html table?

As a junior developer working on my first project, I am currently struggling with creating a stats page for my application. My main issue is how to display the data in a user-friendly manner. After looking at similar applications, I noticed that they used ...

Tips for concealing uib-popover when clicking outside of the popover in Angular JS

<button class="btn btn-default blue btn-lg h-ask btn-block" popover-placement="bottom" uib-popover-template="popover_home.templateUrl">ASK</button> In the code snippet above, there is an angular js popover implementation within an html templat ...

Could this be a problem with synchronization? Utilizing Google Translate to link-translate terms

Trying to create a script that will show how a word changes through multiple translations using Google Translate, but struggling with Javascript. The problem I'm facing is hard to pinpoint: function initialize() { var word = "Hello"; var engl ...

Font family 'anticon' is not recognized

While following a coding tutorial on YouTube, I encountered an error message that has me stumped. Despite having the correct import statement and dependency installed, the issue persists. Error message in iOS simulator: https://i.stack.imgur.com/LOVCQl. ...

Issue with inconsistent indentations in Pug template

Dealing with the Pug template engine has been a frustrating experience. Despite spending an entire day trying to figure it out, all I got was errors about inconsistent indentations. It's disheartening when my text ends up in the "our sponsor section" ...

Bootstrap 5 does not support tab navigation functionality

I created a new HTML page, and I encountered an issue while trying to enable tabs using JavaScript. <html> <head> <title>Excel Viewer</title> <link hr ...

Finding vague list elements using XPath in Selenium IDE

I am in the process of setting up automated test cases using WebDriver and Selenium IDE with FireBug to better understand my tasks. While I have made significant progress, there is one major issue that I am currently facing. This specific element <div ...

Utilizing Gulp to Convert TypeScript Exports into a JSON File

I have a set of TypeScript files, some of which export a specific variable - named APIS - which contains an array of objects. My goal is to extract the values from all of these exports and save them into a JSON file using Gulp. Let's consider a direc ...

Expanding upon passing arguments in JavaScript

function NewModel(client, collection) { this.client = client; this.collection = collection; }; NewModel.prototype = { constructor: NewModel, connectClient: function(callback) { this.client.open(callback); }, getSpecificCollection: ...

Why is the decision made to simply remove an item? Is there an option to instead choose and delete the specific item?

I am facing an issue with my form where I have a function to dynamically add inputs using "append" and another button to remove the inputs added. When I use the "last-child" selector to delete the last generated div, the remove button stops working and I a ...

Show a translucent overlay iframe containing content fetched from a dynamic URL

I have been attempting to replicate the same functionality as seen on this website: . When you click play or the title of any player, a window appears with an overlay effect. This window contains an iframe. After inspecting the page source, I can determi ...

When the button is clicked, a textbox will be revealed using AJAX

When the button is clicked, I would like a text box to open using ajax. Below is my HTML code: https://i.sstatic.net/16qx4.png Here is my ajax code: https://i.sstatic.net/MmJF7.png Here is my PHP code: I am new to Ajax and PHP. I am unsure how to create ...

Retrieve the order of data attributes for HTML elements

Within the #content div, users have the ability to drag and sort blocks. Each block can contain multiple nodes, with an element underneath each block containing a "data-node-id" attribute. I am looking to create a function that will retrieve the order afte ...

Learn the process of transferring data-target IDs to another JSP using Bootstrap

Currently, I am encountering an issue where I am trying to use bootstrap to display a dialog box by clicking on a button. The dialog box is created in HTML (.jsp) and the submit button is in another .jsp file. However, when I click on the button, instead o ...