nk-o / flickr-justified-gallery Goto Github PK
View Code? Open in Web Editor NEWFlickr's justified images gallery
Home Page: https://flickr-justified-gallery.nkdev.info
License: MIT License
Flickr's justified images gallery
Home Page: https://flickr-justified-gallery.nkdev.info
License: MIT License
In some cases, calculateItemsHeight
does not work as intended. Depending on the rowHeight
parameter and the content width, sometimes the wrong height is calculated, which leads to a gap between the rows:
It appears to me that the first block which changes the rowsMaxHeight
is unnecessary (since additionalTopOffset
is adjusted in L332 anyway), but I'm not entirely sure what it is supposed to do:
flickr-justified-gallery/src/fjGallery.js
Lines 288 to 295 in 3e960cc
v2.1.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fjGallery | Flickr's Justified Gallery</title>
<meta name="description" content="Flickr's justified images gallery layout">
<link href="css/demo.css" rel="stylesheet">
<!-- fjGallery -->
<script src="../dist/fjGallery.js"></script>
<link href="../dist/fjGallery.css" rel="stylesheet">
</head>
<body>
<div class="fj-gallery" style="width: 956px">
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/400x600" alt="" width="400" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
<div class="fj-gallery-item">
<img src="https://placehold.co/600x400" alt="" width="600" height="600">
</div>
</div>
<script>
fjGallery(document.querySelectorAll('.fj-gallery'), {
itemSelector: '.fj-gallery-item',
transitionDuration: false,
calculateItemsHeight: true,
gutter: 10,
rowHeight: 288,
rowHeightTolerance: 0.25,
});
</script>
</body>
</html>
Vertical-ratio images those solely rendered on its row are showing as vertically 'squeezed', on mobile devices.
Newest version
<div class="fj-gallery">
{% assign photos = site.photos | reverse %}
{% for post in photos %}
<a href="{{post.url}}" class="fj-gallery-item no-underline">
<img
src="{{post.thumbnail}}"
data-src="{{post.thumbnail}}"
class="lazy rounded"
width="800"
height="600"
/>
</a>
{% endfor %}
</div>
<script src="/assets/libraries/flickr-justified-gallery/fjGallery.min.js"></script>
<script>
fjGallery(document.querySelectorAll('.fj-gallery'), {
itemSelector: '.fj-gallery-item'
});
</script>
(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)
i am trying import it in my angular 14 app but its throwing error i think its types are missing , i tried
npm i --save-dev @types/flickr-justified-gallery
but there no types are registered
Latest from npm
(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)
1.0.7
visit the website, it will show the big image first and show the justified images
I want to set the .fj-gallery or img to opacity 0,
and then call the onJustify to set opacity to 1.
i try to use 'this' in onJustify , but it points to Window object
so how to get the current selector in onJustify ?
appendImages not working.
v1.0.7 from Github
<div class="fj-gallery"></div>
photoList.forEach(v => {
$('.fj-gallery').append(`
<a href="URL_TO_PHOTO/${v.photo_id}" class="fj-gallery-item">
<img
src="URL_TO_PHOTO/${v.photo_id}"
width="800"
height="600"
style="max-height: none; max-width: none; margin: 0;"
/>
</a>`);
});
let initCount = 0;
$('.fj-gallery').fjGallery({
itemSelector: '.fj-gallery-item',
onJustify: () => {
initCount ++;
if(initCount > 1) { // this is for preventing onJustify event fires twice on init
console.log('justify');
setTimeout(() => {
io.observe(document.querySelector('.threshold'));
}, 500);
}
}
});
// ----- few moments later ------
let appendImages = []; // array for appendImages argument
photoList.forEach(v => {
appendImages.push(`
<a href="/ajoumeow/res/image/gallery/${v.photo_id}" class="fj-gallery-item">
<img
src="/ajoumeow/res/image/gallery/${v.photo_id}"
width="800"
height="600"
style="max-height: none; max-width: none; margin: 0;"
/>
</a>`);
});
// this is not working point
$('.fj-gallery').fjGallery('appendImages', appendImages);
The appendImages
method on the last line is not working and images appended later are laying 'behind' the previously initialized fjGallery(like low z-index value), not appended to the fjGallery.
(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)
Use in load event or DOMContentLoaded event, the Options Parameters are not valid
<div class="fj-gallery">
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/Jj8FXuKVlOea4Ec.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/eqBGrXx9tWsZOao.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/LjW2CfNSD7OaY4v.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/pGIhaPjxtl438U9.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/hzjJBR2x5SEmsbC.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/ucNDmUqQkrFfAWv.jpg" >
</div>
<div class="fj-gallery-item">
<img src="https://i.loli.net/2019/12/25/oj1wAnGSKtFvXIJ.jpg" >
</div>
</div>
<script src="https://unpkg.com/flickr-justified-gallery@1/dist/fjGallery.min.js"></script>
<link href="https://unpkg.com/flickr-justified-gallery@1/dist/fjGallery.css" rel="stylesheet">
<script>
fjGallery(document.querySelectorAll('.fj-gallery'), {
itemSelector: '.fj-gallery-item',
rowHeight: 220,
gutter: 4,
onJustify: function(){
this.$container.style.opacity = '1'
console.log(this);
console.log(this.$container);
}
});
</script>
the result:
It works and show the log
But if i change to
<script>
window.addEventListener('load', function(event){
fjGallery(document.querySelectorAll('.fj-gallery'), {
itemSelector: '.fj-gallery-item',
rowHeight: 220,
gutter: 4,
onJustify: function(){
this.$container.style.opacity = '1'
console.log(this);
console.log(this.$container);
}
});
})
</script>
The result
it work, but the Options Parameters are not valid,it seen like use default value.
(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)
i dont know how to append image by the
method
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.