sridaran Posted March 17, 2009 Share Posted March 17, 2009 Hi I'm new to javascript and need a solution for a problem. I am designing a webpage using html and javascript. There are 2 pages, one has list of images and other page has a single image,prev next buttons and text fields. I had designed these 2 pages. The requirement is by clicking any image on the first page should appear on the second page. By clicking next, prev buttons the existing image should change related to the image list in the first page. Can any one help to solve this problem. Thanks in advance....R.Sridaran Link to comment Share on other sites More sharing options...
Pollux Posted March 17, 2009 Share Posted March 17, 2009 Firstly, I'd say that you could probably achieve more and in a nicer way, if you were to add a server-side language such as PHP into the mix. But since you're just starting out we'll keep to HTML and Javascript for now. There's two parts to this problem - the slide-show of images on the second page, and then the setting of the initial image via the links on the first page. So to take them one at a time...1) Slide-show.You'll probably want to store information about your images in an array, and you'll need some sort of variable to store the current index in that array. Then you can write 2 functions - one to perform the operation 'next' (which will show the next image along in the array from the index) and one for back (the index minus 1). You can get a reference to the image and change it's src attribute something like this... document.getElementById("elements_id").src="newImg.jpg" where elements_id matches the value of the id attribute on the <img> tag. I've included some code at the bottom for you to modify.2) Setting the initial image from links.This wouldn't normally be done using javascript. One option would be to add a querystring parameter onto the end of each link. Something like: <a href="page2.html?img=0">Img 1</a><a href="page2.html?img=1">Img 2</a><a href="page2.html?img=2">Img 3</a> Then when the page first loads (so probably called from the <body> tag's onload) you can try and extract the querystring's img parameter and then set the slideshow to display that index. But you can worry about that once you've got the basic slideshow working.And here's some code to get you started on the slideshow...Javascript to go in the head: <script type="text/javascript"> // An array of src attributes for our image slide-show. var imgArr = new Array(); imgArr[0] = "img1.jpg"; imgArr[1] = "img2.jpg"; imgArr[2] = "img3.jpg"; // Keep track of the current image being displayed. var index = 0; // Increments index and the sets the image to show that index. function next() { if (index < imgArr.length) { index++; setImg(index); } } // Decrements index and the sets the image to show that index. function back() { if (index > 0) { index--; setImg(index); } } // Sets the src attribute on the element with an id of "img_viewer". function setImg(i) { document.getElementById("img_viewer").src = imgArr[i]; }</script> HTML to go in the body: <img id="img_viewer" src="img1.jpg" /><a href="" onClick="java script:back(); return false;">back</a><a href="" onClick="java script:next(); return false;">next</a> Link to comment Share on other sites More sharing options...
sridaran Posted March 23, 2009 Author Share Posted March 23, 2009 Hi Thanks a lot. It really worked well. Right now I'm developing that project using Javascript and CSS. Along with displaying images, I added some text fields near that image and made displaying the entered text in front of the image using CSS absolute position along with javascript event handling. Now I want to drag the texts(which is in front of image) within the image area only. Is it possible in javascript? If possible can you please tell me the concept?R.Sridaran Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.