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.

Updated version in my next post, below. Click here to skip down a few posts to view the new demo or get installation instructions.

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

 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Mon, 2004-12-13 08:31

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.

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 01:43

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:

  1. Save fadein.js to your Gallery root, in the same folder with main.php.
  2. templates/layout.css.php: Add the following to the gsSingleImage class:
    background: url('../../images/loading.gif') 5% 5% no-repeat;
  3. templates/layout.css.php: Change .giThumbImage img { } to the following:
    .giThumbImage { background: url('../../images/loading.gif') 1% 20% no-repeat; }
  4. layouts/matrix/templates/: Add the following at the end of both albumBody.tpl and singleBody.tpl, after the </div>:
    <script type="text/javascript">
    //<![CDATA[
    start();
    //]]>
    </script>
  5. layouts/matrix/templates/singleBody.tpl: Change line 100 from <div class="gsSingleImage"> to the following:
    <div class="gsSingleImage" id="gsSingleImageId">
  6. layouts/matrix/templates/head.tpl: Add the following on a new line between </style> and {g->style}:
    <script type="text/javascript" src="fadein.js"></script>
  7. /modules/imageblock/templates/ImageBlock.tpl: Change lines 16 though 18 to the following:
        <div class="giThumbImage">
            <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$block.id`"}">
                {g->image item=$block.item image=$block.thumb maxSize=140}
            </a>
        </div>
    

What do you think? It should work with all sizes of images, including thumbnails and album previews.[/]

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 06:51

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". :)

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 06:54

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.

 
jmullan
jmullan's picture

Joined: 2002-07-28
Posts: 974
Posted: Tue, 2004-12-14 07:00
Quote:
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 .

Yes, but the image should be themeable.

 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Tue, 2004-12-14 07:02

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!

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 07:03

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.

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 13:45

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:

Quote:
Bharat Mediratta wrote:
> So does this mean you're ok with transferring the copyright (you'll
> still retain the author credits) to me? Or do you want to retain the
> copyright? Since this is a piece of library code, it can go either way
> (whereas some other core parts of the codebase have to be under our
> copyright).

Well, to be quite frank, I don't care all that much about whether I've copyright of it or not, I personally believe that "intellectual property" doesn't (and shouldn't) apply to technological ideas in software. And since most of the technique was from other sources, all I really had to do was integrate it with Gallery. So the script itself isn't really a library on its own, and the portions I wrote are useless without Gallery. Ergo, there's no reason why I should limit it in any way by retaining copyright. I only wrote it to help make Gallery 2 better :)

Although, to be honest, I don't quite understand why transferring copyright is necessary, I'll play along. *grins*

So sure, I've no problem with transferring the copyright to you, so long as I still keep the credit for contributing it. I'm thinking I might expand it a little, as I add more scripting to the Gallery 2 UI. The fade-in effect has caught my imagination, and now I've so many ideas on how to make the G2 interface more intuitive - and I remember reading somewhere that in usability tests, women learn technology better with animation - I find it helps me too :)

Which reminds me, I saw the tasks list on SourceForge - need help? I'll try to focus on (or remember) some of the UI-related tasks, and if I can improve something related to a task, I'll let you know. Already I was thinking of doing some kind of Welcome screen (since I felt confused when I first installed Gallery 2 - it said it had a problem with NetBPM, where the heck do I fix it? If people have problems installing modules and such, the interface should "remember" that and remind them of how to fix it later ...

Working for a better G2,

Louis St-Amour aka. CSpotkill, a gaming alias :)

 
baschny
baschny's picture

Joined: 2003-01-04
Posts: 328
Posted: Tue, 2004-12-14 15:41

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

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Tue, 2004-12-14 16:02

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.

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Fri, 2004-12-17 16:56

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Fri, 2004-12-17 20:56

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.

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Fri, 2004-12-17 21:31

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.

 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Sat, 2004-12-18 21:56

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.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Sun, 2004-12-19 16:25

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

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Mon, 2004-12-20 03:29

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

 
scishop

Joined: 2004-12-31
Posts: 11
Posted: Wed, 2005-01-05 23:35

This looks really neat!

Curious if its still being worked on, the demo page doesn't work any longer.

 
arnoadam

Joined: 2004-09-29
Posts: 32
Posted: Fri, 2005-04-01 22:23

bump

 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Mon, 2005-04-04 22:27

This is still on my radar, but we haven't had any resources to integrate it properly yet.

 
doctormord
doctormord's picture

Joined: 2005-01-26
Posts: 63
Posted: Mon, 2005-04-04 22:49

The Demo-Page wont work for me, the is only "loading..." on the album. :(

IE6

 
pauschpageDOTcom

Joined: 2004-03-20
Posts: 118
Posted: Fri, 2005-06-10 15:09

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Fri, 2005-06-10 15:31

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

 
pauschpageDOTcom

Joined: 2004-03-20
Posts: 118
Posted: Fri, 2005-06-10 15:46

yes - i know
its fantastic

but how can I copy it to my normal B3?

 
KAC

Joined: 2004-12-01
Posts: 164
Posted: Fri, 2005-06-10 18:29

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=

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Fri, 2005-06-10 19:40
pauschpageDOTcom wrote:
yes - i know
its fantastic

but how can I copy it to my normal B3?

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.

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Fri, 2005-06-10 19:47
KAC wrote:
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=

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.

 
slice56
slice56's picture

Joined: 2006-12-02
Posts: 4
Posted: Wed, 2008-02-13 14:44

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.