Image won't change based on size ?

[Siberian]

This script won't change the image id when the browser width is 320 ?

I'm hoping someone can help ?

[gentlemedia]

There's a lot wrong and messy in your implementation. I don't know why you have so many functions and some of them don't make sense. Also you have stuff from the tutorial still in it, which you don't need and which makes it even harder for you to debug.

You don't need much. Here's my take inspired by the tutorial.

Default image in the HTML (in this case the medium image):

<img id="1" src="http://placehold.it/400x300/000000/eeeeee?text=Medium" alt="">

And the JS to swap the image:

var mqls = [
    window.matchMedia("(min-width: 20em)"),
    window.matchMedia("(min-width: 50em)"),
    window.matchMedia("(min-width: 80em)")
]

function mediaqueryresponse(mql){
  if (mqls[0].matches){ 
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Small";
  }
  if (mqls[1].matches){
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Medium";
  }
  if (mqls[2].matches){
    document.getElementById("1").src = "http://placehold.it/400x300/000000/eeeeee?text=Large";  
  }
}

for (var i=0; i<mqls.length; i++){
    mediaqueryresponse(mqls[i])
    mqls[i].addListener(mediaqueryresponse)
}

Demo (works both on load & resize):
http://codepen.io/gentlemedia/full/pgWKxR/

[Siberian]

I want based on the min-width of the window; to send two different images for the first item in the array
Must I include OR in the array or in the condition, or both ? The condition for the first array will contain two images, maybe three.
I inserted this in the array;

window.matchMedia("(min-width: 320px)") || window.matchMedia("(min-width:568)")

[gentlemedia]

I thought you wanted to change the images like scrset does, but with JavaScript, because your lightbox script could not work with scrset.
I don't understand what you're trying to achieve now, so perhaps someone else does.

[Siberian]

Nothing has changed with the fact that I want to change the images with Javascript.

The only difference; if the orientation is different, the same image to which the img tag has an id=1 for example, continues to change the image based on the first item in the array. From my knowledge that would entail some kind of comparision operation ?

[gentlemedia]

The only difference; if the orientation is different, the same image to which the img tag has an id=1 for example, continues to change the image based on the first item in the array. From my knowledge that would entail some kind of comparision operation ?

I'm still confused!

[Siberian]

At present the script changes the img with an id=1 based on the viewport size as read in the array. What it doesn't take into consideration is the orientation change.

I want the image that is to be changed for the img tag with an id=1 at 320px width to be sent to the browser if the orientation changes to 568px width as well, that would be for only the first item in the array.

The second item in the array would also put into consideration two min-width and same goes to the final item in the array.

I hope that was clear, if not I'll re-explain it again :)

[gentlemedia]

Ah... okay. :) You can fire an event on orientaton change as well.
https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

[Siberian]

Confused, must I add orientationchange to the array, or to the last loop;

for (var i=0; i<mqls.length; i++){
    mediaqueryresponse(mqls[i])
    mqls[i].addListener(mediaqueryresponse)
    mqls[i].orientationchange(mediaqueryresponce)
}

[gentlemedia]

The array is only for your media queries.
How and where to implement the orientation change, I don't know either but if the width of the orientation change falls within another media query, it will load the image that you have defined for that media query, isn't it?

[Siberian]

What I wanted to know, should I put a comparison operator in the array and have two different media query for one item in the array, would that work, before I attempt ?