Jump to content

Image copy/move Script


Howdy_McGee
 Share

Recommended Posts

I was wondering if anyone knows a Script that will allow me to click an image which then copies an image and gives it a different position, width and height - and then when I click on said image it opens in a pop up window showing the full image.Kinda difficult I can't seems to find the right keywords to type into google to find it so I figured I'd try here. Anyone know what im talking about?

Link to comment
Share on other sites

Ok, I'm going to have a menu of small images on the left side of the screen. When you click on one of the images in the menu I want it to pop up on the right side of the screen with the same image, just a bigger version of that image. Let's call this phase image2. When you click on image2 I want it to open up in a new window as the full image size (which i'll probably accomplish using lightbox).The problem I'm running into is copying the small image in the side menu so the same image will show up on the right side. I can position it but it's not reloading the image its actually moving the image from it's spot.Sorry if this is hard to understand im kinda hopped up on red bulls :)

Link to comment
Share on other sites

Do you have separate images for the thumbnails in your menu and for the full versions? If you do you could just change the images src using JavaScript. This might be something you want to consider. It'll probably be easier and it won't take up much space either. Otherwise you might have to play with the images height and width attributes.Do you have any code? Can you post it?

Link to comment
Share on other sites

try this

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function dothis(itemref){var imglink="";imglink=itemref.childNodes[0].src.replace("_thumb.gif",".png");document.getElementById("large").innerHTML="<a href="+imglink+" target=\"_blank\"><img src=\""+imglink+"\" /></a>";}/*--*//*]]>*/</script> <style type="text/css">.thumb {width:25%; background-color:#CC3399; float:left;}.thumb a {display:block;}.thumb a img{border-width: 0;}#large{width:75%; float:right;}#large img{width:80%; height:80%;}</style></head><body><div style="background-color:#CCCC00;overflow:hidden;"><div id="large"></div><div class="thumb"><a href="java script:void(null)" onclick="dothis(this)";><img src="1cha_imgash_thumb.gif" /></a><a href="java script:void(null)" onclick="dothis(this)";><img src="1cha_imgbrett_thumb.gif" /></a><a href="java script:void(null)" onclick="dothis(this)";><img src="1cha_imgdallas_thumb.gif" /></a></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

why does all of a sudden every javascript example on the board now use that javascript pseudo class syntax? :)But really, not to knock the helping others dsonesuk, but like jkloth said in another thread, it would more beneficial to the OP's if they at least attempted to write the script before they were just given the answer(s).

Link to comment
Share on other sites

lol I agree it is beneficial for people to try writing the code before they come to forums and just ask for help, but i've already been working on this code. The place that I'm stuck at is copying the image, I can move the image from it's position but I want the image to stay where it is. Isn't there just something simple where it copies the image src, stores it in a variable so I can give it style and an onclick event at a later date?

Link to comment
Share on other sites

lol I agree it is beneficial for people to try writing the code before they come to forums and just ask for help, but i've already been working on this code. The place that I'm stuck at is copying the image, I can move the image from it's position but I want the image to stay where it is. Isn't there just something simple where it copies the image src, stores it in a variable so I can give it style and an onclick event at a later date?
Couldn't you just create another image on the right and modify it's src when you click on one of the thumbnails? Or are you trying to achieve an animated effect?
Link to comment
Share on other sites

lol I agree it is beneficial for people to try writing the code before they come to forums and just ask for help, but i've already been working on this code. The place that I'm stuck at is copying the image, I can move the image from it's position but I want the image to stay where it is. Isn't there just something simple where it copies the image src, stores it in a variable so I can give it style and an onclick event at a later date?
can you show us what you've got so far?the concept itself is fairly straightforward, and from then it can be tweaked to achieve greater effects. Get the source of the thumbnail, then set the source of another img somewhere else on the page (in this case on the right side of the page). I don't think the thumbnail would ever have to move, unless that's a desired effect.I can envision this being done with about two lines of code, each one making use of document.getElementById().
Link to comment
Share on other sites

how would I store it in a variable though. if:<img src="thumb.gif" name="img_src" />then my script would look something like:document.img_src.src = "variableName";where variableName is going to hold the image src?
as far as i can tell this will not work. in particular document.img_src.src = variableName, in particular because of the order. It won't work even if it was written (more correctly) like this variableName = document.img_src.src. In general the variable being assigned a value goes on the left. Edited by thescientist
Link to comment
Share on other sites

Ok, variables go to left gotta remember that. Thanks for your help here guys btw.A simplified version of what im trying to achieve is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>#######</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <style type="text/css">	#sidebar	{		height: 500px;		border: 3px solid blue;		float: left;	}		#imgShow	{		float: right;		width: 400px;		height: 500px;		border: 3px solid red;	}</style><script type="text/javascript">	var imgSrc;		function getSrc()	{		document.test.src=imgSrc;				imgSrc.style.position = "relative";		imgSrc.style.left = 300"px";		imgSrc.style.top = 300"px";	}</script></head><body><div id="sidebar">	<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Aero-stub_img.svg/100px-Aero-stub_img.svg.png" name="test" onclick="getSrc()"	/></div><div id="imgShow">	<img src="getSrc()" /></div>	</body></html>

