WEB Javascript Help - Easy stuff

Discussion in 'OT Technology' started by FINALBOSS, Mar 3, 2008.

  1. FINALBOSS

    FINALBOSS

    Joined:
    Sep 25, 2005
    Messages:
    64,920
    Likes Received:
    0
    Location:
    Paris
    Hey guys, attempting to learn javascript here but need a little help on what I'm trying to do.

    I'm trying to just have some basic HTML that has a series of images in a row (like 3-4 in a mini menu). Now depending on the order you click them they will appear below (in a separate frame or anything) a little larger. Like if I click the 4th one first it'll appear first, then if I click the 1st one it'll appear right next to the 4th one.

    :/
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    So, you have four small images in a row, then when you click on one in any order, they'll display the larger version of it next to each other? If you click three, it'll display the larger one first, click four, it'll display it second, click second, it'll display it third, click first, it'll display it fourth... correct?

    There are several ways to accomplish this but I think the best way is to dynamically create the content via createElement method. Go here to see how it works: http://www.w3schools.com/dom/met_document_createelement.asp

    Assuming you know how to do the rest--ie, when images within unique div are focused, output created element.
     
  3. FINALBOSS

    FINALBOSS

    Joined:
    Sep 25, 2005
    Messages:
    64,920
    Likes Received:
    0
    Location:
    Paris
    Exactly. But I don't understand waht you're saying :o.
     
  4. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    You need to dynamically create the element and output when each image is focused. Here's how you create an image element.

    Code:
    var source = document.createElement("img");
    var imgsrc = source.setAttribute("src", "larger_img4.jpg");
    
    This is equivalent to: <img src="larger_img4.jpg" />

    Then you append that image to the element in which you would output.
    Code:
    someElementOrContainer.appendChild(imgsrc);
    
    someElementOrContainer would be an element, such as a div, that you created in your mark-up for the mark-up to be placed in there. This would have had to be selected via JavaScript.
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    I'm feeling generous.

    Create a div with an ID named "images" and toss all images you want enlarged in that div.

    Example:
    Code:
    <div id="images">
      <img src="one.jpg" />
      <img src="two.jpg" />
      <img src="three.jpg" />
    </div>
    
    Include this .js file into your page:
    Code:
    window.onload = newImage;
    
    function insertAfter(newElement,targetElement) {
    	var parent = targetElement.parentNode;
    	if (parent.lastChild == targetElement) {
    		parent.appendChild(newElement);
    	} else {
    		parent.insertBefore(newElement,targetElement.nextSibling);
    	}
    }
    
    function newImage() {
    	if(!(document.createElement && document.getElementById)) return false;
    	
    	var enlarge = 1.3; // adjust width/height multiplyer
    	
    	if (document.getElementById("images")) {
    		var source = document.getElementById("images");
    		var images = source.getElementsByTagName("img");
    		
    		for (var i = 0; i < images.length; i++) {
    			
    			images[i].onclick = function() {
    				var newElement = document.createElement("img");
    				newElement.src = this.src;
    				newElement.width = newElement.width*enlarge;	newElement.height = newElement.height*enlarge;
    				insertAfter(newElement,this);
    			}
    
    		}
    	}
    }
    
     
  6. pkr

    pkr Guest

    :rofl: Neck face is from my hometown. I remember seeing neck face propaganda plastered everywhere.
     
  7. FINALBOSS

    FINALBOSS

    Joined:
    Sep 25, 2005
    Messages:
    64,920
    Likes Received:
    0
    Location:
    Paris
    Kingtoad :bowdown:
     

Share This Page