How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Question

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with:

<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>


<script>
$(document).ready(function() {                
    $('.photoset-grid').photosetGrid({
        gutter: '0px',
});
});
</script>
<!-- /Photoset-grid script -->

This Javascript code creates a "jump into grid" effect for images.

I would like to display everything normally without the jumping effect. Is it possible to use a hide effect in CSS and then show the content once it is fully loaded?

Any advice on this matter would be greatly appreciated! Thank you!

javascript jquery css html

Answer 1

Answer №1

Take a look at the code for Photosetgrid:

https://github.com/stylehatch/photoset-grid/

You'll notice they use a straightforward style tag: style="visibility: hidden;"

If you prefer using jquery, you can do this: $(".photoset-grid").hide();

To show it again, follow these guidelines:

  $('.photoset-grid-basic').photosetGrid({
        onComplete: function(){
          $('.photoset-grid-basic').attr('style', '');
//or $('.photoset-grid-basic').show();
        }
      });

For more detailed information on how to use it, check out this link:

Answer 2

Take a look at the code for Photosetgrid:

https://github.com/stylehatch/photoset-grid/

You'll notice they use a straightforward style tag: style="visibility: hidden;"

If you prefer using jquery, you can do this: $(".photoset-grid").hide();

To show it again, follow these guidelines:

  $('.photoset-grid-basic').photosetGrid({
        onComplete: function(){
          $('.photoset-grid-basic').attr('style', '');
//or $('.photoset-grid-basic').show();
        }
      });

For more detailed information on how to use it, check out this link:

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Answer №1

Similar questions

Attempting to modify the audio tag's src attribute with JavaScript

Stop users from being able to input line breaks by pasting

Having trouble getting my Node.js Express code to display 'Hello World' on Cloud 9 platform

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

Ajax fails to transmit information

"CodeSandbox encountered an issue where PostCSS received an undefined value instead of the expected CSS

Using NextJS getServerSideProps to Transfer Data to Page Component

Initiate playing HTML video upon user click

What is the best way to include a second (concealed) value in a cell using datatables

Place content following a three.js display created within a <div id="mainWindow">

Lack of concentration leads to inaccurate inputs upon clicking the submit button during jQuery validation

Preserve an array in PHP for future page visits

Design the appearance of page buttons distinct from select buttons

How come WhatsApp is not recognizing my og:tags correctly?

Determine if the webpage is the sole tab open in the current window

Receiving a blank request payload despite implementing a body parsing middleware

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

Node.js (npm) is still unable to locate python despite setting %PYTHON% beforehand

Using Javascript to validate passwords and Bootstrap for design enhancements