www.webdeveloper.com
Results 1 to 10 of 10

Thread: multiple galleries on one page using this script...how?

  1. #1
    Join Date
    Jun 2010
    Posts
    53

    multiple galleries on one page using this script...how?

    I'm currently using the script here for a very simple image gallery on my site.

    I was wondering if it was possible to have multiple galleries on one page. If anyone can help me I'd appreciate it lots.

    Thanks

  2. #2
    Join Date
    Jun 2010
    Posts
    53
    Or is there a way I can manually choose which image in the array I can include into a slide?

  3. #3
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,942

    Lightbulb

    Here's a nice modification to my original version ...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Multiple Slide Gallery (prototype)</title>
    <!-- Modified from: http://www.codingforums.com/showthread.php?p=962068#post962068 -->
    </head>
    
    <body>
    <div style="text-align: center">
    <!--  Place the first image here  -->
      <img src="http://javascript.internet.com/image-effects/pix1-sm.gif"
       id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
      <br>
    <!--  Place the text for the first image here  -->
      <div id="burns">The beautiful mountains</div>
    
      <p>
      <a href="#" onclick="S1.UpDown(-1); return false;">&laquo; Previous</a> |
      <a href="#" onclick="S1.UpDown(1); return false;"> Next &raquo;</a>
    </div>
    <div style="text-align: center">
    <!--  Place the first image here  -->
      <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg","Exhausted"
       id="mypic2" name="mypic" alt="11.jpg" border="0" height="150" width="200">
      <br>
    <!--  Place the text for the first image here  -->
      <div id="burns2">Exhausted</div>
    
      <p>
      <a href="#" onclick="S2.UpDown(-1); return false;">&laquo; Previous</a> |
      <a href="#" onclick="S2.UpDown(1); return false;"> Next &raquo;</a>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function SimpleSlideShow(o){
     this.img=document.getElementById(o.ImageID);
     this.txt=document.getElementById(o.TextID);
     this.baseURL = o.baseURL;
     this.ary=o.Array||[];
     this.cnt=0;
    }
    
    SimpleSlideShow.prototype.UpDown=function(ud){
      this.cnt+=ud;
      this.cnt=this.cnt<0 ? this.ary.length-1 : this.cnt==this.ary.length ? 0 : this.cnt;
      if (this.ary[this.cnt]){
       if (this.img && this.ary[this.cnt][0]){
        this.img.src=this.baseURL+this.ary[this.cnt][0];
        this.img.alt=this.ary[this.cnt][1];
       }
       if (this.txt) { this.txt.innerHTML=this.ary[this.cnt][1]||''; }
      }
    }
    
    S1=new SimpleSlideShow({
     ImageID:'mypic',
     TextID:'burns',
     baseURL:'',
     Array:[
      ['http://javascript.internet.com/image-effects/pix1-sm.gif', 'The beautiful mountains'],
      ['http://javascript.internet.com/image-effects/pix2-sm.gif', 'The crystal clear lake'],
      ['http://javascript.internet.com/image-effects/pix3-sm.gif', 'The lonesome, barren tree']
    ]});
    
    S2=new SimpleSlideShow({
     ImageID:'mypic2',
     TextID:'burns2',
     baseURL:'http://www.nova.edu/hpd/otm/pics/4fun/',
     Array:[
      ['11.jpg', 'Exhausted'],
      ['12.jpg', 'Confused'],
      ['13.jpg', 'Ecstatic'],
      ['14.jpg', 'Guilty'],
      ['15.jpg', 'Suspicious'],
      ['21.jpg', 'Angry'],
      ['22.jpg', 'Hysterical'],
      ['23.jpg', 'Frustrated'],
      ['24.jpg', 'Sad'],
      ['25.jpg', 'Confident'],
      ['31.jpg', 'Embarrassed'],
      ['32.jpg', 'Happy'],
      ['33.jpg', 'Mischievous'],
      ['34.jpg', 'Disgusted'],
      ['35.jpg', 'Frightened'],
      ['41.jpg', 'Enraged'],
      ['42.jpg', 'Ashamed'],
      ['43.jpg', 'Cautious'],
      ['44.jpg', 'Smut'],
      ['45.jpg', 'Depressed'],
      ['51.jpg', 'Overwhelmed'],
      ['52.jpg', 'Hopeful'],
      ['53.jpg', 'Lonely'],
      ['54.jpg', 'Lovestruck'],
      ['55.jpg', 'Jealous'],
      ['61.jpg', 'Bored'],
      ['62.jpg', 'Surprised'],
      ['63.jpg', 'Anxious'],
      ['64.jpg', 'Shocked'],
      ['65.jpg', 'Shy']
    ]});
    
    /*]]>*/
    </script>
    </body>
    </html>
    Modified further from 'vwphillips' here.

    Can use with or without a 'baseURL' path.
    Pretty easy to modify further.

    Good Luck!
    Last edited by JMRKER; 06-06-2010 at 12:47 PM.

  4. #4
    Join Date
    Jul 2007
    Posts
    386
    Here is an example I whipped up.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    .gallery {
        font-family: Arial;
        margin-bottom:15px;
        text-align:center;
    }
    </style>
    <script type="text/javascript">
    var galleries = {
        gallery_1: {
            current: 0,
            images: [
                'http://javascript.internet.com/image-effects/pix1-sm.gif',
                'http://javascript.internet.com/image-effects/pix2-sm.gif',
                'http://javascript.internet.com/image-effects/pix3-sm.gif'
            ],
            titles: [
                'information',
                'interference',
                'message'
            ],
            texts: [
                'The beautiful mountains',
                'The crystal clear lake',
                'The lonesome, barren tree'
            ]
        },
        
        gallery_2: {
            current: 0,
            images: [
                'http://javascript.internet.com/image-effects/pix2-sm.gif',
                'http://javascript.internet.com/image-effects/pix1-sm.gif',
                'http://javascript.internet.com/image-effects/pix3-sm.gif'
            ],
            titles: [
                'interference',
                'information',
                'message'
            ],
            texts: [
                'The crystal clear lake',
                'The beautiful mountains',
                'The lonesome, barren tree'
            ]
        }
    };
    
    function loadGalleries()
    {
        var g = document.getElementById('galleries');
        
        for (var k in galleries)
        {
            var gHtml = document.createElement('div');
                gHtml.id = k;
                gHtml.className = 'gallery';
            var gImg = new Image(200, 150);
                gImg.src = galleries[k].images[0];
                gImg.title = galleries[k].titles[0];
                gImg.alt = '';
            var gText = document.createElement('div');
                gText.appendChild(document.createTextNode(galleries[k].texts[0]));
            var prev = document.createElement('a');
                prev.href = '#';
                prev.appendChild(document.createTextNode('&#171; Previous'));
                prev.onclick = function() {
                    slideshowBack(this.parentNode.id);
                    return false;
                };
            var next = document.createElement('a');
                next.href = '#';
                next.appendChild(document.createTextNode('Next &#187;'));
                next.onclick = function() {
                    slideshowUp(this.parentNode.id);
                    return false;
                };
            
            gHtml.appendChild(gImg);
            gHtml.appendChild(document.createElement('br'));
            gHtml.appendChild(gText);
            gHtml.appendChild(document.createElement('p'));
            gHtml.appendChild(prev);
            gHtml.appendChild(document.createTextNode('\xA0\xA0|\xA0\xA0'));
            gHtml.appendChild(next);
            
            g.appendChild(gHtml);
        }
    }
    
    function slideshowBack(gid)
    {
        var g = galleries[gid];
        
        g.current--;
        if (g.current < 0)
            g.current = g.images.length - 1;
        
        loadImage(gid);
    }
    
    function slideshowUp(gid)
    {
        var g = galleries[gid];
        
        g.current++;
        if (g.current == g.images.length)
            g.current = 0;
        
        loadImage(gid);
    }
    
    function loadImage(gid)
    {
        var g = galleries[gid];
        
        var img = new Image();
            img.onload = function() {
                var gHtml = document.getElementById(gid);
                    gHtml.getElementsByTagName('div')[0].innerHTML = g.texts[g.current];
                var gImg = gHtml.getElementsByTagName('img')[0];
                    gImg.title = g.titles[g.current];
                    gImg.src = this.src;
            };
            img.src = g.images[g.current];
    }
    </script>
    </head>
    <body onload="loadGalleries()">
    
    <div id="galleries"></div>
    
    </body>
    </html>
    I took what you provided as an example to create this. The creation of the galleries is done with DOM create methods. Change it to what you want.

  5. #5
    Join Date
    Jun 2010
    Posts
    53
    Quote Originally Posted by JMRKER View Post
    Here's a nice modification to my original version ...
    Modified further from 'vwphillips' here.

    Can use with or without a 'baseURL' path.
    Pretty easy to modify further.

    Good Luck!
    Thanks again This worked well. The only thing I'm wondering is if there's a way to put in a loader animation for when the pics load. When I click on the next/prev links, sometimes it takes a few seconds for the new image to pop up.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,709
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div style="text-align: center">
      <!--  Place the first image here  -->
      <img src="http://javascript.internet.com/image-effects/pix1-sm.gif" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
      <br>
      <!--  Place the text for the first image here  -->
      <div id="burns">The beautiful mountains</div>
    
      <p>
      <a href="#" onclick="S1.UpDown(-1); return false;">&laquo; Previous</a> |
      <a href="#" onclick="S1.UpDown(1); return false;"> Next &raquo;</a>
    </div>
    <div style="text-align: center">
      <!--  Place the first image here  -->
      <img src="http://javascript.internet.com/image-effects/pix1-sm.gif" id="mypic2" name="mypic" alt="information" border="0" height="150" width="200">
      <br>
      <!--  Place the text for the first image here  -->
      <div id="burns2">The beautiful mountains</div>
    
      <p>
      <a href="#" onclick="S2.UpDown(-1); return false;">&laquo; Previous</a> |
      <a href="#" onclick="S2.UpDown(1); return false;"> Next &raquo;</a>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function SimpleSlideShow(o){
     this.img=document.getElementById(o.ImageID);
     this.txt=document.getElementById(o.TextID);
     this.ary=o.Array||[];
     this.cnt=0;
    }
    
    SimpleSlideShow.prototype.UpDown=function(ud){
      clearTimeout(this.to);
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
      if (this.ary[this.cnt]){
       if (typeof(this.ary[this.cnt][0])=='string'){
        var src=this.ary[this.cnt][0];
        this.ary[this.cnt][0]=new Image();
        this.ary[this.cnt][0].src=src;
       }
       if (this.ary[this.cnt][0].width<40){
        var oop=this;
        return this.to=setTimeout(function(){ oop.UpDown(0); },100);
       }
       if (this.img&&this.ary[this.cnt][0]){
        this.img.src=this.ary[this.cnt][0].src;
        this.img.alt=this.ary[this.cnt][1];
       }
       if (this.txt){
        this.txt.innerHTML=this.ary[this.cnt][2]||'';
       }
      }
     }
    
    S1=new SimpleSlideShow({
     ImageID:'mypic',
     TextID:'burns',
     Array:[
      ['http://javascript.internet.com/image-effects/pix1-sm.gif','information', 'The beautiful mountains'],
      ['http://javascript.internet.com/image-effects/pix2-sm.gif','interference','The crystal clear lake'],
      ['http://javascript.internet.com/image-effects/pix3-sm.gif','message','The lonesome, barren tree']
    ]
    });
    
    S2=new SimpleSlideShow({
     ImageID:'mypic2',
     TextID:'burns2',
     Array:[
      ['http://javascript.internet.com/image-effects/pix1-sm.gif','information', 'The beautiful mountains'],
      ['http://javascript.internet.com/image-effects/pix3-sm.gif','message','The lonesome, barren tree']
    ]
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jun 2010
    Posts
    53
    @vwphillips

    Maybe I missed it but where would I insert the src for the loading.gif?

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,709
    Code:
    SimpleSlideShow.prototype.UpDown=function(ud){
      clearTimeout(this.to);
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
      if (this.ary[this.cnt]){
       if (typeof(this.ary[this.cnt][0])=='string'){
        var src=this.ary[this.cnt][0];
        this.ary[this.cnt][0]=new Image();
        this.ary[this.cnt][0].src=src;
       }
       if (this.ary[this.cnt][0].width<40){
        this.img.src='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
        var oop=this;
        return this.to=setTimeout(function(){ oop.UpDown(0); },100);
       }
       if (this.img&&this.ary[this.cnt][0]){
        this.img.src=this.ary[this.cnt][0].src;
        this.img.alt=this.ary[this.cnt][1];
       }
       if (this.txt){
        this.txt.innerHTML=this.ary[this.cnt][2]||'';
       }
      }
     }
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Aug 2013
    Posts
    1
    Quote Originally Posted by vwphillips View Post
    Code:
    SimpleSlideShow.prototype.UpDown=function(ud){
      clearTimeout(this.to);
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
      if (this.ary[this.cnt]){
       if (typeof(this.ary[this.cnt][0])=='string'){
        var src=this.ary[this.cnt][0];
        this.ary[this.cnt][0]=new Image();
        this.ary[this.cnt][0].src=src;
       }
       if (this.ary[this.cnt][0].width<40){
        this.img.src='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
        var oop=this;
        return this.to=setTimeout(function(){ oop.UpDown(0); },100);
       }
       if (this.img&&this.ary[this.cnt][0]){
        this.img.src=this.ary[this.cnt][0].src;
        this.img.alt=this.ary[this.cnt][1];
       }
       if (this.txt){
        this.txt.innerHTML=this.ary[this.cnt][2]||'';
       }
      }
     }
    -this is exactly what I need however the next and previous buttons dont link to the next image on either gallery. The only modification that I've made for this it to change out the images/captions.

    <a href="#" onclick="S1.UpDown(-1); return false;"> Previous</a> |
    <a href="#" onclick="S1.UpDown(1); return false;"> Next </a>

    Should I be modifying these links to something?

    Thanks,
    B.M.

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,709
    tested with your links and it works for me

    post your full code or better a link to your page
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

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

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.19282 seconds
  • Memory Usage 2,966KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (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
  • (5)bbcode_code
  • (2)bbcode_quote
  • (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 (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_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_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