Collapsible Thumbnail Drag-and-Drop for Web Photo Selection
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional online photo service providers' websites are inefficient for selecting and managing groups of photos, as users must select each photo individually, lack feedback on the number of thumbnails being dragged, and do not preserve interim selections across pages, leading to cumbersome navigation and storage issues.
Innovation Solution
A method and system that allows users to select and drag thumbnail images as collapsible icons, providing feedback on the number being moved, and automatically updates the browser window, with persistent storage and on-demand display of the photo tray, using JavaScript and AJAX to handle user interactions and browser events.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If users select photos one by one using conventional browser selection boxes, then each photo can be selected individually, but the process becomes time-consuming when selecting groups of photos
Solution Approach 1:
The patent combines multiple photo selections into a single drag operation. Users can drag across multiple thumbnail images to select them simultaneously, merging what would otherwise require multiple individual click actions into one continuous motion, thereby dramatically reducing the time needed to select groups of photos
Solution Approach 2:
The patent implements preliminary selection through drag gestures before the actual selection is finalized. As users drag across thumbnails, the system pre-selects images in the path of the drag, allowing users to adjust their selection by extending or modifying the drag gesture before releasing, thus streamlining the selection process
2Ease of operation
If thumbnail images remain at full size while being dragged, then users can see the images clearly, but they block the view of a large portion of the browser window
Solution Approach 1:
The patent applies dynamic scaling to thumbnail images during drag operations. The thumbnails automatically resize based on their position and the number of selected images, transitioning from full size when stationary to smaller sizes during drag, and adjusting their arrangement dynamically to minimize obstruction of the browser window while remaining visible
Solution Approach 2:
The patent nests multiple thumbnail images within a compact drag selection container. When multiple thumbnails are selected, they are arranged in a condensed format within the drag boundary, allowing them to be visible but occupying minimal space, similar to how nested dolls fit within each other while remaining visible
3Area of stationary object
If the browser window size is changed, then users can adjust the viewing area, but the browser does not display the maximum number of digital photo images
Solution Approach 1:
The patent implements dynamic grid adjustment that automatically recalculates and repositions thumbnail images when the browser window is resized. The system monitors window dimensions and dynamically adjusts the number of columns and rows to maximize the display of thumbnail images within the available space, ensuring optimal utilization of the viewing area
Solution Approach 2:
The patent changes layout parameters such as thumbnail size, grid density, and spacing based on the browser window dimensions. When the window is resized, the system adjusts these parameters to fit the new space, increasing density when space is available and reducing it when space is constrained, thereby maximizing the number of visible photos
4Adaptability or versatility
If users navigate to another web page to retrieve information, then they can gather additional content, but their interim photo selection is not preserved when they return
Solution Approach 1:
The patent creates a persistent copy of the user's photo selection in server-side storage or local storage that survives page navigations. When users leave the photo selection page to gather information elsewhere, the system maintains a copy of their selected photos, and upon return, automatically restores the selection from this persistent copy, preventing any loss of selection data
5Ease of operation
If the storage location is displayed on the first page, then users can easily access stored photos, but users must traverse the browser window up and down to move selections from subsequent pages
Solution Approach 1:
The patent implements a universal drag-and-drop interface that works across all pages and locations within the website. The photo tray and storage locations become accessible from any page through consistent navigation elements, allowing users to drag photos to storage from any position in the browser window without needing to return to the first page, making the system location-independent
Data Source
AI summary
Method and system for presenting photos on a website are disclosed. The method includes selecting one or more thumbnail images in a browser window on a website in response to a select command from a user, dragging the one or more thumbnail images to a drop target in response to a drag command from the user, displaying the one or more thumbnail images in transit to the drop target as collapsible thumbnail images, and dropping the collapsible thumbnail images to the drop target in response to a drop command from the user.