Dynamically incorporate captions and slides in jssor, then display full-size images in an overlay upon clicking

Utilizing the basic jssor slideshow with thumbnails.

When loading my page, I fetch image captions and URLs in a JavaScript array. To incorporate them into jssor, I assigned IDs to the images and thumbnails, then added source attributes using JavaScript like so:

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";

Although the slides load correctly in their designated areas, the green loading indicator of the slideshow continues to be active, making the slides seem like they're in the background. However, when directly providing the URLs in the img tags rather than through JavaScript, everything loads properly without displaying the green loading image.

If there are fewer than ten slides, how can I prevent extra thumbnail image borders from appearing? Also, how can I dynamically add more image and thumbnail elements in jssor using JavaScript if the number of images exceeds that limit?

Additionally, how can I use JavaScript to add captions to the jssor slideshow? I also require JavaScript and CSS code for jssor to allow the display of images in full size in an overlay upon clicking.

Since I'm not utilizing the jQuery version but JavaScript instead, I would appreciate solutions provided in JavaScript.

javascriptcssimagejssor

Answer №1

Re: experiencing loading issues. Make sure to set the image src before initializing the jssor slider. Here's an example:

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
var jssor_slider1 = new $JssorSlider$(...;

Re: dynamically adding or removing slide elements To add a new slide, insert the element into the 'slides' container. To remove, simply delete the unused slide from the container.

Re: including captions on slides Use the following code snippet to append captions to your slides:

document.getElementById("slide0").appendChild(...

Re: showcasing images in full size overlay

function DisplayFullSizeImage(slideIndex) {
            //Implement a method to display the image in full size
        }

        jssor_slider1.$On($JssorSlider$.$EVT_CLICK, DisplayFullSizeImage);

By the way, there are more efficient ways to generate HTML code for your dynamic slider.

For further guidance, refer to:

Adding slides dynamically in Jssor

Creating a Jssor slider with dynamic images

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

Material UI - Array of Chips

I have been working on creating a ReactJS component that displays an array of chips with unique styling for each one. To achieve this, I created individual makeStyles classes for the chips. However, I encountered difficulties in dynamically changing the cl ...

javascriptcssreactjsmaterial-ui

Receive JSON data with camel-case in a Web API 2.0 using a model in pascal-case style

My attempt to execute a PUT call on my Web API involves configuring the WebApiConfig.cs file to send data back to my Web project in camel case format. config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesCont ...

javascriptc#jsonajaxasp.net-web-api2

Creating a personalized gradient using Tailwind CSS and Daisy UI framework

I’m attempting to incorporate a unique gradient into my next.js application with the help of Tailwind CSS and Daisy UI. Below is the specific code snippet I plan on using: background: linear-gradient(180deg, rgba(192, 192, 192, 0.04) 0%, rgba(201, 180, ...

cssnext.jstailwind-cssgradientdaisyui

Altering the href text within a script causes the text to disappear instead of updating

Function Triggered by Button Click: function LoadEnglishText() { document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; } HTML Link to be Updated: <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier ...

javascripthtml

What are the steps to modify the MIME type in order for the browser to correctly display a CSS

I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...

cssnode.jsejsmime

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

Currently, I am in the process of developing a login page using Angular for the front-end and Spring Security for the back-end. Everything appears to be functioning correctly, except for handling exceptions when attempting to catch errors from the service ...

javascriptspringangularerror-handling

What is your approach to managing routing within a Node and Ember application?

In my application, I am working with both Node and Ember. I have encountered a problem specifically related to routes. Both Node and Ember handle routes, but I want Node to handle certain routes and Ember to handle others. When the page initially loads, No ...

javascriptnode.jsember.js

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

css

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

Looking for a way to secure ajax post and get requests using JavaScript. The process would involve: Server generates private and public key upon request Server sends the public key to client Client encrypts data with public key Server decrypts data wit ...

javascriptnode.jspublic-key-encryptionprivate-key

Angular 6 custom elements encounter syntax and shadow DOM errors on IE11 and Firefox, causing failures

After following a set of instructions found on this website, I successfully created a new angular-cli project with a custom element that functions perfectly on Chrome. However, when adding the necessary polyfills for Internet Explorer, I encountered an iss ...

javascriptangularhtmltypescript

Generating directory for application, only to find TypeScript files instead of JavaScript

While following a tutorial on setting up a react.js + tailwindcss app, I used the command npx create-next-app -e with-tailwindcss [app name]. However, instead of getting javascript files like index.js, I ended up with TypeScript files like index.tsx. You c ...

javascriptnode.jsnext.js

Utilizing the JSON File in Your HTML Webpage: A Comprehensive Guide

I'm currently trying to integrate the following JSON file into my HTML page. <html> <head> <title> testing get</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> ...

javascripthtmljsonajax

No data appearing in Angular ngrepeat when attempting to display array of objects

Can someone help me figure out why my Angular code is not displaying data in ngrepeat? Here's a jsfiddle link for reference: http://jsfiddle.net/e0e7dee5/ <div ng-controller="MyCtrl"> <div class="container-fluid"> <div ng- ...

javascriptangularjs

Bootstrap 4 collapse is experiencing some issues as it is not collapsing smoothly. It seems to pause halfway before

Why is this collapse stopping in half before collapsing completely? I have 5 divs collapsing at once, could that be the issue? The example on W3 schools works fine... Should I consider changing the collapse to a panel instead? Visit W3 Schools for more i ...

javascriptjqueryhtmlcssbootstrap-4

Struggling to make the DataTables.net Bootstrap 5 example function properly

I'm currently working on familiarizing myself with the styling example for Datatables.net using Bootstrap 5, which can be found at https://datatables.net/examples/styling/bootstrap5.html. I've followed the code provided in the example closely, bu ...

javascripthtmlbootstrap-5

Why Are My JavaScript GET Request Parameters Displaying as Strings Rather Than Numbers?

Currently, I am in the process of developing a REST API where one of the defined routes looks like this: router.get("/objects/:id?/:val1?/:val2?", getObject); Specifically, my request from Postman appears as follows: http://localhost:8000/objects?val1= ...

javascriptnode.jsrestful-urlget-request

translucent three.js texture with shader material

I'm currently using a circular texture to display particles: The circle texture contains transparent pixels. I'm leveraging ShaderMaterial and BufferGeometry to assign custom sizes and colors to each node. However, I'm encountering issues w ...

javascriptthree.js

What is the most efficient way to refresh a geometry's topology in ThreeJS?

Is there a way to efficiently update the vertices and faces of my geometry without creating new typed arrays and generating garbage for the JavaScript Garbage Collector? I currently use BufferedGeometry to create my geometry, but when updating vertex coord ...

javascriptthree.jstyped-arrays

The functionality of Google chart is encountering issues and not working as intended, leading

Utilizing AJAX to showcase user statistics, such as the number of emails sent and received per month (including the current month and the past 12 months), using Google charts has proven problematic. Previously functioning without issue, integrating AJAX no ...

javascriptjqueryajaxchartsgoogle-visualization

Monitor and control access to images to prevent unauthorized viewing or downloading

Is there a way to display an image on a web page without allowing direct access to it? I want to prevent users from being able to view the image by simply manipulating the URL, as seen in some Facebook applications. Are there methods for monitoring image ...

phpjqueryimageurlindirection