JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

I am looking to create a horizontal scroller/slider that will display images with captions underneath each image. The data is provided in an array of objects, so I need to iterate through the data and populate each item in the scroller with the necessary information, including image URLs and other details. There could be potentially hundreds of items in the data array. Additionally, I need to be able to capture which item was clicked on and utilize that information elsewhere on my webpage.

Does anyone know of an existing solution for this? I have searched for jQuery-based options but haven't found one that fits all of my requirements. I would prefer not to reinvent the wheel if a suitable solution already exists.

Thank you!

javascriptimagesliderscroller

Answer №1

Forget about it, here is my response.

To start, within the html document, I include the following:

<div id="image_gallery"></div>

The specific styles attributed to the image gallery are:

div#image_gallery {   
    width: 70%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;    
    position:relative;
    margin-top:2%;
    z-index:99999999;
}

img.gallery-image {
vertical-align: middle;
cursor: pointer;    
}

Next, using a javascript loop, populate the gallery div with images, including custom attributes:

$('div#image_gallery').append('<img class="gallery-image" src="' + item.properties.ImageURL + '" alt="' + item.properties.Description + '"/>');

Lastly, handle the click event on the images and retrieve the custom attributes:

$('img.gallery-image').click(function() {
                            var imageURL = $(this).attr('src');
                            var description = $(this).attr('alt');
                            //console.log(description);
});

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

How to Update a Nested Document in Mongoose

I am currently working on a polls application using angular, express, and mongoose. Here is an overview of my data structure: var mongoose = require('mongoose'); var responseSchema = new mongoose.Schema({ responseText: String, votes: { ...

javascriptangularjsmongodbexpressmongoose

Manipulating the actual DOM in ReactJS to display a formatted number or string while preserving its original value

Hello, I am new to ReactJS and currently using it along with ReactDataGrid. I am trying to figure out how to change the real DOM value of a specific cell in the table. Here is the table I am working with: https://i.sstatic.net/CAcSH.png My goal is to cha ...

javascriptreactjsdomnpmreact-data-grid

Can you provide me with the URL for the jQuery post function?

Could someone please clarify which URL I should use in the $.post call to the server for a node.js file? Most tutorials demonstrate with PHP files, but I'm unsure about calling node.js files. Should I post it to the app.js file or the route file? Thi ...

javascriptjquerynode.jsexpresspug

Postgres error in NodeJS: Cannot resolve address - ENOTFOUND

My connection string for accessing my AWS database is pg://user:pass@localhost:port/table. It works perfectly fine when connecting to localhost, but as soon as I attempt to connect to the AWS server, everything falls apart. Even a simple connection code r ...

javascriptpostgresqlexpress

Having trouble retrieving POST data with the Webextensions API

Looking to retrieve POST data using a Webextensions API on page load. Implemented a background script with the code below: browser.webRequest.onBeforeSendHeaders.addListener( getPostData, { urls: ['<all_urls>'], types: ["main_fr ...

javascriptpostfirefox-addon-webextensions

Arranging a collection of objects (Displaying information in a random sequence)

Here is a summary of the data returned in a shortened version: var array = [{ "response": { "itineraries":[ { "price": { "totalPricePerPassenger":"104" ...

javascriptarrayssortingobject

Convert the jQuery functions click(), hide(), and fadeIn() into their equivalent native JavaScript functionalities

I'm determined to speed up my page by reducing requests. Does anyone have a solution for keeping the functionality of the code below without having to load the entire JQuery library? $("#div1").click(function () { $("#div2).hide(); $("#div3). ...

javascriptjquery

If the condition is met with the presence of X in the string, execute one action; otherwise, proceed with

Currently, my code successfully grabs the results: module.exports = async function grabResult(page) { const message = await page.$eval( 'div > div:nth-child(2)', (el) => el.innerText ); const username = await page.$eval( ...

javascriptnode.jspuppeteer

"Sparkling div animation with the use of jQuery's .hover() function

<script> $(document).ready(function () { $("#logo_").hide(); $("#logo_learn").hide(); }) function sl() { $("#logo_learn").slideToggle(500); $("#logo_").fadeIn(); } function hl() { $("#logo_learn").slideToggle(500); $("#logo_ ...

javascriptjqueryhtml

Will JavaScript modules be executed just once upon importing them?

When a module A is imported inside both module B and C, will the code inside A be executed 2 times in total? For example, if I invoke fetch() within A, will fetch() run twice? Here's an illustration: //file: A.js var A = { init: false, count: 0 } ...

javascriptes6-modules

Switch the hue when altered

My document contains various input elements such as text, radio buttons, and checkboxes. I want each of these elements to change color when a change is made. This is the method I am currently using: $("document").on('click', 'change', ...

javascriptjqueryhtml

What is the best way to send multiple parameter values from jQuery to a Laravel controller?

I am facing an issue with my code where I don't understand how to send multiple parameters from jQuery to the controller. Below is the route: Route::get('/listcdix/{id}/detail/{asnumber}', ['as' => 'remindHelper', & ...

javascriptphpjquerylaravel

Error: The property 'open' is not defined in the mdMenu object

Encountered a bug while working with angular-material design... When using md-menu, if a sub menu item is opened (as shown in the image) and then hovering over a non-subMenu item (menu item), it throws an error "Cannot read property 'open' of nul ...

javascriptangularjsangular-materialmean-stack

Guide on utilizing the list of names in a POST request

<td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/> </td><td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/></td><td class="widht200"> <input type=" ...

phpjavascripthtmlformspost

"Combining the power of JavaScript countdown with PHP date functionality

I have a JavaScript code that generates countdowns based on the user's PC date. I'm looking for a way to modify the script to use a specific timezone like: <?php date_default_timezone_set('Ireland/Dublin'); $date = date('m/d/Y ...

phpjavascriptdatecountdown

Transitioning React Hover Navbar Design

I'm currently revamping a click-to-open navbar into a hover bar for a new project. I have successfully implemented the onMouseEnter and onMouseLeave functions, allowing the navbar to open and close on mouse hover. However, I am facing an issue with ad ...

javascripthtmlcssreactjssass

Next.js is throwing an error: 'Module './filename.jpeg' not found. I ran out of time to upload the image

For the past half of the week, I've been tackling this issue of creating a playlist page. The process begins by fetching playlist information using getServerSideProps and storing it in the state. Subsequently, the state is continuously updated until ...

reactjsimagenext.jsfssharp

How can I display an array of data with a changing name using a FlatList in React Native?

How can I render a list of array data with a dynamic name in a FlatList using React Native? Below is the list of data that I would like to display in the FlatList: const movies = [ { '4W2JJ0CLbvfLJzBUHORVaz6sAGv2': [ { name: ...

javascriptarraysreactjsreact-native

Tips on refreshing the D3 SVG element following updates to the dataset state in a React application

Hey everyone, I'm currently experimenting with D3.js and React in an attempt to build a dynamic dancing bargraph. Can anyone provide guidance on how to reload the D3 svg after updating the dataset state within REACT? Feel free to check out my codepen ...

javascriptreactjsd3.jscodepen

Pause before proceeding to the next iteration in the loop

I am currently facing an issue while trying to send a message through an API using a function. The function returns a value called messageLogId, which I'm attempting to update in the main loop at Attendence. However, when executing the code, the value ...

javascriptnode.jsapiexpress