Comments (17)
begun development in branch more_thumb_sizes
but in Jason's code the only point where thumbnail sizes was used was when going fullscreen, and so it's now in this branch
However, I intend you want to manage the different screen sizes in javascript. How could it be accomplished?
- window.window.innerWidth and window.window.innerHeight
- window.screen.availWidth and window.screen.availHeight
What should I use?
from myphotoshare.
or
$(window).height();
$(window).width();
?
from myphotoshare.
Ah, wow, this was news to me, but you are right. I always assumed that the multiple thumbnail sizes would be used dynamically depending on the size of the browser window. So given the original PhotoFloat-sizes…
thumb_sizes = [ (75, True), (150, True), (640, False), (800, False), (1024, False) ]
... I always thought that it would use 640px if the browser was tiny, and 1024px if it was larger. On my "production" install, I have 150s + 1024 + 1600. Looking at it now, you are right that it always chooses 1024 for the non-fullscreen, and 1600 only for fullscreen.
I'm not entirely sure how the different JavaScript-variables regarding window size behaves on different clients -- I guess the main goal would be to differentiate between mobile units, and non-mobile units? Given retina screens etc. nowadays, I guess resolution could be rather high on those screens.
from myphotoshare.
I guess it's not much use to change which image to load if you resize the browser after the images are loaded, as that requires you to load more stuff. In other words; get the size of the browser at load time, and then keep using that (so if you resize the browser after load, you would need to refresh to get bigger/smaller images loaded).
from myphotoshare.
Since we already have jQuery, the $(window).height();
and $(window).width();
seems to be the most cross-platform enabled method to get the size of the browser window.
Pure JS would be something like this;
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
from myphotoshare.
done: I choose the thumbnail so that it's not smaller than max(screen width, screen height)
from myphotoshare.
I made the python script include in every album the sizes array, so that javascript can know what sizes has been generated
from myphotoshare.
Seems to work fine, however, the logic should probably be tweaked a bit. Currently it selects 1200px thumbnails even if the resolution of the browser is 1250x150px, at which even 800px would be sufficient enough, since the image is scaled down to keep its proportions. I don't think we need so many sizes either? 800px + 1200px + 1600px or something would be plenty? Thats three increments with approximately 50% increased size each step (measured in total pixels).
from myphotoshare.
The criterium I choose is that the thumbnail isn't smaller than the available size, because if the browser enlarges it, it becomes blurred. Perhaps e finer criterium can be chosen
from myphotoshare.
maybe now is better... check it
from myphotoshare.
The logic seems to be working now, yes! Tried a lot of different variations, resizing browsers, going from non-fullscreen to fullscreen, and back, and it seems OK.
However, there seems to be an issue with scaling the images (by the browser and/or JS) in certain scenarios, causing the image to break it's proportions. Not sure if this is caused by these changes, but. Happens in relation to showing/removing the thumbnail-row in the bottom of the image.
I tested by using landscape image, setting browser width to 950px, then reducing the height. Started on 650px. At 701px the thumbnail-row appears. At 712px height, it's still fine, but at 713px height, it changes size and/or proportions. From 713px till 919px, the image is resized only in the height, losing it's proportions (becoming taller, but keeping the width). At 920px, it stops resizing the image, but keeps the disproportion. Increasing the height of the browser only results in the image being centered (but keeping its disproportion).
The opposite disproportion (becoming smaller, but keeping the width) can be achieved by refreshing the browser while at a big enough height (f.ex. 930px) having the same width as before (950px), and then decreasing the height.
950x919 (disproportion, stretching it higher):
950x713 (disproportion, squeezing it lower):
from myphotoshare.
appearing and disappering of bottom thumbnails is due to responsivness
from myphotoshare.
could you suggest me a simple way to reproduce the misbehaviour?
from myphotoshare.
I pretty much explained it in detail in the above post, giving screenshots at each step?
from myphotoshare.
This does not happen on "my" fork of PhotoFloat (I haven't switched to this yet, but I plan to), and it does not happen in your "master" branch, so this seems to be caused by the new logic in the "more_thumb_sizes" branch.
The simplest way to explain the issue; make the size of your web browser 950x600. Navigate to a landscape image. Refresh (making sure to clear cache). Then drag/change the height of the window only (by dragging on the bottom side), and drag it down so it becomes higher. Watch the proportions of the image after the thumbnail-row on the bottom appears.
from myphotoshare.
I think it's solved now, check it
from myphotoshare.
I can confirm that this is solved, at least for the test I did.
from myphotoshare.
Related Issues (20)
- privacy concerns when showing original image HOT 4
- Allow % characters in `album.ini` files
- same image in different folders generates trouble in search result
- space for folder name not corrected
- social bar: add a button to get the share link copied to clipboard
- Add option to go directly to image fullscreen
- Set cache subfolders number according to media number
- use os.walk to scan directories in TreeWalker.walk() HOT 1
- wrong album caption height
- copy copyright info to reduced size images and thumbnails
- album.ini metadata has trouble with Python 2 when filenames have accented characters HOT 4
- ready for 3.4? HOT 20
- managing stop words in js? HOT 2
- album.ini name in options file HOT 7
- Problems with non-occidental languages? HOT 2
- Roadmap for version 3.5 HOT 3
- Optimization of index files creation HOT 4
- do not generate nor save virtual albums if not needed HOT 6
- Add options to display descriptions
- Bugs when used on iPad or mobile phone HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from myphotoshare.