Jump to content

Javascript

MarkB

By MarkB
in Left Field (Off-Topic)

Recommended Posts

MarkB Legend

MarkB

Posted
Posted

I've working on my website right now and am incorporating a random image script into the homepage. Now, I've got it working fine in that it's showing the image, adding a border and setting the image size (after a little tweaking), but I've run into a problem.

I need to add a link to the full-sized image onto the image that's shown from the Javascript code. Now I could obviously just add a <a href="file.JPG"> tag into the document.write function, but this is explicit and won't vary with the random image generation - thus, it will link to the same file, regardless of what image is being shown.

Here's the script as it is right now.

From <HEAD>;

<SCRIPT LANGUAGE="JavaScript">




var theImages = new Array()






theImages[0] = 'folder1/folder2/folder3/folder4/folder5/file1.JPG'


theImages[1] = 'folder1/folder2/folder3/folder4/folder5/file2.JPG'


theImages[2] = 'folder1/folder2/folder3/folder4/folder5/file3.JPG'


theImages[3] = 'folder1/folder2/folder3/folder4/folder5/file4.JPG'




var j = 0


var p = theImages.length;


var preBuffer = new Array()


for (i = 0; i < p; i++){


   preBuffer[i] = new Image()


   preBuffer[i].src = theImages[i]


}


var whichImage = Math.round(Math.random()*(p-1));


function showImage(){


document.write('<img border="2" src="'+theImages[whichImage]+'" width="150" height="112">');


}




//  End -->
From <BODY>; 
<SCRIPT LANGUAGE="JavaScript">




showImage();


	</script>

Anyone got any ideas on how I can add a link to the generated image? Is here any way of interrupting the document.write to throw the image string in there, so it could begin to write the document.write, write the a href tag, pause to insert the path of the file from the string (theImages), then resume the document.write to actually create the line and add in the rest of the code for the border and size etc.?

Link to comment
Share on other sites
tywiggins Legend

tywiggins

Posted
Posted

I don't have much experience with javascript, but I don't understand why you have

src="'+theImages[whichImage]+'"

What are the single quotes for?

Edit:

Isn't this the correct way to use document.write() ?

document.write("<FONT COLOR="#FF0000">")
Edit2: 
document.write("<img border="2" src=""+theImages[whichImage]+"" width="150" height="112">");

Link to comment
Share on other sites
MarkB Legend

MarkB

Posted
  • Author
Posted

The first quote opens the field, the first apostrophe breaks it to insert the string, the second apostrophe signals the end of the break and the second quote closes the field. So if the string contents of "+theImages[whichImage]+" were "file1.JPG", the final document.write after processing would be;

document.write('<img border="2" src="file1.JPG" width="150" height="112"">');

Link to comment
Share on other sites
tywiggins Legend

tywiggins

Posted
Posted

The first quote opens the field, the first apostrophe breaks it to insert the string, the second apostrophe signals the end of the break and the second quote closes the field. So if the string contents of "+theImages[whichImage]+" were "file1.JPG", the final document.write after processing would be;

document.write('<img border="2" src="file1.JPG" width="150" height="112"">');

Okay, it looks like there are two ways to do it then. Coming from a c++ background, I'm used to the other way.

The first few sites I went to showed the other way.

Link to comment
Share on other sites
tywiggins Legend

tywiggins

Posted
Posted

What I would do is change your array to:


theImages[0] = 'folder1/folder2/folder3/folder4/folder5/file1'

theImages[1] = 'folder1/folder2/folder3/folder4/folder5/file2'

theImages[2] = 'folder1/folder2/folder3/folder4/folder5/file3'

theImages[3] = 'folder1/folder2/folder3/folder4/folder5/file4'



Then in your image address you will have to add .jpg to it.



Then name your full sized image something similar, or use a different file extension.



Examples:  

file1full.jpg

file1.png



That should make creating the link to the full size image easier.



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		MarkB
	

				
				
					
						
Legend
					
				
			

		

		

			

				


MarkB
              	
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
I was trying something similar to that before I coded the border and size properties into the document.write. I created resized copies of the original files to 150x112 and told the array to load them, which did look much better because I had already resized the images in PSP8 rather than the direct pixel resizing that browsers do, but it means having copies of all the files to be used in the random image script, which will be...well, unlimited. Even if I only have 200 images to be used in the script, at 5.26KB per image, that's over 1MB just for small thumbnails which won't be used 99% of the time. I don't mind using 512x384 thumbnails which link to 1600x1200 images like on the actual gallery, but for a random image script, it's a little too much. Even then, with that done, I'd still have to figure out how to put the actual link itself into the document.write.



God, I can't believe it's so hard to throw a link into this script...I haven't slept, so I might just be overlooking it.



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		tywiggins
	

				
				
					
						
Legend
					
				
			

		

		

			

				


tywiggins
              	
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
Why is it hard to put the link in?




document.write('<a href="'+theImages[whichImage]+'.png"><img border="2" src="'+theImages[whichImage]+'.jpg" width="150" height="112"></a>');



Wouldn't that work?



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		MarkB
	

				
				
					
						
Legend
					
				
			

		

		

			

				


MarkB
              	
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

Got it! God, and so obvious as well. I tried this 10 minutes ago and it didn't work, but I just tried it again when I thought of something else and noticed I hadn't closed the tag correctly first time around. The working document.write is as follows;




document.write('<a href="'+theImages[whichImage]+'"><img border="2" src="'+theImages[whichImage]+'" width="150" height="112">');



Now to begin screwing around with the string...I'll not get much sleep this weekend, methinks. ;)



Thanks for your help Ty. Much appreciated. :)



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				
			
			



		

	


	
	
	
		

			
Archived

			

				This topic is now archived and is closed to further replies.
			

		

	
	
	

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


				

				
				

			

			

      	
			
		
		


	
		

			
			
		

	

		
		



	

		×
		

			
				

					
				

			
          	
          	
          	

            	
    
					
  
    				
    					
    • 
    				
  
    				

					
  
					

					
                  
					
              	

          	

			
          
			
          
			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •