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
    FL
    Posts
    7,261

    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,645
    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,645
    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,645
    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



Recent Articles