Thumbnails that fade-in after loading
CSpotkill
Joined: 2004-12-11
Posts: 113 |
Posted: Mon, 2004-12-13 08:24 |
In the spirit of "A UI that makes people say WOW!", check out this ECMAScript/DOM enhanced thumbnail page, where a loading graphic can be displayed (and animated), then once the image is loaded, it fades in with one of four different browser-specific methods. Heavily modified to fit G2, but based on code from clagnut/sandbox: Onload image fades without Flash. Here's the .js file: http://cszen.com/amc/fadein.js (And don't tell me about my messy variable naming, I know, I know ... ) All that's missing is a start(); in the <body> and a few customizations to the XHTML (View Source in your browser for details) Right now, it's still a little "proof-of-concept". I need to move the .js and start() edits to somewhere more appropriate, and I'd like to change the loading image, to an animated one (like the one on couloir.org, the inspiration for this effect) It works in Internet Explorer 6 for Windows XP SP2 and Firefox 1.0, and degrades well (didn't affect the page) in Opera 7.54 on Windows. I haven't tested in other browsers yet, but it should work in KHTML-based browsers, and Safari 1.2, according to clagnut.com. So, what do you think? I know, I should have worked more on replacing the float-based layout we have now with something more cross-browser, or comment on the UI itself, but I couldn't resist the "fun factor" of this. After all, coolness matters in development ;) |
|
Posts: 7994
That is sexy! We should get that into Matrix pronto! Sounds like you want to do a little clean up on it first, but when you think it's ready let us know and we can put it in and add it as an option in the Matrix layout.
Posts: 113
Okay, so ... what I have now probably (still) isn't up to the G2 coding standards, but it'll all get ironed out over time ...
So, after scrapping my UL-based layout for the standard tables one and fixing the IE resizing problem, I went back to my JavaScript and tried to make as few changes as possible to the source code. Here's what I came up with:
Demo at: http://www.cszen.com/amc/
Installation Instructions:
background: url('../../images/loading.gif') 5% 5% no-repeat;
.giThumbImage { background: url('../../images/loading.gif') 1% 20% no-repeat; }
<div class="gsSingleImage" id="gsSingleImageId">
<script type="text/javascript" src="fadein.js"></script>
What do you think? It should work with all sizes of images, including thumbnails and album previews.[/]
Posts: 113
I just saw in Thunderbird (from the gallery-checkins mailing list) that the loading.gif and the fadein.js were checked in by jmullan.
He placed fadein.js inside the /lib folder, which makes a ton of sense (I must have been blind to have missed it when I was trying to decide where to put it.) To put it there, the only change that should be affected is the one in head.tpl. Change src="fadein.js" to src="lib/fadein.js"
He also changed the location of the image, placing it in /themes/matrix/images/. This doesn't make as much sense, since I was in fact editing the Matrix layout, not the matrix theme. I also don't like the current loading image, it's in fact the same one used on clagnut.com for his example. I much prefer the animated one at http://www.couloir.org/ myself. So I'll try to come up with my own variation of that tomorrow, and perhaps make two versions, one white on a transparent background with darker antialiasing at the edges, and another black on transparent, with lighter edges. Pick whichever you like, I'll post the .psd (or .ai) if any theme-writers want to customize it further.
Beyond that, I didn't see checkins for the other files, so either its not reported in the emails or he hasn't checked in the rest and is waiting or working on it. I'm also not sure if anyone's checked in my IE float-wrapping fix yet or not.
So, I'm off to a good start, I think. Next, perhaps, I'll tackle some of the UI-related tasks listed on SourceForge, or maybe go though the gallery UI and "get creative".
Posts: 113
Hah. Just as I'm writing this, bharat removes the script file, saying "Removed this file temporarily while we make sure that it's ok to transfer the copyright"
I've no problems with it going in to the CVS, I've been expecting it to, actually ;)
However, by mentioning it, it makes me want to find out exactly how g2 is being licensed ... so ... just a min. I'll edit this post after I read up on it.
Ah, I see, according to sf.net, it's released under the GNU General Public License (GPL). Fine with me. Though by releasing it under the GPL, I'm not giving up my copyright in any way - I can still release the code under any license I choose, it's my work - I'm just letting others build on it, like Creative Commons licenses, and such. Works for me. I was, in fact, already thinking of creating a module for G2 to allow people to license images under CC licenses
In the interests of expediency, I just sent off emails to jmullan and bharat about it, telling them to check this thread.
Posts: 974
Yes, but the image should be themeable.
Posts: 7994
Heh, I was just on my way over here to ask you about it.
I'm the trustee of the copyright for Gallery, so all code contributions needed to be licensed to me and under the GPL. That's not necessarily the case for library code, as long as it's under the GPL. If it's a library that's maintained and has regular releases, we'll grab it and put it in the lib directory and keep it up to date.
The stuff that's in lib/javascript now is code that I wrote, so it's under our license and my copyright. If you want to maintain your own copyright on this code, that's fine -- we can put it somewhere else under the lib directory. I think it needs to have a LGPL, GPL or BSD license (or something less restrictive). Either way, we give you credit for being the author of the code (so let us know what information you want to include for that). If you could respond directly to this post and indicate how you want us to commit it, I'll re-add it in the correct place with the right copyright/license, etc.
Thanks!
Posts: 113
Perhaps ... but wouldn't it make sense to have a default image to go with the default .css file? (And default logos, buttons, etc.)
Then, when theme-writers override portions of the .css file, they can include their own image and override the default one just by changing the background: property for a class or two in their customized stylesheet.
Posts: 113
Well ... lol. I didn't mean to raise a stink over the copyright, just that I didn't understand why it was necessary, at least under the GPL. At the same time, I'm not dense, I can appreciate why having a central copyright over the entire G2 codebase can be beneficial. And, as I wrote in an email to Bharat, my portions of the fade-in script are essentially useless without G2 anyway:
Posts: 328
I like the idea of a "Welcome" screen that is displayed first after a site admin logs in, instead of just presenting him the (at first empty) root album. Giving hints, statistics, and other useful bla bla that might help an aspiring gallery administrator.
CSpotkill, could you file that as a RFE?
Cheers,
Ernesto
Posts: 113
Uh ... well, it's already listed in the SourceForge Tasks list, if that's what you mean. 86439 - Welcome view / Guided Tour.
Edit: And I've updated fadeIn.js a little, adding a startFade() method to reduce code duplication, and rearranging the CheckIfComplete function, which loops itself and waits until the image is fully complete before calling startFade(). I should probably add comments to the script as well, but I made the fatal assumption that it would be "obvious" and therefore comments wouldn't be necessary, as I wrote it. Ugh.
Posts: 113
Argh. There are a few bugs with the new version. Sometimes images don't load, or they all fade in at the same time, in "clumps". Ah well. I'll get to it eventually. This isn't a huge feature yet anyway, and it's too dependant on the existing HTML.
I've partially removed it from my test site, as a result. It was getting annoying, having to keep updating to the latest CVS version and maintain my own changes locally ;)
Posts: 808
I think this should become a module much like Imageframe. That way it could easily be disabled or enabled. I also think you should have a choice to only do it on the thumbnail page. I would like to use it on the thumbnail page but not the full size image.
Posts: 113
I was thinking that too, lvthunder. I want to get more of the main G2 UI worked out first, though. It's a good proof-of-concept script, though.
Posts: 7994
I was going to integrate this into the Matrix layout (we can make it optional, and let you choose which size images it applies to) but I noticed that you mentioned that there are some bugs in the latest version. Can you point me to the best version that you have? I'll work on that this evening.
Posts: 8601
features like imageframe and this fade thing are things multiple layouts may wish to use, so it's nice if they can do that without too much code replicated in each layout that wishes to use it...
Posts: 113
Sorry it's taken me so long to respond. The bugs are (unfortunately) logic errors, as it seems the script will sometimes fade in images before they've finished loading, and other times will load only 90% of the images, leaving gaping holes. Refreshing the page seems to fix the problems, but they still need to be fixed.
I'm currently upgrading my web server to PHP 4.3.10 so I don't have time right now to fix it. I'll try to work on it tomorrow. Other changes I want to make include adding comments and replacing the loading image.
As for reducing the amount of layout-specific code, the only way that would be possible is if the images had numbered IDs, then I could loop through the images and modify them to fit the script using JavaScript. It wouldn't be much more than a quick .tpl change, but it would still need to be done to every layout ... and I'm not sure how I'd fade in the ImageFrames or if I should ...
Posts: 11
This looks really neat!
Curious if its still being worked on, the demo page doesn't work any longer.
Posts: 32
bump
Posts: 7994
This is still on my radar, but we haven't had any resources to integrate it properly yet.
Posts: 63
The Demo-Page wont work for me, the is only "loading..." on the album.
IE6
Posts: 118
"Demo at: http://www.cszen.com/amc/ "
It does not work yet. Could you post a new example please?
Does it work with Beta 3?
Posts: 808
Padro Gilberto's Layout does this when you get to the main picture. Take a look http://www.pedrogilberto.net/gallery2 and he has made the layout available http://www.pedrogilberto.net/gallery2/layout.html
Posts: 118
yes - i know
its fantastic
but how can I copy it to my normal B3?
Posts: 164
I was told at the link below that it does not work with the current G2 code:
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=26040&highlight=
Posts: 808
I don't know yet as I haven't had the time to look at any of the code that he wrote. He did change some of the stuff in the modules so maybe if you install those maybe it would work. If it doesn't you'll have to look thru the other files to see how he did it. The other thing you might want to do is send him an email. He was nice enough to put the layout out there for everyone to download.
Posts: 808
You are correct that won't work because of all the changes that were made to the code after that was posted. That doesn't mean you can't get it to work. You just have to do what the original poster did to get it to work the first time. I'm sure there will be plenty of nifty things like this that people add to g2 once the devs say we are done tweaking the templating system until after g2 is released. I know I wouldn't want to make a bunch of layouts right now because it would be a pain to change them all every month or so until g2 came out.
Posts: 4
Im currently using the Carbon theme. Is it possible to get the image fading working on this theme? I noticed all of the demo pages are gone, so I thought I'd check and see if there has been any more progress on this for G2.