I need the the image in #sidebar to show up in #imgShow, but I can't have it all javascript because I also need it to be able to be clicked on so it will pop up full size in a new window. I was kinda wanting to stay away from arrays and keep it as simpe as possible. I will have multiple images in #sidebar and their all going to show up in the same place anyway so really I don't think an array is necessary.I was looking at some examples and came across this:<img name="pic" id="pic" src="blank.gif" alt="" style="visibility:hidden">I think what I need to do is put this on my right Div (#imgShow) and using javascript put a src to it and make it visible.

Edited by Howdy_McGee
Link to comment
Share on other sites

Ok, first things first. Get rid of the name attribute on your image. Name should only be used for form elements and is deprecated for everything else. Assign id's to both of your images instead. Also, set your src on the larger image to be blank instead of a function call. So something like this:

<div id="sidebar">	<img src=".../100px-Aero-stub_img.svg.png" id="thumb1" onclick="getSrc()"	/></div><div id="imgShow">	<img id="destinationImg" src="" /></div>

Then your getSrc() function would look something like this:

var imgSrc;function getSrc(){		imgSrc = document.getElementById("thumb1").src;				document.getElementById("destinationImg").src = imgSrc;}

Get that working then we'll talk about the onclick.

Link to comment
Share on other sites

Ok, I've been messing around with it and found I can't use the "getElementById" because it gets the first id in the html document. I figured it would go into the html element that you clicked on (since it's an onclick event) and look for the ID. If I have 2 images in my sidebar it won't replace the variable with the new src. From what I can tell the best way to solve this is using an array so each img has a unique ID. Is there a way to do this without using an array? Having a universal class or something so when the onclick event occurs it goes into the element to look for it instead of starting at the top of the HTML document and going down?

Link to comment
Share on other sites

Pass the element to the function using the 'this' keyword:<img src='...' alt='...' onclick="getSrc(this);" />

function getSrc(element) {   imgSrc = element.src;   document.getElementById("destinationImg").src = imgSrc;}

Oh and BTW, id's have to be unique on a page anyway so you'd need to create unique id's for your images. To make the function work the way it was before you'd have to pass in the id of the element. I like this way better though. :)

Edited by ShadowMage
Link to comment
Share on other sites

Ok, I've been messing around with it and found I can't use the "getElementById" because it gets the first id in the html document. I figured it would go into the html element that you clicked on (since it's an onclick event) and look for the ID. If I have 2 images in my sidebar it won't replace the variable with the new src. From what I can tell the best way to solve this is using an array so each img has a unique ID. Is there a way to do this without using an array? Having a universal class or something so when the onclick event occurs it goes into the element to look for it instead of starting at the top of the HTML document and going down?
the idea behind getElementById is you give it a specific, and unique id associated with element on the page.
<script type="text/javascript>  //will be used with an event handler and function call, naturally  //here for proof of concept  var src = document.getElementById("thumb1").src;</script><div id="left_sidebar">  <img id="thumb1" .../>   <img id="thumb2" .../>  <img id="thumb3" .../></div><div id="content">  <img id="big_version" .../></div>

Edited by thescientist
Link to comment
Share on other sites

Ok, break that down for me real quick. Thanks btw it worked perfectly.Why would you need to pass "element" into the parameters?
element is just a name used to indicate a parameter which is being passed to the function, to help establish scope. in this case, when the onClick event handler is fired, and the function getSrc is called, it passes this, which is a reference to the calling element (in this case the image being clicked on). Function getSrc recognizes the value of this via the scope specific parameter element which could just as easily be called anything else; i.e. incomingId, ID, imageID, etc. Anything you want really.
Link to comment
Share on other sites

Ok, break that down for me real quick. Thanks btw it worked perfectly.Why would you need to pass "element" into the parameters?
"element" is just a variable name which the function uses to reference whatever data is passed to it, essentially.The 'this' keyword references the object which is calling the function. So <img onclick='getSrc(this);' /> passes the actual image element to the getSrc function when it's clicked. This reference is then stored in the variable 'element' which is then used by the function to access all the properties and methods of the image element.That's the quick and dirty explanation, but that's about all I can provide you with since I'm not very good at explaining things. :)
Link to comment
Share on other sites

Pass the element to the function using the 'this' keyword:<img src='...' alt='...' onclick="getSrc(this);" />
function getSrc(element) {   imgSrc = element.src;   document.getElementById("destinationImg").src = imgSrc;}

Oh and BTW, id's have to be unique on a page anyway so you'd need to create unique id's for your images. To make the function work the way it was before you'd have to pass in the id of the element. I like this way better though. :)

what ShadowMange ( :)) is doing here is:1) passing this is to function getSrc. (this is a reference to the current element, in this case a picture being clicked on. could be a div, header, p tag, etc) and gives you access to all its attributes and values. it's a scoping thing that provides a level of abstraction and specification. I use it a lot. Scoping is a very good thing to learn. 2) the local variable imgSrc is being assigned a value, in this case the passed element's src attribute. Since the function call passes this (from the image we clicked on), element.src is equal to the source value of the image being clicked on (and will change relative to which image has been clicked)3) the next line finds the element in the document called destinationImg and changes its src to be the value of imgSrc Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...