Javascript - Create Image in a Div

n30_mkii

n30_mkii

n30_mkii

Associate
Joined
31 May 2005
Posts
2,149
Location
Alfreton,Derbyshire
I'm working on a gallery, and want to use javascript. So when a user clicks on a thumnail image (which is a link) if javascript is supported it will create a new div on the page with an img in it using the href location.

So if Javascript is not enabled it will simply follow the link, and if it is enabled it will load the new div, styled by css in a fixed location.

I'm not too familiar with Javascript, and some of the examples on the net go overkill for me. Could someone give me some advice or point me in the right direction?
 
js
Code: 
function ImageInDiv(alink,div_id) {
  var image = document.createElement('img');
  image.setAttribute('src',alink.getAttribute('HREF'));
  document.getElementById(div_id).appendChild(image);
}
html
Code: 
  <a href="images/image.png" onclick="ImageInDiv(this,'div_id')">Image Name</a>

that gives you an idea of how to put an image in a div of your choice. it'd be worthwhile checking the contents of the div to make sure it's empty, otherwise you'll end up with loads of images in there:

Code: 
function ImageInDiv(alink,div_id) {
  var image = document.createElement('img');
  image.setAttribute('src',alink.getAttribute('HREF'));
  var imagediv = document.getElementById(div_id);
  for (i=0;i<imagediv.childNodes.length;i++) {
    imagediv.removeChild(imagediv.childNodes[i]);
  }
  imagediv.appendChild(image);
}

totally untested, but I see no reason it wouldn't work
 
Thanks for that, i'm getting there now; Will have a look on Amazon for a book later (any reccomendations?)

I now have this as my test jscript
Code: 
function addElement(alink) {
dv = document.createElement('div');
dv.setAttribute('id',"lrgpic");
dv.className="top";
dv.innerHTML='Test Div';
document.body.appendChild(dv);
var imagediv = document.getElementById('lrgpic');
  for (i=0;i<imagediv.childNodes.length;i++) {
    imagediv.removeChild(imagediv.childNodes[i]);
  }
var image = document.createElement('img');
image.setAttribute('src',alink.getAttribute('HREF'));
document.getElementById('lrgpic').appendChild(image)
}

And this is how it's launched
Code: 
<a onMouseover="addElement(this)" href="/images/gallery/1.jpg"><img width="100" height="155" src="/images/gallery/thumbs/1.jpg"/></a>

I have changed to mouseover for now, as the script was changing the image but then re-directing to the href url. Not sure how to stop that.

I am still getting a build up of images though, not clearing prevous ones?

Just an after thought this is creating a div each time, so might be causing the issue, i will hard code the div and try again
 
Yeah the Div creation was casuing the issue;

I have now added

Code: 
addElement(this,'1'); return false;

So the redirect doesn't happen, is that the best way?
 
n30_mkii said:
I have changed to mouseover for now, as the script was changing the image but then re-directing to the href url. Not sure how to stop that.
Click to expand...

Code: 
<a href="images/image.png" onclick="ImageInDiv(this,'div_id'); return false;">Image Name</a>

Use "return false" as the last statement in the onclick to stop the link from changing the page.

edit: heheh, good timing. Yes, that is how you should do it.
 
ah, sorry - forgot to add that in! glad you got it working!

edit:
n30_mkii said:
Will have a look on Amazon for a book later (any reccomendations?)
Click to expand...

I'm afraid not - the SAMS 24 hour books are normally pretty good - I have the javascript one, but I've never actually opened it, favouring online resources such as howtocreate - that tutorial is great, but they also have a breakdown of the DOM structure which really helped me when starting out with this sort of thing (and still does from time to time :o)
 
Last edited:
Thanks for the advice. Ok I have a very static version to check over.

I seem to have an issue - mostly on FireFox where, when the image is clicked and before the div is resized to fit the image, there is a brief small div where the css is applied before then jumping around the image, if that makes sense?

Doesnt seem to do it IE. But is not nice to see. Other than that I am happy with the progress so far...

If anyone could try this for me and maybe shed some light on the issue above or a better rework that would be appreciated. All code including CSS and JScript is in there at the moment.

Gallery is here..

Any feedback appreciated..

Thanks
 
Must say, that look's very professional. Personally, I'd have the thumbs centered at the top of the page and the main image centered below that - that's just my personal pref though :)
 
Thanks, it's proof of concept at the moment, so layout has not been set, but it will be more uniform eventually.
 
looks nice - for me, the div is created to the right, then forced underneath when the picture loads. I think this would be better if the frame was created the correct size and in the correct place so that it's ready for the image when it loads
 
Thanks for the comments Sic.

Is it possible to hide the css styling until a image is selected? So the div would be ready and the right size then the image would load into it and make it visible? I suppose I could have one image automatically open when going into the galllery? any thoughts on improving this part would be helpfull

The other issue is the div needs to be dynamic and change, as the images displayed will be various sizes, portrait and landscape.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom