Untitled
public
Jun 10, 2025
Never
99
This code is a JavaScript bookmarklet that, when executed on a webpage, creates a popup that displays all the images found on that page. It organizes the images in a grid layout and allows the user to filter images based on their dimensions.
Here is a breakdown of the code:
1. Selects all the images on the webpage.
2. Checks if there are images on the webpage. If no images are found, it displays an alert message and returns.
3. Calculates the total number of images and determines the number of columns in the grid layout.
4. Creates a container element for the popup and styles it.
5. Creates close button, ratio button, and filter select dropdown for controlling the display of images.
6. Defines functions for creating image thumbnail wrappers and updating the display of images based on filters.
7. Event listeners are added to the close button, ratio button, and filter select dropdown.
8. When the ratio button is clicked, it toggles the visibility of image aspect ratio labels.
9. When the filter select dropdown value changes, it updates the minimum image size and re-renders the display.
Overall, this code creates a user-friendly image gallery popup with filtering capabilities based on dimensions.
1 javascript:(function()%7B(function%20()%20%7B%0A%20%20const%20images%20%3D%20document.querySelectorAll('body%20img')%3B%0A%20%20if%20(images.length%20%3D%3D%3D%200)%20%7B%0A%20%20%20%20alert('No%20image')%3B%0A%20%20%20%20return%3B%0A%20%20%7D%0A%0A%20%20const%20totalImages%20%3D%20images.length%3B%0A%20%20const%20cols%20%3D%20Math.ceil(Math.sqrt(totalImages))%3B%0A%20%20const%20container%20%3D%20document.createElement('div')%3B%0A%20%20container.style.cssText%20%3D%20%60%0A%20%20%20%20position%3A%20fixed%3B%20top%3A%200%3B%20left%3A%200%3B%20width%3A%20100%25%3B%20height%3A%20100%25%3B%0A%20%20%20%20background-color%3A%20rgba(0%2C%200%2C%200%2C%200.8)%3B%20display%3A%20flex%3B%0A%20%20%20%20flex-wrap%3A%20wrap%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%0A%20%20%20%20z-index%3A%2010000%3B%20overflow%3A%20auto%3B%0A%20%20%60%3B%0A%0A%20%20const%20closeButton%20%3D%20document.createElement('button')%3B%0A%20%20closeButton.innerText%20%3D%20'Close'%3B%0A%20%20closeButton.style.cssText%20%3D%20%60%0A%20%20%20%20position%3A%20fixed%3B%20top%3A%2010px%3B%20right%3A%2010px%3B%20padding%3A%2010px%3B%0A%20%20%20%20background%3A%20%23fff%3B%20border%3A%20none%3B%20cursor%3A%20pointer%3B%20z-index%3A%2010001%3B%0A%20%20%60%3B%0A%0A%20%20const%20ratioButton%20%3D%20document.createElement('button')%3B%0A%20%20ratioButton.innerText%20%3D%20'Ratio'%3B%0A%20%20ratioButton.style.cssText%20%3D%20%60%0A%20%20%20%20position%3A%20fixed%3B%20top%3A%2010px%3B%20right%3A%2080px%3B%20padding%3A%2010px%3B%0A%20%20%20%20background%3A%20%23fff%3B%20border%3A%20none%3B%20cursor%3A%20pointer%3B%20z-index%3A%2010001%3B%0A%20%20%60%3B%0A%0A%20%20const%20filterSelect%20%3D%20document.createElement('select')%3B%0A%20%20%5B0%2C%2050%2C%20100%2C%20200%2C%20400%2C%20800%5D.forEach(val%20%3D%3E%20%7B%0A%20%20%20%20const%20option%20%3D%20document.createElement('option')%3B%0A%20%20%20%20option.value%20%3D%20val%3B%0A%20%20%20%20option.innerText%20%3D%20%60≥%20%24%7Bval%7Dpx%60%3B%0A%20%20%20%20filterSelect.appendChild(option)%3B%0A%20%20%7D)%3B%0A%20%20filterSelect.style.cssText%20%3D%20%60%0A%20%20%20%20position%3A%20fixed%3B%20top%3A%2010px%3B%20right%3A%20160px%3B%20padding%3A%2010px%3B%0A%20%20%20%20z-index%3A%2010001%3B%20font-size%3A%2014px%3B%0A%20%20%60%3B%0A%0A%20%20let%20showRatio%20%3D%20false%3B%0A%20%20let%20minSize%20%3D%200%3B%20%2F%2F%20default%20value%0A%0A%20%20const%20createThumbWrapper%20%3D%20(img)%20%3D%3E%20%7B%0A%20%20%20%20const%20wrapper%20%3D%20document.createElement('div')%3B%0A%20%20%20%20wrapper.className%20%3D%20'thumb-wrapper'%3B%0A%20%20%20%20wrapper.style.cssText%20%3D%20%60%0A%20%20%20%20%20%20display%3A%20flex%3B%20flex-direction%3A%20column%3B%20align-items%3A%20center%3B%0A%20%20%20%20%20%20margin%3A%205px%3B%20max-width%3A%20calc(100%25%20%2F%20%24%7Bcols%7D%20-%2010px)%3B%0A%20%20%20%20%20%20flex%3A%201%200%20calc(100%25%20%2F%20%24%7Bcols%7D%20-%2010px)%3B%0A%20%20%20%20%60%3B%0A%0A%20%20%20%20const%20thumb%20%3D%20document.createElement('img')%3B%0A%20%20%20%20thumb.src%20%3D%20img.src%3B%0A%20%20%20%20thumb.style.cssText%20%3D%20%60%0A%20%20%20%20%20%20width%3A%20100%25%3B%20height%3A%20auto%3B%20cursor%3A%20pointer%3B%20object-fit%3A%20contain%3B%0A%20%20%20%20%60%3B%0A%0A%20%20%20%20const%20ratioLabel%20%3D%20document.createElement('div')%3B%0A%20%20%20%20ratioLabel.className%20%3D%20'ratio-label'%3B%0A%20%20%20%20ratioLabel.innerText%20%3D%20%60%24%7Bimg.naturalWidth%7D%20×%20%24%7Bimg.naturalHeight%7D%60%3B%0A%20%20%20%20ratioLabel.style.cssText%20%3D%20%60%0A%20%20%20%20%20%20color%3A%20%23fff%3B%20font-size%3A%2012px%3B%20margin-top%3A%202px%3B%20display%3A%20none%3B%0A%20%20%20%20%60%3B%0A%0A%20%20%20%20thumb.addEventListener('click'%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20rect%20%3D%20img.getBoundingClientRect()%3B%0A%20%20%20%20%20%20window.scrollTo(%7B%0A%20%20%20%20%20%20%20%20top%3A%20rect.top%20%2B%20window.scrollY%20-%20(window.innerHeight%20%2F%202%20-%20rect.height%20%2F%202)%2C%0A%20%20%20%20%20%20%20%20behavior%3A%20'smooth'%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20document.body.removeChild(container)%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20wrapper.appendChild(thumb)%3B%0A%20%20%20%20wrapper.appendChild(ratioLabel)%3B%0A%20%20%20%20return%20wrapper%3B%0A%20%20%7D%3B%0A%0A%20%20const%20updateDisplay%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20container.querySelectorAll('.thumb-wrapper').forEach(e%20%3D%3E%20e.remove())%3B%0A%0A%20%20%20%20images.forEach(img%20%3D%3E%20%7B%0A%20%20%20%20%20%20if%20(%0A%20%20%20%20%20%20%20%20img.naturalWidth%20%3E%3D%20minSize%20%7C%7C%0A%20%20%20%20%20%20%20%20img.naturalHeight%20%3E%3D%20minSize%0A%20%20%20%20%20%20)%20%7B%0A%20%20%20%20%20%20%20%20const%20wrapper%20%3D%20createThumbWrapper(img)%3B%0A%20%20%20%20%20%20%20%20if%20(showRatio)%20%7B%0A%20%20%20%20%20%20%20%20%20%20wrapper.querySelector('.ratio-label').style.display%20%3D%20'block'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20container.appendChild(wrapper)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20closeButton.addEventListener('click'%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20document.body.removeChild(container)%3B%0A%20%20%7D)%3B%0A%0A%20%20ratioButton.addEventListener('click'%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20showRatio%20%3D%20!showRatio%3B%0A%20%20%20%20container.querySelectorAll('.ratio-label').forEach(label%20%3D%3E%20%7B%0A%20%20%20%20%20%20label.style.display%20%3D%20showRatio%20%3F%20'block'%20%3A%20'none'%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%0A%0A%20%20filterSelect.addEventListener('change'%2C%20(e)%20%3D%3E%20%7B%0A%20%20%20%20minSize%20%3D%20parseInt(e.target.value%2C%2010)%3B%0A%20%20%20%20updateDisplay()%3B%0A%20%20%7D)%3B%0A%0A%20%20container.appendChild(closeButton)%3B%0A%20%20container.appendChild(ratioButton)%3B%0A%20%20container.appendChild(filterSelect)%3B%0A%0A%20%20updateDisplay()%3B%20%2F%2F%20initial%20render%0A%20%20document.body.appendChild(container)%3B%0A%7D)()%3B%7D)()%3B