Results 1 to 4 of 4

Thread: Change multiple images with one click

Hybrid View

  1. #1
    Join Date
    Jun 2012

    Question Change multiple images with one click

    I'm a graphic designer and knows very little about coding. I am currently working on my website and am stuck with the problem stated below. I'm so lost that I'm not even sure how I should go by this. Should I use javascript or jQuery or something else? I'm hoping to achieve this in the simplest way possible as I'm not familiar with any programming languages. Pls help!!!

    Basically, I need to figure out a way to change multiple images/buttons with one click. Pls see attachment.

    Here I have a topFrame and a mainFrame. Buttons in topFrame will bring different content in mainFrame. And here comes the complicated part. I have a little "Hierarchy Chart" at the bottom left hand corner that explains how they are tiered. The Hexagon represents each client. The Triangle represents each project. The Star represents the numbers of images of each project (3 stars = 3 images). The Big Image is where the images are shown. ImageA and ImageB are graphic information of the Big Image.

    So, let's say I click on Button1, mainFrame will automatically load the 1st image of the 1st project of the 1st client. Corresponding graphic information of that image will also be loaded (ImageA + ImageB). Invisible /previous/next buttons will show when hovered. Once the next button is clicked, BigImage will load the 2nd image of the 1st project of the 1st client. ImageA and ImageB will change as well. And the 1st Star will no longer be highlighted but the 2nd Star since it represents the 2nd BigImage.

    And another tricky part is that both the Stars and the Triangles are buttons as well. So viewers can either click the previous/next button to navigate through the images, they can also click the Stars or the Triangles to achieve the same effect. They serve as both button as well as indicator.

    I hope I explain myself clearly. And many thanks!!!!

  2. #2
    Join Date
    May 2006
    Somewhere behind your screen
    as for me i am absolutely nothing in PS but i am never going to deal with photo art
    signature under construction

  3. #3
    Join Date
    Jun 2012
    Orange County California
    Definity your going to need JavaScript/jQuery, but your also going to have to be intimately familiar with CSS. And if your not familiar with any programming which JavaScript/jQuery is then your best bet is to find yourself a developer to create it for you.

  4. #4
    Join Date
    Oct 2010
    Versailles, France

    To a valient heart nothing impossible !

    It's not a problem to change multiple images with one click (the click can call a function which makes the different actions). The problem is only how to define the structure of your page...

    Then, you can probably build one script to manage the page (with this functions) and load dynamically different scripts(*) (one script for each button or content) to define the different variables (projectNumber, clientNumber, imageNumber... etc.) and load (or pre-load) the different images.

    Perhaps, this old thread could give you some ideas to work progressively...

    Good luck !

    (*) Like on this page
    Last edited by 007Julien; 06-21-2012 at 06:17 AM.

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.17292 seconds
  • Memory Usage 2,978KB
  • Queries Executed 13 (?)
More Information
Template Usage (29):
  • (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)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./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
  • ./includes/functions_threadedmode.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 (72):
  • 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_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_threaded
  • showthread_threaded_construct_link
  • 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