I've managed to get the picture to open the bigger version of the picture into a new window using this code:

<IMG SRC="pic_small.jpg" onClick="view();">

<script language="JavaScript">

function view() {
imgsrc = "pic_big.jpg";


viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}
</script>

The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines

<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">

I was also wondering if there is some way to make the window that opens the the same size as the big picture.

I've managed to get the picture to open the bigger version of the picture into a new window using this code:

<IMG SRC="pic_small.jpg" onClick="view();">

<script language="JavaScript">

function view() {
imgsrc = "pic_big.jpg";


viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}
</script>

The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines

<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">

I was also wondering if there is some way to make the window that opens the the same size as the big picture.

• javascript
• image

• Maybe fancybox is the option: fancyapps./fancybox . Hope this helps – macool Commented Nov 27, 2012 at 23:23

3 Answers 3

For your first question

<IMG SRC="pic_small.jpg" onClick="view(this);">

<script language="JavaScript">
   function view(img) {
      imgsrc = img.src.split("_")[0] + "_big.jpg";
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
   }
</script>

UPDATE

To your second question, it can be done.

UPDATE 2

This depends on your image names keeping that same format. Alternatively, you could do this:

<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />

<script type="text/javascript">
   function view(imgsrc) {
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
   }
</script>

Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2

By including lightbox, in bination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

See more examples here in the "how to use" section in the aforementioned link

Look at jQuery library which almost de-facto library for JS. Using it you can do something like that

$('img').click(function(){
  view($(this).attr('src'));
})


function view(small){
  var big = small.split("_")[0] + "_big.jpg";
  viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}

This way all your images will have the same behavior