Results 1 to 10 of 10

Thread: Need help creating a scrolling image display

  1. #1
    Join Date
    Mar 2012

    Need help creating a scrolling image display

    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.

    I understand programing pretty well and basic HTML CS5 but I don't speak JavaScript or jQuery at all. In fact I'm not even sure that's where what I need would best be created and if so, which tools would do it best. Or maybe it already exists somewhere. Fancy Box? Spry? I researched all of this stuff as best I could and a lot of it seemed like it might work, but I simply don't know enough to figure out the best plan of attack.

    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.

  2. #2
    Join Date
    Mar 2012
    Saint-Petersburg, Russia

    It seems that you mean functionality of "image gallery". If you ask google about "jquery image gallery" or "javascript image gallery" you will find megatons of ready and half-ready solutions. Many of them with demo.

    The problem is that if you have absolutely no skills in javascript, all this stuff would be of no use to you. Minimal knowledge is essential.

    So I dare to advice you to do the following things:
    - spent a day or several days to read some javascript tutorial and do some simple exercises - if you feel well with programming it would be very easy and joyful to you;
    - 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.

  3. #3
    Join Date
    Mar 2012

    Thanks, Rodion, but...

    Rodion -

    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.

    Spending a day or two learning javascript so I can write simple functions doesn't seem the way to go. At best, I'd know enough at the end to maybe better evaluate the image gallery megatonnage and perhaps zero in on a gallery or two that might work given some street smart tweaking, but getting a lead to those galleries is one sort of help I'm hoping to get from you javascript experts. The other, of course, is getting some help with the tweaking afterwards.

    Thanks for your advice.


  4. #4
    Join Date
    Mar 2012
    Saint-Petersburg, Russia
    Hm... There are two points - most of these galleries are widely customizable using options passed to their initialization functions or changing styles. That is why I proposed to spend some time on javascript - you will anyway need it to attach the working solution to your project and set up it. It is not for creating gallery yourself.

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

  5. #5
    Join Date
    Mar 2012
    Re "Hm..." I should clarify myself: While I can't originate javascript, I can tweak function initializations, config settings, css styles etc., once I have working js in front of me, and I can usually figure how the code itself works too, with my copy of "JavaScript & jQuery" at my side, thanks to my programing experience back in the Pascal days. (Program flow is program flow, regardless of how it's expressed, right?) I won't need much hand-holding in this area, so I think I have "Hm' more or less covered already.

    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.

    ...thanks very much for looking at this for me.


  6. #6
    Join Date
    Mar 2012
    Saint-Petersburg, Russia
    As I said, I am not web-designer, so I preferred rather to try and implement the sample of the functionality, as I understood it.


    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.

  7. #7
    Join Date
    Mar 2012
    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.


  8. #8
    Join Date
    Mar 2012
    Saint-Petersburg, Russia
    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... ;-)

    http://api.jquery.com/animate/ - if you want to dive deeper.

  9. #9
    Join Date
    Mar 2012
    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

  10. #10
    Join Date
    Mar 2012
    Saint-Petersburg, Russia
    I sent you my mail address via private message, feel free to write me - optionally you may use any way of passing files you prefer (forum dropbox etc.)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16150 seconds
  • Memory Usage 2,939KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (10)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates