Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed for my client).

<body>
    <header>
        <h2><center><img src="img/hdr-horsd.jpg"  style="width: 50%"></center></h2><br><br>
    </header>
    <ul id="light-gallery" class="gallery">
        <li data-src="gallery/horsd-01.jpg">
            <a href="#">
            <img src="gallery/t-horsd-01.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-02.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-02.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-03.jpg">
            <a href="#">
            <img src="gallery/t-horsd-03.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-04.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-04.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-05.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-05.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-06.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-06.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-07.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-07.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-08.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-08.jpg" />
            </a>
        </li>
        <li data-src="gallery/horsd-09.jpg" >
            <a href="#">
            <img src="gallery/t-horsd-09.jpg" />
            </a>
        </li>
    </ul>
</body>

Below is the custom CSS on the page:

    <!-- == Custom CSS Coding == -->
    <style>
        ul{
            list-style: none outside none;
            padding-left: 0;
        }
        .gallery li {
    display: block;
    float: left;
    height: 100px;
    margin-bottom: 6px;
    margin-right: 6px;
    width: 100px;
}
        .gallery li a {
            height: 100px;
            width: 100px;
        }
        .gallery li a img {
            max-width: 100px;
        }
    </style>

I have removed the centering code as it wasn't working and wanted to keep the code clean. The photo gallery I'm using is jQuery lightGallery.

jquerycssgallerythumbnailscenter

Answer №1

element, I wanted to share a solution I found for a common problem. If you're struggling with alignment in your custom.css file, try adding the following code: 
#lg-gallery .thumb-cont .thumb-inner {
    margin-left: auto;
    margin-right: auto;
}

Answer №2

div.lg-thumb.group {
margin-left: auto !important;
margin-right: auto !important;
}

This code snippet centers a group of thumbnails in a layout. It has been tested and works effectively in the new version of the release.

Answer №3

Here is the HTML code:

<body>
<header>
    <h2><center><img src="img/hdr-horsd.jpg"  style="width: 50%"></center></h2><br><br>
</header>
    <div id="wrap">
        <ul id="light-gallery" class="gallery">
            <li data-src="gallery/horsd-01.jpg">
                <a href="#">
                <img src="gallery/t-horsd-01.jpg" />
                </a>
            </li>
            <li data-src="gallery/horsd-02.jpg" >
                <a href="#">
                <img src="gallery/t-horsd-02.jpg" />
                </a>
            </li>
           <!-- More list items here -->
        </ul>
    </div>

