Coder Social home page Coder Social logo

nk-o / flickr-justified-gallery Goto Github PK

View Code? Open in Web Editor NEW
35.0 35.0 4.0 760 KB

Flickr's justified images gallery

Home Page: https://flickr-justified-gallery.nkdev.info

License: MIT License

JavaScript 98.16% CSS 1.50% Shell 0.35%
flickr gallery justified

flickr-justified-gallery's People

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

ianchia yaroslav-dev ark3232 nicokaiser

flickr-justified-gallery's Issues

calculateItemsHeight sometimes calculates the wrong height

Issue description:

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:

Bildschirmfoto 2024-02-02 um 11 54 05

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

if (
self.options.calculateItemsHeight &&
'undefined' === typeof rowsMaxHeight[justifiedData.boxes[i].top] &&
Object.keys(rowsMaxHeight).length
) {
additionalTopOffset +=
rowsMaxHeight[Object.keys(rowsMaxHeight).pop()] - justifiedData.boxes[imgI - 1].height;
}

Version used:

v2.1.2

Code to reproduce the issue (HTML blocks + JavaScript initialization)

<!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 images are squeezed on mobile devices

Issue description:

Vertical-ratio images those solely rendered on its row are showing as vertically 'squeezed', on mobile devices.

Version used:

Newest version

Code to reproduce the issue (HTML blocks + JavaScript initialization)

https://luftaquila.io/photos/

<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>

test

Issue description:

Version used:

(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)

Code to reproduce the issue (HTML blocks + JavaScript initialization)

Could not find a declaration file for module 'flickr-justified-gallery'

Issue description:

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

Version used:

Latest from npm

Code to reproduce the issue (HTML blocks + JavaScript initialization)




    

  
    
      

    
    
  

    

    
 
      

        how to get the current selector in onJustify ?
      

      
Issue description:


Version used:


(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)

1.0.7


Code to reproduce the issue (HTML blocks + JavaScript initialization)






visit the website, it will show the big image first and show the justified images


ddddd


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
      

      
Issue description:


appendImages not working.


Version used:


v1.0.7 from Github


Code to reproduce the issue (HTML blocks + JavaScript initialization)


<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.

    

  
    

    
 
      

        Use in load event or DOMContentLoaded event, the Options Parameters are not valid
      

      
Issue description:


Version used:


(Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)


Code to reproduce the issue (HTML blocks + JavaScript initialization)






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

image


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.

image

    

  
    

    
  






        

          

          

            
            
              

            
            
            
            

Recommend Projects

            
    
              
  • 
                
    
    
  
              
    • 
              
              
  • 
                

    
  
    
    
      
      React photo
      
      React
    
  
    
  
    A declarative, efficient, and flexible JavaScript library for building user interfaces.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Vue.js photo
      
      Vue.js
    
  
    
  
    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Typescript photo
      
      Typescript
    
  
    
  
    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      TensorFlow photo
      
      TensorFlow
    
  
    
  
    An Open Source Machine Learning Framework for Everyone
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Django photo
      
      Django
    
  
    
  
    The Web framework for perfectionists with deadlines.
    

    

              
    • 
              
              
  • 
                


              
    • 
              
              
  • 
                

    
  
    
    
      
      D3 photo
      
      D3
    
  
    
  
    Bring data to life with SVG, Canvas and HTML. 📊📈🎉
    

    

              
    • 
              
              
  • 
                
    
                  
    
    
  
                
    
              
    • 
            

          


          

            
            

Recommend Topics

            
    
              
              
  • 
                

    
  
    
    
      
      javascript
    
  
    
  
    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      web
    
  
    
  
    Some thing interesting about web. New door for the world.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      server
    
  
    
  
    A server is a program made to process requests and deliver data to clients.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Machine learning
    
  
    
  
    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
    

    

              
    • 
              
              
  • 
                


              
    • 
              
              
  • 
                

    
  
    
    
      
      Game
    
  
    
  
    Some thing interesting about game, make everyone happy.
    

    

              
    • 
              
              
  • 
                
    
    
  
              
    • 
            

          


          

            
            

Recommend Org

            
    
              
              
  • 
                

    
  
    
    
      
      Facebook photo
      
      Facebook
    
  
    
  
    We are working to build community through open source technology. NB: members must have two-factor auth.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Microsoft photo
      
      Microsoft
    
  
    
  
    Open source projects and samples from Microsoft.
    

    

              
    • 
              
              
  • 
                

    
  
    
    
      
      Google photo
      
      Google
    
  
    
  
    Google ❤️ Open Source for everyone.
    

    

              
    • 
              
              
  • 
                


              
    • 
              
              
  • 
                

    
  
    
    
      
      D3 photo
      
      D3
    
  
    
  
    Data-Driven Documents codes.
    

    

              
    • 
              
              
  • 
                


              
    • 
              
              
  • 
                
    
    
  
              
    •