Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image?

I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and the caption resides in the .lb-dataContainer div as per the Lightbox CSS. I attempted to delete the clear: both property from the ::after for outerContainer and added display: inline-block to both divs, unfortunately, this didn't produce the desired effect. The image shifted to the left without moving the caption up.

If anyone could provide guidance or advice on this issue, I would greatly appreciate it. Thank you!

javascripthtmlcsslightboxlightbox2

Answer №1

To achieve a custom CSS styling, you will need to include an inner div in the JS file as shown in the code snippet below.

Locate in the JS file - 

"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"><</span></div></div></div></div></div>"


Replace With (remove quotes) - 

"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="new-inner-div"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"><</span></div></div></div></div></div>"


New Style on page - 
    <style>
        .lightbox {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 10000;
        font-weight: 400;
        max-width: 100%;
        margin: 0 auto;
    }
    .new-inner-div
    {
        max-width: 700px;border: 1px solid red;margin: 0 auto;min-height: 346px; background: #fff;
    }
    .lb-outerContainer
    {
        width: 50% !important; height: auto !important;float: left;
    }
    .lb-dataContainer
    {
        float: right;width: 46% !important;
    }
        .lb-data .lb-close {
        display: block;
        float: left;
        width: 30px;
        height: 30px;
        text-align: right;
        outline: 0;
        filter: alpha(Opacity=70);
        opacity: .7;
        -webkit-transition: opacity .2s;
        -moz-transition: opacity .2s;
        -o-transition: opacity .2s;
        transition: opacity .2s;
    }
    .lb-image
    {
    width:100% !important;
    }
    </style>

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

Activate Jquery as the user navigates through it with scrolling

Is there a way to activate a JQuery event when the user first scrolls over a particular div? I attempted to utilize waypoint for this purpose, but unfortunately, it did not work as expected. Below is the code I used with no errors: var waypoints = $(&apo ...

javascriptjqueryhtml

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

javascripthtmlcss

Adjusting the size of the Knob in Ionic 5 upon pressing it

Is there a way to change the size of the knob in an "ion-range" element when it is pressed? I have checked the documentation, but could not find any information in the "ion-range" section. I would like to make this adjustment in SCSS: Normal Behavior Pre ...

cssangularionic-framework

Align these buttons in a vertical position

I'm trying to place a Twitter button and a LinkedIn profile button next to each other, using the recommended embed code from each service. However, they are not aligning vertically as I would like. I want both buttons to be centered vertically within ...

cssbuttonstylesheet

Can you help me transform this javascript code into a JSON format?

Is there a way for me to organize my data so that I have one main question with 5 choices, each associated with a vote? It's like thinking of it as a tree where the question is the root and has 5 leaves, representing the choices, and each choice furth ...

javascriptjson

managing arrays in JavaScript with multiple tables

**I have successfully written code for calculating the sum of inputs in one table** $('#example122').on('input', '.calculate', function () { calculateTotal(); }); function calculateTotal() { var grandTotal = 0; $ ...

javascriptphparrays

What is the best way to combine two rows in a data table?

As I progress with my endeavor to construct a user-friendly transition matrix in R, following up on the previous post regarding adding a vertical line to the first column header in a data table, I am faced with a new challenge. Upon executing the provided ...

htmlcssrshinydt

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

During the process of converting my VueJs project to TypeScript, I encountered an error related to TypeScript. This issue arises from a component with a custom v-model implementation. In the HTML, there is an input field with a 'plate' ref that ...

javascripttypescriptvue.jsvuejs2vue-component

Customizing React component properties within a Styled Component

I have been experimenting with styled components to customize the appearance of basic material-ui React components. My goal is to pass props into the MUI component and then use styled components to apply CSS styling. One interesting aspect is being able t ...

javascriptreactjsmaterial-uistyled-components

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

Issue with nested directive not triggering upon page load

I recently started working with AngularJS and came across an issue with nested directives. In my project, I have two directives: MainDir.js (function(){angular.module("mod").directive("mainDir", function(){ return { restrict: "E", scope: {}, ...

javascriptangularjs

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

New elements can be inserted at the rear of the queue while older elements are removed from the front of the queue

I'm new to JavaScript and currently working on a task involving queues. Here is the task description: Create a function called nextInLine that takes an array (arr) and a number (item) as parameters. The function should add the number to the end of ...

javascriptarraysjson

React Images: Carousel display issue with images not centered

Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...

cssnext.js

Adjust the styling with jQuery according to the selected value from the dropdown menu

Check out this Fiddle I have a jQuery script that is supposed to change the style of an input box to display:block if the selected value is "<>" (Between). However, currently it is changing the css for all selected items instead of just the target i ...

javascriptjqueryhtmlcss

Having trouble interacting with Bootstrap modal dialog when fullPage.js is active

Whenever I attempt to click on the button, a Bootstrap modal dialog box appears but remains unresponsive no matter what I try. My project utilizes both Bootstrap and fullPage.js http://codepen.io/anon/pen/obEOzO <body> <div id="fullpage"> &l ...

javascriptjquerycsstwitter-bootstrapfullpage.js

Tips for showcasing varied information on Morris Chart

I am working with a Morris chart that is populated with a collection of data, each item containing 6 different data values. My goal is to switch between displaying two different sets of data. For example, I want to show the 'Target' data always ...

javascriptjquerymorris.js

BeautifulSoup: A guide on retrieving information following a designated HTML element

I have the following HTML code and I am trying to determine how to instruct BeautifulSoup to extract the <td> data after the element <td>Color Digest</td> <tr> <td> Color Digest </td> <td> 2,36,156,38,25,0, ... ( ...

pythonhtmlbeautifulsoupscrape

Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

Library version: Jquery 1.11.0 Framework version: Bootstrap 3.1.1 CodePen link: https://codepen.io/amitshahc/pen/r6ueupfj/1/ HTML snippet: <!-- Modal --> <div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby= ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

Is it possible to access a sub property using a dot string in Vue 3?

Given a Vue 3 proxy object structure as shown below: <script> export default { name: "test", data() { return { users: [{ "id": 1, "name": "Leanne Graham", " ...

javascriptvue.jsvuejs3