Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help making a simple image gallery

    Okay, I've already learned from google how to make the following two simple image galleries:

    This one displays a specific image when its link is clicked

    And this one displays the previous/next image for whatever's showing. (During its code, it points to this .js file.)

    My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.)

    Let me know if you need any more info from me.
    Last edited by cottonrhetoric; 06-30-2011 at 04:36 PM. Reason: i couldnt find anything in the forum rules about unblocking urls... help with that too?

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    My mind reading skill suck!
    Where are the links to the code?

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried linking to them in the original post but the site blocked me. Okay, I'll copy-paste everything.

    Here's the first gallery, which uses next/previous clicks (it's tested and works fine by itself):

    ================
    <head>

    <script type="text/javascript">

    // List image names without extension
    var objId= new Array(3)
    objId[0] = "asdfa";
    objId[1] = "asdfb";
    objId[2] = "asdfc";
    objId[3] = "asdfd";
    objId[4] = "asdfe";

    // Tell browser where to find the image
    objIdSrc = (((the url, which i can't paste here)))";

    // Tell browser the type of file
    objIdEnd = ".jpg"

    var i = 0;

    // Create function to load image
    function loadImg(){
    document.imgSrc.src = objIdSrc + objId[i] + objIdEnd;
    }

    // Create link function to switch image backward
    function prev(){
    if(i<1){
    var l = i
    } else {
    var l = i-=1;
    }
    document.imgSrc.src = objIdSrc + objId[l] + objIdEnd;
    }

    // Create link function to switch image forward
    function next(){
    if(i>2){
    var l = i
    } else {
    var l = i+=1;
    }
    document.imgSrc.src = objIdSrc + objId[l] + objIdEnd;
    }

    // Load function after page loads
    window.onload=loadImg;

    </script>
    </head>
    <body>

    <img name="imgSrc" id="imgSrc">

    <a href="#" onClick="prev();">older</a> &nbsp; <a href="#" onClick="next();">newer</a>

    </body>
    </html>


    ===============

    and here's the second gallery, which uses individual image links (it's also tested and works fine by itself):

    ===============

    <!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">
    <head>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">

    function changeIt(objName)
    {

    //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    var obj = document.getElementById(objName);

    //An array that hold the IDs of images that we mentioned in their DIV blocks
    var objId = new Array();

    //Storing the image IDs into the array starts here

    objId[0] = "asdfa";
    objId[1] = "asdfb";
    objId[2] = "asdfc";
    objId[3] = "asdfd";
    objId[4] = "asdfe";

    //Storing the image IDs into the array ends here

    // Tell browser where to find the image
    objIDSrc = "(((the url)))";

    // Tell browser the type of file
    objIDEnd = ".jpg"

    //A counter variable going to use for iteration
    var i;

    //A variable that can hold all the other object references other than the object which is going to be visible
    var tempObj;

    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    //of the if statement within this loop.
    for(i=0;i<objId.length;i++)
    {
    if(objName == objId[i])
    {
    obj.style.display = "block";
    }
    else
    {
    tempObj = document.getElementById(objId[i]);
    tempObj.style.display = "none";
    }
    }
    return;
    }

    </script>
    </head>



    <body>
    <div id="asdfa">
    <img src="asdfa.jpg" border="0" alt="one" />
    </div>

    <div id="asdfb" style="display:none">
    <img src="asdfb.jpg" border="0" alt="two" />
    </div>

    <div id="asdfc" style="display:none">
    <img src="asdfc.jpg" border="0" alt="three" />
    </div>

    <div id="asdfd" style="display:none">
    <img src="asdfd.jpg" border="0" alt="four" />
    </div>

    <div id="asdfe" style="display:none">
    <img src="asdfe.jpg" border="0" alt="five" />
    </div>
    <br><br>
    <a id="one" href="#" onclick="changeIt('asdfa');">one</a>
    <a id="two" href="#" onclick="changeIt('asdfb');">two</a>
    <a id="three" href="#" onclick="changeIt('asdfc');">three</a>
    <a id="four" href="#" onclick="changeIt('asdfd');">four</a>
    <a id="five" href="#" onclick="changeIt('asdfe');">five</a>
    <br><br>
    <img name="imgSrc" id="imgSrc">

    </body>
    </html>

    ==============

    So, all I need to do is combine them into one gallery that uses both types of navigation, but whatever I've tried hasn't worked.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation Something to consider...

    This is my attempt to modify a script from: Creating a thumbnail scrollable clickable gallery
    I've got most of it working except for the actual link logic.
    It works with the alert, but not with my attempts (yet!).

    Perhaps 'bullant' or 'vwphillips' will see this post and give you some additional help
    since they were the main contributors on the posted thread above.
    I don't know how to give a 'shout out' to a particular forum member.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- From: http://www.codingforums.com/showthread.php?t=228509 -->
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Carousel Links</title>
    <style type="text/css">
      #banner {
              display: none;
              position: relative;
              border: 3px solid black;
              overflow: hidden;
      }
      #imgContainer {
              position: absolute;
              top: 0px;
              left: 0px;
      }
      #imgContainer img{
              margin: 0px 10px 10px 0px;
              padding: 0px 0px 0px 0px;
              display: inline;
      }
    </style>
    <script type="text/javascript">
      var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
      var picPaths = [
    	  '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'  // ,  // can be expanded with more images
    /*
    	  '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
    	  '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
    	  '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
    	  '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'  // Note: NO comma after last entry
    */
      ];
      var picLinks = [
        'http://www.nova.edu','http://optometry.nova.edu',
        'http://www.webdeveloper.com','http://www.codingforums.com',
        'http://www.dreamincode.net'        // Note: NO comma after last entry
      ];
    
      var step = 5;  //pixels
      var speed = 150; //milliseconds
      var slidePause = 1; //milliseconds
      var curPos = 0;
      var timer;
      var picMultiple = 4;
    
      function slideImages(){
        curPos -= step;
        if(curPos < -picWidth){ //finished moving left 1 image
          clearTimeout(timer);
          reOrderImgs();
          imgContainerO.style.left = curPos +'px';
        } else { //continue sliding left
          imgContainerO.style.left = curPos +'px';
          timer = setTimeout(slideImages,speed);
        }
      }
      function reOrderImgs(){
        var childElems = imgContainerO.childNodes; //first child is a text node
        for(i=0; i < childElems.length; i++){
          if(childElems[i].nodeName.toLowerCase() == 'img'){
            var firstImgO = childElems[i];
            i = childElems.length;
          }
        }
        imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
        curPos = 0;
        setTimeout(slideImages,slidePause);
      }
      window.onload=function(){
        preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
    //preload the images
        picsO = new Array();
        for(i=0; i < preloadedImgs.length; i++){
          picsO[i] = new Image();
          picsO[i].src = preloadedImgs[i].src;
        }
        picWidth = picsO[0].width;
        picHeight = picsO[0].height;
        bannerO = document.getElementById('banner');
        imgContainerO = document.getElementById('imgContainer');
        imgContainerO.style.width = picWidth*picsO.length*picMultiple+'px';
        for(i=0; i < picsO.length; i++){
          var newImg = document.createElement('img');
          newImg.id = 'img_'+(i+1);
          newImg.setAttribute('src',picsO[i].src);
    
    newImg.setAttribute('title',picsO[i].src);
    // newImg.setAttribute('value',picsO[i].src);  // does not appear to be a value for <img> tag
    newImg.onclick= eventHandler.prototype.ShowAlert;
    
          imgContainerO.appendChild(newImg);
        }
        bannerO.style.height = picHeight+'px';
        bannerO.style.width = picsO[0].width*picMultiple+'px';
        bannerO.style.display = 'block';
        document.body.removeChild(document.getElementById('preloadedPics'));
        setTimeout(slideImages,500);
      }
    
    // Following from: http://forums.devx.com/archive/index.php/t-100007.html
    function eventHandler() {
    // prototype instance
    }
    
    eventHandler.prototype.ShowAlert = function() {
      alert('Not quite right with the LINK yet!');
    }
    
    </script>
    
    </head>
    <body>
    <!-- preload the images so we can use their actual width and height property
         to scale the thumbnails -->
    <div id="preloadedPics" style="display: none"></div>
    <script type="text/javascript">
      for(i=0; i < picPaths.length; i++){
        var newImg = document.createElement('img');
        newImg.src = baseURL+picPaths[i];
        document.getElementById('preloadedPics').appendChild(newImg);
      }
    </script>
    
    <!-- --------------------End of image preloads ------------------ -->
    <div id="banner">
      <div id="imgContainer" title=""></div>
    </div>
    
    </body>
    </html>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Modified some more and now it seems to work as I want.
    Question is, does it work the way you want?

    You will need to change the 'baseURL', 'picPaths' and 'picLinks' arrays to match your images and links.
    They need to match in count or you will get errors.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- From: http://www.codingforums.com/showthread.php?t=228509 -->
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Carousel Links</title>
    <style type="text/css">
      #banner {
              display: none;
              position: relative;
              border: 3px solid black;
              overflow: hidden;
      }
      #imgContainer {
              position: absolute;
              top: 0px;
              left: 0px;
      }
      #imgContainer img{
              margin: 0px 10px 10px 0px;
              padding: 0px 0px 0px 0px;
              display: inline;
    border:1px solid blue;
      }
    </style>
    <script type="text/javascript">
      var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
      var picPaths = [
    	  '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'  // ,
    /*
    	  '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
    	  '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
    	  '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
    	  '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'
    */
      ];
      var picLinks = [
        'http://www.nova.edu','http://optometry.nova.edu',
        'http://www.webdeveloper.com','http://www.codingforums.com',
        'http://www.dreamincode.net'
      ];
    
      var step = 5;  //pixels
      var speed = 150; //milliseconds
      var slidePause = 1; //milliseconds
      var curPos = 0;
      var timer;
      var picMultiple = 4;
    
      function slideImages(){
        curPos -= step;
        if(curPos < -picWidth){ //finished moving left 1 image
          clearTimeout(timer);
          reOrderImgs();
          imgContainerO.style.left = curPos +'px';
        } else { //continue sliding left
          imgContainerO.style.left = curPos +'px';
          timer = setTimeout(slideImages,speed);
        }
      }
      function reOrderImgs(){
        var childElems = imgContainerO.childNodes; //first child is a text node
        for(i=0; i < childElems.length; i++){
          if(childElems[i].nodeName.toLowerCase() == 'img'){
            var firstImgO = childElems[i];
            i = childElems.length;
          }
        }
        imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
        curPos = 0;
        setTimeout(slideImages,slidePause);
      }
      window.onload=function(){
        preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
    //preload the images
        picsO = new Array();
        for(i=0; i < preloadedImgs.length; i++){
          picsO[i] = new Image();
          picsO[i].src = preloadedImgs[i].src;
        }
        picWidth = picsO[0].width;
        picHeight = picsO[0].height;
        bannerO = document.getElementById('banner');
        imgContainerO = document.getElementById('imgContainer');
        imgContainerO.style.width = picWidth*picsO.length*picMultiple+'px';
        for(i=0; i < picsO.length; i++){
          var newImg = document.createElement('img');
          newImg.id = 'img_'+(i+1);
          newImg.setAttribute('src',picsO[i].src);
    
    newImg.setAttribute('title',picLinks[i]);
    newImg.onclick= eventHandler.prototype.ShowAlert;
    
          imgContainerO.appendChild(newImg);
        }
        bannerO.style.height = picHeight+'px';
        bannerO.style.width = picsO[0].width*picMultiple+'px';
        bannerO.style.display = 'block';
        document.body.removeChild(document.getElementById('preloadedPics'));
        setTimeout(slideImages,500);
      }
    
    // Following from: http://forums.devx.com/archive/index.php/t-100007.html
    function eventHandler() {
    // prototype instance
    }
    
    eventHandler.prototype.ShowAlert = function() {
    //  alert('Not quite right with the LINK yet!');
      alert(this.title);
      document.location = this.title;
    }
    
    </script>
    
    </head>
    <body>
    <!-- preload the images so we can use their actual width and height property
         to scale the thumbnails -->
    <div id="preloadedPics" style="display: none"></div>
    <script type="text/javascript">
      for(i=0; i < picPaths.length; i++){
        var newImg = document.createElement('img');
        newImg.src = baseURL+picPaths[i];
        document.getElementById('preloadedPics').appendChild(newImg);
      }
    </script>
    
    <!-- --------------------End of image preloads ------------------ -->
    <div id="banner">
      <div id="imgContainer" title=""></div>
    </div>
    
    </body>
    </html>
    Good Luck!

  • #6
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That's an impressive bit of code.

    It doesn't really seem related to what I was asking for though? The codes I showed have one picture showing, and then the picture changes when you click on either a "next" button or a link with the name of a picture. I'm just looking to make a gallery that does both at once.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by cottonrhetoric View Post
    That's an impressive bit of code.

    It doesn't really seem related to what I was asking for though? The codes I showed have one picture showing, and then the picture changes when you click on either a "next" button or a link with the name of a picture. I'm just looking to make a gallery that does both at once.
    Well, I guess I'll have to refer back to post #2
    as I have completely miss-understood what your request is.

    Do you have a live link to look at what your attempt is
    rather than the snippets you posted that you said you
    cannot get to works together?

  • #8
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Well, I guess I'll have to refer back to post #2
    as I have completely miss-understood what your request is.

    Do you have a live link to look at what your attempt is
    rather than the snippets you posted that you said you
    cannot get to works together?
    lol yes but the forum won't let me post any links. i will try to pm them to you (if you dont get a pm within 5 minutes, assume it didnt let me)

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Another attempt at telepathy ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    
      var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
      var picFiles = [
         '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];  // can be expanded with more images
    
    var imgPtr = 0;
    
    // Create function to load image
    function loadImg(ptr){
      document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
    }
    
    // Create link function to switch image backward
    function prev() {
      if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
      loadImg(imgPtr);
    }
    
    // Create link function to switch image forward
    function next(){
      if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
      loadImg(imgPtr);
    }
    
    // Load function after page loads
    onload = function() { loadImg(0); }
    
    </script>
    </head>
    <body>
    
    <a id="one" href="javascript:void(0)" onclick="loadImg(0)">one</a>
    <a id="two" href="javascript:void(0)" onclick="loadImg(1)">two</a>
    <a id="three" href="javascript:void(0)" onclick="loadImg(2)">three</a>
    <a id="four" href="javascript:void(0)" onclick="loadImg(3)">four</a>
    <a id="five" href="javascript:void(0)" onclick="loadImg(4)">five</a>
    <p>
    
    <img name="imgSrc" id="imgSrc">
    
    <p>
    <a href="javascript:void(0)" onClick="prev();">older</a>
     &nbsp; 
    <a href="javascript:void(0)" onClick="next();">newer</a>
    
    </body>
    </html>
    I don't see how either of your original scripts worked, but this does.

    Good Luck!

  • Users who have thanked jmrker for this post:

    cottonrhetoric (07-01-2011)

  • #10
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    AAAAAHHHHHHH THANK YOU!!!!!!!!!! It works PERFECTLY
    I was honestly ready to give up.

  • #11
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    PS does that mean you didnt get my pm? Because I really did send one! With links and everything

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by cottonrhetoric View Post
    AAAAAHHHHHHH THANK YOU!!!!!!!!!! It works PERFECTLY
    I was honestly ready to give up.
    You're most welcome
    Happy to help, when I can understand the problem
    Good Luck!

    Quote Originally Posted by cottonrhetoric View Post
    PS does that mean you didnt get my pm? Because I really did send one! With links and everything
    No, it means that I did not notice any PM until you just mentioned it.



    Note, just FYI, I used the same code for another thread but used radio buttons rather than links
    See: switching image with by clicking radio buttons

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Here is a minor change to keep the link changes in-sync with the next/prev function changes.
    Code:
    function loadImg(ptr){
      document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
      imgPtr = ptr;
    }


  •  

    Posting Permissions

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