I have collections of 72x72px images organized into folders of one to 30 images.*
I also have a page with a 72x360px area defined in it (whatever that needs to mean for this exercise) for displaying up to five images in a vertical stack. The page is provided with the URL for one or another folder in which it finds the images. Folders with less than five images simply don't populate the whole area (which therefore shows a background color); if there are more than five the page displays just the first five and crops the rest (the area, in other words, does not expand or contract).
A pair of small scroll-buttons below the area provide scrolling services (standard vertical scroll bars won't work with the page design). The scroll-buttons are smart: a button tap scrolls the display exactly five images and buttons dim if there's no more to scroll. A wish-list add-on would be to engage continuous smooth scrolling if the button is held down rather than clicked, with the scroll always coming to rest with five images in proper register in the area, but we can live without this.
Any help appreciated. I think I'm going to need more hand holding than just "you should use this" unfortunately, but simply being aimed in the right direction would at least be a start.
Thanks in advance - Jim
* Each image includes code for a balloon pop-up. Mousing over the image displays the popup; clicking on the link inside the popup takes the user to a URL in a new window, leaving the image's window open but blurred. All of this code is currently in place and I'm mentioning it just in case something about it has a bearing on the rest of this email.
So I dare to advice you to do the following things:
- search the plugin you like with query I proposed or something like this;
- if you would have troubles with inserting some specific solution into your web-page, then feel free to ask again (more specific answer). :-)
The only think I strongly insist - do not try to perform the whole work yourself from scratch - it is unnecessary, complicated and bugful idea.
Searching on "images galleries" does indeed present megatons of half-solutions but none that looked like they could be easily tweaked by a newbie for the specific functionality I've described. If you can think of one or two you know would work, that would obviously be helpful knowledge for me.
Ok... Since I am not a web-designer, for me it is easier to try and write something like this from scratch. Could you provide me set of test images and, maybe, sketch of the layout you want. By the way - do I understand correctly that names of images should obey some rule (or how you suppose to ask server to tell you the contents of directory?)
I'll get the specs, maybe a flow chart, and visuals that show what I'm after to you in the week ahead (would pdfs be best to send?).
Re "By the way..." I'm open to better ideas, but I was thinking of providing a cookie that holds the path to the image folder where the currently required collection of images is found. The cookie would be planted just before 'our' window is opened from elsewhere via newWin or similar. I'll explain why cookies, instead of just passing the path as a parameter in newWin, next week.
If you think it is something like what you want, you are welcome to see sources - it is short and simple enough script - may be you find out that your skills are enough to use this sample to your purposes. May be tuning it slightly - adding custom drawn buttons or disabling them for scrolling time etc.
Feel free to ask more questions.
About passing names of images as cookies... I think it would do also, but however it looks bit strange. If you can generate the page or its part on the server side, it looks far better simply to nest necessary names in something like json array in a script. Ok, you told you can explain it later.
Wow! Thanks. Your code appears to have exactly the functionality I need and I really like the way the image group scrolls into place smoothly rather than abruptly - very slick, perfect for my site, more than I had asked for.
Let me regroup here, get a better understanding of the code, and get back to you, particularly re the cookie strategy. (I'll download the code off your link so no need to send it.)
...what a nice way to start a new week. Thanks again.
Too much thanks for me. Though I could make smooth scrolling manually, but since I wanted to keep the code as short and simple as possible, I use here mechanism built into jQuery "animate" function. So direct your compliments to guys who provided us with such a nice framework.
As a matter of fact they invented far more funny strategies of animating movement - including bumping, jumping etc... ;-)
Rodion - I can't figure out how to get the "function appendImages" code to work as I need it too. I have a pdf page that describes the problem better than I can here. Is there a way I can send that to you, either through this forum or via email? - Jim