The dimensions of the light box are incorrect when it is being opened

I need help adjusting the window size of the light box feature on my website. When a user clicks on a specific image, the light box opens up but the width of the light box does not display correctly. I have added links within the light box as well.

http://jsfiddle.net/rajkumart08/8YK2n/

 onClick: function() {
    if (!Gallery._config.lightbox) return !1;
    Gallery._toggleOverlay(!0);
    Gallery._current = $(this).parent();
    var a = $(this),
        a = a.children('div[class="' + a.data("position") + '"]').children("img"),
        b = a.data("width"),
        c = a.data("height"),
        f = a.data("container_width"),
        h = a.data("container_height"),
        g = a.data("caption"),
        d = Gallery.window_width - 100,
        j = g ? Gallery.window_height - 180 : Gallery.window_height - 120;
    // More code here...
}

Answer №1

After inserting your links, the styling was incorrect, causing the window to be too wide when the image is small.

<div class="caption" style="height: 30px; text-align: right;">
   <a style="font-size: 18px;" href="/Sales/order/">Create</a> 
   <div> 
     <a href="/Sales/" style="font-size: 18px;">View/Edit</a> 
   </div> 
   <a style="&nbsp;font-size: 18px;">Labels</a>
</div>

All tags need to be adjusted like so:

 <div class="cubeCell" data-text="Search" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/search.png"><div class="cubeTextStyle">Search</div></div>

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 creating retryable AWS S3 requests

Whenever I attempt to download multiple files from an S3 bucket using the Node SDK, sometimes one of the requests times out. Instead of giving up, I'd like the request to automatically retry for a successful download. The JSON error response states t ...

ReactJS is encountering a situation where two children are using the same key and causing

When I try to view the profile information of another user, I encounter a duplicate key error that says: "Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique k ...

Adjusting the width of a column in jQGrid

I've discovered a way to set the width of jQGrid: $('#Grid1').setGridWidth(705, true); When I pass true, it resizes all columns based on this width. This works well, but my question is: Is there a way to keep one column of the grid at a co ...

Creating round corners for images with jQuery

To achieve rounded corners on multiple blocks using a single image above, I am opting for the use of images instead of plugins for maximum compatibility. This involves creating wrappers around the blocks to apply the corner images: <div class="wrapper- ...

Encountering an issue with state setting - Experiencing an excessive amount of re-renders in a

If you want to see the solution in action, check out the Code Sandbox link provided below for better clarity on the issue at hand. Currently facing an issue with setting my mymoviegenreobjects as the mymoviegenreinfo state within the useFetchMovieGenreRes ...

"Utilizing Flexbox for a full-height column with an auto overflow feature

I'm looking to create a layout with a fixed header and footer, where the content in between always takes up the full height. I decided to use a three-row flexbox layout. However, I'm encountering an issue with the left content column not scrolli ...

What is the best way to retrieve the distinct number within an ng-repeat loop?

Utilizing angular ng-repeat to display the bootstrap tab, I have nested tabs within one another. In order to assign a unique id to both the tab element and its content, I am currently using $index as a way to achieve this. However, it proves ineffective wh ...

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

Showing computation result on a separate column in an HTML table

I am trying to set up a table with 3 columns. One column, total_column_price, is intended to display the calculation result of amount and device_price. How can I achieve this? The Table {{ Form::open(['action' => 'TransactionsINCont ...

Issue with jQuery AJAX error callback not triggering upon encountering an error

I'm currently facing an issue with implementing the management of an HTTP 413: Request entity too large error from my server. I've made the following attempt to address it: $.ajax({ url: "submit.php", data: { "data": POSTData ...

Order the variables in the dropdown menu based on the PHP variables

I currently have a select list that allows me to choose between two options: Popularity and Recently Ordered. My goal is to filter the objects on the page based on these attributes, connecting each option to its respective function in my dataloader.php fi ...

Using async/await to handle the callback function

Here is a function that saves a user in the database: exports.saveUser = ({ first_name, last_name, email, password }) => { const query = "insert into users (first_name, last_name, email, password_hash) values ($1, $2, $3, $4) RETURNING *"; ...

Analyzing information displayed on the screen from the client's perspective

I'm looking for a method to determine if the user has made any changes to the data on a webpage between loading the page and clicking the save button. If the user opens a page to edit data but ultimately clicks save without making any alterations, I w ...

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Following the advice in the official PhpStorm documentation, I have implemented a CSS minifier. However, upon attempting to use it, I encountered the following error: cmd.exe /D /C call C:\Users\douglas\AppData\Roaming\npm\css ...

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

Transforming AngularJS $http POST requests into GET requests

I came across a scenario where I needed to update the logo path in my application. So, I defined a route like this: Route::post('/updateLogo', 'CaptivePortalController@updateLogo'); After defining the route, I made a POST request as s ...

Steps to Delete a Table Row With a Cell Containing Certain Text

Here is the markup I am working with that includes SPAN >> Table >> TR >> TD: https://i.sstatic.net/MnTCa.png Now, I am looking to target and remove any TR element that contains a TD with the word "Question" inside a <nobr> tag. C ...

What can cause jQuery to override the window.onbeforeunload function at times?

I've encountered a puzzling issue with jQuery version 1.6.x on my webpage. The problem arises with a simple call as shown below: window.onbeforeunload = function() { return 'Are you sure ?'; }; Surprisingly, this code doesn't work bec ...

What is the best way to update my server control following an INSERT operation using AJAX?

Is there a way to refresh my server control after an INSERT operation using AJAX? This is my .aspx code: <form id="form1" runat="server"> <div> <asp:ListView ID="lv_familyrelation" runat="server" ItemPlaceholderID="Rela ...

Ways to ensure the synchronous execution of asynchronously invoked functions

I'm currently navigating the world of asynchronous code and trying to grasp its workings. As I construct a Node Express application that interfaces with a database, my aim is for it to interact with a Sqlite database in a development setting. (The pr ...