And here is the CSS code:

   #wrap{
    margin:0px auto;
    padding:0px;
    width:1100px;
    height: 106px;
    text-align: center;
    }

   ul.gallery{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .gallery li {
    height: 100px;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
    width: 100px;
    }

    .gallery li:last-child {
    margin-right: 0;
    }

    .gallery li a {
        height: 100px;
        width: 100px;
    }
    .gallery li a img {
        max-width: 100px;
    }

Answer №4

To incorporate version 1.3.5 into your HTML document, follow these steps:

<style>
    ul.lSPager.lSGallery
    {
    margin-left: auto !important;
    margin-right: auto !important;
    }
    </style>

This solution was successful for me

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 achieving an eye-catching text and image layout on a single page of your Wordpress blog

I've been exploring ways to achieve a design concept for my blog layout. I envision having the text and thumbnail displayed side by side, each taking up 50% of the width until the image reaches its end. Once the image ends, I want the text to span the ...

javascripthtmljquerycsswordpress

What could be the reason for bootstrap failing to recognize and apply my variables?

Whenever I set the text color to green using this code: @textColor: green; It works perfectly and changes the text color, but when I try to modify grid column width and gutter width with this code: @gridColumnWidth: 10px; @gridGutterWidth: 0px; @flu ...

csstwitter-bootstrapless

Installation and execution of TypeScript jQuery / Bootstrap definition file on a local machine using npm typings: A step-by-step guide

Struggling to set up TypeScript jQuery and Bootstrap definition files in my new project using npm typings. Below are the steps I followed: 1- Open cmd, navigate to my project folder, and enter the following commands: npm install typings --global typings ...

jquerytypescripttwitter-bootstrap-3npmtypescript-typings

Combining data inputted into a remote/modal bootstrap form and submitting it alongside the parent page form

I am trying to create a parent bootstrap page with a form that includes a dynamic modal. The modal loads an external page containing form elements and a submit button that is supposed to submit the form on the parent page. However, when I click the submit ...

jqueryajaxtwitter-bootstrapmodal-dialog

Storing PDF files in MongoDB with GoLang and mgo

After exploring various sources on saving files using mgo, I'm still struggling to find a solution for my specific requirement. Can anyone help me out? This code inserts an object into MongoDb: var dbSchoolPojo dbSchool i := bson.NewObjectId() dbSch ...

jquerymongodbfilegomgo

Utilizing HTML5 history instead of hash URLs to preserve the user's browsing history

Our application is a single page that dynamically loads results based on query strings. The query string format we use is as follows: ?city=Delhi&pn=1 Within the SPA, there are different sections displayed on the same page. As users navigate through ...

javascriptjqueryhtmlhistory.jshtml5-history

Retrieve data from a MySQL table based on a specific condition in PHP

Can someone assist me with fetching data from a table where the valid_from date is less than a specified date (excluding the current date)? I have a table that looks like this: view my table here For instance, if my date is 02-04-2015, I would want to re ...

phphtmlmysqlcss

Sorting files in jquery file upload

Has anyone had experience using the jQuery-File-Upload library from https://github.com/blueimp/jQuery-File-Upload? I'm currently facing an issue and wondering if anyone could assist me in sorting the files in a different manner. By default, this scrip ...

javascriptjquery

Determine the placement of a <div> based on information stored in localStorage

I'm diving into the world of localStorage and trying to figure out how it works. To get a better understanding, I decided to create an HTML page that allows users to drag and drop tiles around the screen. Here's a snippet of the code I came up ...

javascriptcsshtml

Is there a way to extract the content from a dynamic textbox using a dynamic button in HTML and AJAX?

My current task involves fetching data from a database and updating the records individually. I have created a table with a text input field and a button that will be generated dynamically for each record. The text input field is populated with the previou ...

javascriptphpjqueryajaxhtml

Shuffle the elements within each container in the DOM

Currently, I am focusing on designing a card-based layout where each card contains details about the product. One important detail is the phone number, which is displayed in the format 555-555-5555. My current goal is to clear the text value of the phone ...

javascriptjquery

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...

javascripthtmljquery

After two consecutive ajax updates, the form is no longer able to send POST requests

I am struggling with a form belonging to an included object: <form method="post" class="object_form" id="event-core-form" action="{% url save_event_core_data event.id %}" enctype="multipart/form-data"> {{ form.as_p }} <p> <i ...

jqueryajaxdjangodjango-formsxmlhttprequest

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

Display an Open Dialog window when a Button is clicked

On a button click, I need to display an Open Dialog box. To achieve this, I am utilizing the FileUpload control for file uploading purposes, however, I prefer not to expose it to the user and would rather display a Button instead. ...

jquerycssfile-upload

How to customize the center text of Chart.js doughnut chart

I've tried every search I can think of, but still can't find a solution to my problem. I want to customize the text in the middle of my doughnut chart (not tooltips). The chart is created using Chart.js and includes a percentage in the center. E ...

javascriptjquerychart.js

Adjust element based on the position of another element (sticky)

Is it possible to rotate a text block so that it remains anchored to the bottom of a red rectangle, even when the rectangle is rotated? Similar to how it works in Figma, but simpler. For example, if I rotate the rectangle by 180 degrees, the text should be ...

csssvg.js

What methods can I use to maintain alignment across different screen sizes?

html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .container { position: absolute; width: 100%; height: 100%; ...

htmlcss

Using jQuery, you can submit a form easily

In my work with Django, I am developing a quiz web application that requires a form submission after answering each question. The questions are displayed correctly, but I am facing an issue when trying to submit the form with the answers. The answers to t ...

javascriptjquerydjangoforms

Consistent column heights within each row

I currently have Bootstrap implemented on my website and have integrated jQuery to adjust the height of each column to match the tallest one. However, the issue I am facing is that the height adjustment applies globally across the entire page, rather than ...

javascriptjquery