open new window using dom 2

[derwent]

I have many pages each displaying many thumbnails that open in a new window of correct size.

On each image I use this

<a href='#' onClick="window.open('bigimage.jpg','Bigger','width=500,height=400,scrollbars=yes, resizable=no')"><img></a>

Is there a better method than this, I suppose it is using DOM but I`m not sure.

Thanks

 

[BillyRayPreachersSon]

A much better method would be:

<a href="bigimage.jpg" onclick="window.open(this.href, 'Bigger', 'width=500,height=400,scrollbars=yes, resizable=no')"><img ...></a>

At least this way, those without JS enabled will still be able to view the big images.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oops sorry - forgot the return(false):

<a href="bigimage.jpg" onclick="window.open(this.href, 'Bigger', 'width=500,height=400,scrollbars'); return(false);"><img ...></a>

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

What happens if your user doesn't have javascript? If you craft your links like below, then these users can also see your large images!

<a href="bigimage.jpg" onclick="window.open('bigimage.jpg','Bigger','width=500,height=400,scrollbars=yes,resizable=no'); return false;"><img /></a>

The next step might be to change the onclick code to use the image referenced in the href:

<a href="bigimage.jpg" onclick="window.open(this.href,'Bigger','width=500,height=400,scrollbars=yes,resizable=no'); return false;"><img /></a>

Now you might want to remove the onclick completely... and add it in on body load:

<a href="bigimage.jpg"><img /></a>
...
<script type="text/javascript">
function initOnClicks() {
  var myLinks = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinks.length; loop++) {
    myLinks[loop].onclick="window.open(this.href,'Bigger','width=500,height=400,scrollbars=yes,resizable=no');return false;";
  }
}
window.onload = initOnClicks;
</script>

But you probably have other hrefs on the page that you would prefer not to do this to... so give the links you want to add onclicks to a class and then apply the onclick code only to those:

<a href="bigimage.jpg" class="thumb"><img /></a>
...
<script type="text/javascript">
function initOnClicks() {
  var myLinks = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinks.length; loop++) {
    if (myLinks[loop].className.indexOf('thumb') > -1) {
      myLinks[loop].onclick="window.open(this.href,'Bigger','width=500,height=400,scrollbars=yes,resizable=no');return false;";
    }
  }
}
window.onload = initOnClicks;
</script>

You now have code that is a LOT more generic and degrades nicely for non-javascript users! And it's less spammy (if you have lots of them on a page).

I haven't tested this code... I'm hoping there will some typos in there at least - it's been a quiet day on the forum and at least we'll see some people fixing my code *lol*

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[derwent]

Thanks guys, will read it properly and inhale it later.

Jeff, the image opens up in the same page, not the popup.

 

[BabyJeffy]

You need to include the return false to prevent it opening in the same window. Non javascript users would have it open in the same window (there is no popup option for them unless you add the target="windowName" to the href as well).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[derwent]

I have some portait and some landscape images so did this

<script type="text/javascript">
function initOnClicks() {
  var myLinks = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinks.length; loop++) {
    if (myLinks[loop].className.indexOf('thumbl') > -1) {
      myLinks[loop].onclick="window.open(this.href,'Bigger','width=540,height=450,scrollbars=yes,resizable=no');return false;";
    }
  }
		
		var myLinksp = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinksp.length; loop++) {
    if (myLinksp[loop].className.indexOf('thumbp') > -1) {
      myLinksp[loop].onclick="window.open(this.href,'Bigger','width=440,height=450,scrollbars=yes,resizable=no');return false;";
    }
  }
		
}
window.onload = initOnClicks;
</script>

and then call the class in the a tag but it still shows up in the same window (

<a href="/images/8l.jpg" class="thumbl"><img src="/images/8.jpg" width="130" height="101" border='0' /></a>

 

[BabyJeffy]

Ah, that was my fault:

<script type="text/javascript">
function openLandscape() {
  window.open(this.href,'Bigger','width=540,height=450,scrollbars=yes,resizable=no');
  return false;
}

function openPortrait() {
  window.open(this.href,'Bigger','width=440,height=450,scrollbars=yes,resizable=no');
  return false;
}

function initOnClicks() {
  var myLinks = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinks.length; loop++) {
    if (myLinks[loop].className.indexOf('thumbl') > -1) {
      myLinks[loop].onclick=openLandscape;
    }
  }

        var myLinksp = document.getElementsByTagName('a');
  for (var loop=0; loop < myLinksp.length; loop++) {
    if (myLinksp[loop].className.indexOf('thumbp') > -1) {
      myLinksp[loop].onclick=openPortrait;
    }
  }

}
window.onload = initOnClicks;
</script>

The assignment to an onclick needs to be a function (or an inline anonymous function). Hope this makes more sense.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[derwent]

Thanks matey that works perfectly, have bookmarked this post too as it has some very useful javascript I should know

)