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?
 
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?
 
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
 
Thanks, it's proof of concept at the moment, so layout has not been set, but it will be more uniform eventually.
 
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