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 5 of 5
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    Code available for "View Next Image"... ?

    Hi, Just wondering if anyone has some code for a "View next image" whereby upon onclick the image changes along with some text below the image (i.e. some description of the above image)?

    I want to use it e.g. here, http://www.minifigtimes.com/

    The pic on the right would change along with the text "LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making the under-fire manager..........." however the browser would remain on http://www.minifigtimes.com/

    Any code around for this kinda of feature OR anything similar/better to do?

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    For now, you can toy around with this:

    Code:
    <script type="text/javascript">
    function changeIMG(URL) {
    	document.images.blah.src="../Chirowebsite/foto/annelies.jpg";
    	document.getElementById("imgcaption").innerHTML="This is your new image!";
    }
    </script>
    Put this in the head section of your page.

    Then, in your HTML:
    Code:
    <img name="blah" src="..." onclick="changeIMG();">
    <p id="imgcaption" style="width: 100%;">  
      LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making  the under-fire manager the number one favourite to be the next Serie A boss to be shown the door. Van Basten told The Minifig Times that reports LFC had already lined up Francesco Pedone as his successor were 'unsettling the team'.   
    </p>
    This makes the image change one time. I suspect you need it to be changed more than that. It's rather easy to do so if you want, just let me know.

    On a side note, that looks to become an awesome website. I love LEGO.
    Last edited by snowieken; 02-16-2009 at 09:45 PM.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • Users who have thanked snowieken for this post:

    Partizan (02-16-2009)

  • #3
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks for this!!

    It's pretty sweet, I am testing it out here: http://www.minifigtimes.com/test2.shtml

    Just 2 things I want to also do.

    As you can see I also want some text link like "Next Image" that when hit goes to the next image.

    I would also like to have more than one image and perhaps a "Back" link.

    These wants possible?
    (By the way, Ms Derkins sucks)

    EDIT: extra requirement: can I also have the text paragraphed? That is a space between two bodies of text.. ?
    Last edited by Partizan; 02-16-2009 at 10:31 PM.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I'm feeling bored and as I always enjoy myself writing code, here we go...

    Head section:
    Code:
    <script type="text/javascript">
    <!--
    
    var img = new Array();
    var caption = new Array();
    
    var path = "http://www.minifigtimes.com/"
    
    img[0] = path + "images-2009/news/2009-02-14-p1.png"
    caption[0] = "LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making the under-fire manager the number one favourite to be the next Serie A boss to be shown the door. Van Basten told The Minifig Times that reports LFC had already lined up Francesco Pedone as his successor were 'unsettling the team'.";   
    img[1] = path + "image2.jpg";
    caption[1] = "This is the second one.";
    img[2] = path + "image3.jpg";
    caption[2] = "And the third.";
    // Add more images here
    
    
    function changeIMG(direction) {
    
      var current=document.images.blah.src;
    	
      for (var i = 0;i<img.length;i++) {
        if(img[i]==current) {
          if(direction=="forward") {
            if(i==img.length-1) {
              swap(0);
            }
            else {
              swap(i+1);
            }
          }
          if(direction=="back") {
            if(i==0) {
              swap(img.length-1);
    	}
            else {
              swap(i-1);
            }
          }
          break;
        }
      }
    }
    
    function swap(nr) {
      document.images.blah.src=img[nr];
      document.getElementById("imgcaption").innerHTML=caption[nr];
    }
    
    //-->
    </script>
    You can add more images in the same fashion where I put the comment "add more images here". Due to the way document.image.src works, the full path is required though... I made a variable "path" where you can edit that path, so it's easy to change if you change the path (for example, from your local to your web host).

    So, for example, if you want to add an image to the script above, called "image4.jpg" with a caption of "This is image 4!", you add:
    Code:
    img[3]=path + "image4.jpg";
    caption[3]="This is image 4!";
    If anyone finds a workaround for this full path problem, feel free to add to this code!

    Then, in your HTML, you can make two links if you want:
    Code:
    <a href="#" onclick="changeIMG('back');">Previous</a>
    <a href="#" onclick="changeIMG('forward');">Next</a>
    If you need more help getting this to work, don't be afraid to ask!

    I'm not exactly sure what you mean with that extra requirement, though.

    EDIT: You can put any HTML you want in the captions, if that's what you mean, for instance a <br /> tag.
    Last edited by snowieken; 02-16-2009 at 11:05 PM.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • Users who have thanked snowieken for this post:

    Partizan (02-16-2009)

  • #5
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks a million snow for all the effort - this is exactly what I wanted.

    Also with the <br /> tag, that's what I wanted also


  •  

    Posting Permissions

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