Load images before Masonry.js is applied.
- or -
Post a project like this3649
$10
- Posted:
- Proposals: 1
- Remote
- #464977
- Completed
Description
Experience Level: Entry
General information for the website: Furniture
Description of requirements/features: Hi guys,
I'm looking for a quick fix to an issue I'm experiencing with a jQuery script I've been playing around with, in Wordpress. It is Masonry.js, which allows the arrangement of elements of different heights, in a 3 column or more list order. The elements are in a form of boxes of the same width.
Basically, I'm trying to list a list of posts, in the form of boxes with different heights, same widths, in 3 columns or more. It is only doable with Masonry.js:
http://masonry.desandro.com/
I've already applied Masonry.js to my post list. It works fine, but this is the issue I've encountered:
If a newly added image or post to be listed has been added, the new images/posts/boxes will overlap other images/post/boxes, until the page is refreshed. In other words, Masonry is being applied to the boxes before any of the images has already been loaded or cached. Without the images being loaded first, it is difficult for Masonry to determine the heights or widths of each box elements (images/posts).
If a user decides to clear their cachce, ALL of the boxes/images/posts will overlap each other, until a couple of refreshes or until ALL images are cached.
To apply Masonry.js, I'm using the jQuery method (As seen below, if PPH doesn't block the view of code):
jQuery(document).ready(function($){
$('#linky').masonry({ singleMode: true });
});
I was wondering if anyone can log into my ftp and fix this issue. I would really appreciate your responses and help, ASAP.
Extra notes: I will provide the website link (to see the issue) in messages exchange, only.
Please view the attachment for the issue I'm referring to.
Description of requirements/features: Hi guys,
I'm looking for a quick fix to an issue I'm experiencing with a jQuery script I've been playing around with, in Wordpress. It is Masonry.js, which allows the arrangement of elements of different heights, in a 3 column or more list order. The elements are in a form of boxes of the same width.
Basically, I'm trying to list a list of posts, in the form of boxes with different heights, same widths, in 3 columns or more. It is only doable with Masonry.js:
http://masonry.desandro.com/
I've already applied Masonry.js to my post list. It works fine, but this is the issue I've encountered:
If a newly added image or post to be listed has been added, the new images/posts/boxes will overlap other images/post/boxes, until the page is refreshed. In other words, Masonry is being applied to the boxes before any of the images has already been loaded or cached. Without the images being loaded first, it is difficult for Masonry to determine the heights or widths of each box elements (images/posts).
If a user decides to clear their cachce, ALL of the boxes/images/posts will overlap each other, until a couple of refreshes or until ALL images are cached.
To apply Masonry.js, I'm using the jQuery method (As seen below, if PPH doesn't block the view of code):
jQuery(document).ready(function($){
$('#linky').masonry({ singleMode: true });
});
I was wondering if anyone can log into my ftp and fix this issue. I would really appreciate your responses and help, ASAP.
Extra notes: I will provide the website link (to see the issue) in messages exchange, only.
Please view the attachment for the issue I'm referring to.
McHon J.
100% (13)Projects Completed
11
Freelancers worked with
11
Projects awarded
17%
Last project
9 Dec 2023
United States
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies