A Simple Image Gallery from scratch

I wanna make a next-prev type webcomic image gallery like that of xkcd or smbc but I'm having a bit of a rough start. I've been asking the wrong people and searching for the wrong things. Obviously, this has even been asked here before but I want to make it from scratch! Just using pure JavaScript, HTML5 and CSS3. I feel this project will help me learn the ropes.

The following is the first idea to pop into my head.

HTML::

 <h1>Oscars 2015</h1>
 <button id="prev" onclick="prev(); return false;" disabled>PREVIOUS</button>
 <button id="next" onclick="next(); return false;">NEXT</button>
 <h3>(<span id="num">#</span>) <span id='title'>title</span></h3>
 <img id="comic"/>

Javascript::

var img = [
 ["http://ift.tt/1DwpLIR", "Birdman or (The Unexpected Virtue of Ignorance) won Best Picture."],
 ["http://ift.tt/1vTtSRC", "Eddie Redmayne won Best Actor in a Leading Role for his role in The Theory of Everything."],
 ["http://ift.tt/1DwpJR7", "Julianne Moore won Best Actress in a Leading Role for her role in Still Alice."],
 ["http://ift.tt/1DwpJRa", "J K Simmons won Best Actor in a Supporting Role for his role in Whiplash."],
 ["http://ift.tt/1vTtUZH", "Patricia Arguette won Best Actress in a Supporting Role for her role in Boyhood."],
 ["http://ift.tt/1vTtUZJ","Big Hero 6 won Best Animated Feature Film."]
];

var i = 0;

function setComic() {
    console.log(img[i]);
    document.getElementById("comic").src = img[i][0];
    document.getElementById("num").textContent = i+1;
    document.getElementById("title").textContent = img[i][1];
}

setComic();

function prev() {
    i--;
    if (i <= 0) document.getElementById("prev").setAttribute('disabled', true);
    else document.getElementById("next").disabled = false;
    setComic();
    console.log(i);
}

function next() {
    i++;
    if (i >= img.length - 1) document.getElementById("next").disabled = true;
    else document.getElementById("prev").disabled = false;
    setComic();
    console.log(i);
}

See it in action here!

I wanted to put the buttons both above & below the picture. So, I did and I replaced the next/prev id with classes and used the document.getElementsByClass() thing but it isn't working as I imagined. (code here) And that's just the tip of the iceberg.

My image storage method is whack. Pageloading is whack, I'm whack and my duck goes quack.

MY QUESTIONS ARE AS FOLLOWS:

1) How can I make my code more efficient and effective?

2) How can I make loading of images better for slow connections?

3) Any good advice for making the thing I want to make; resources, tips, etc. etc.

*Sigh* ... Could I bother you for a cup of help, good neighbour.