Help on making an image gallery???

Hey thats pretty much what I was looking to achieve to start then build it up as I go along, really great how you did it so quick. Like you said I know the basics of javascript and jquery but I'm just struggling at the moment with how to start things.

any advice on what you did here looks great...

The JS right now is actually really short and simple. There are definitely features you could add, like you said.

<!-- The basic HTML I'm using in the demo. -->
<div id="container">
  <div id="thumbnails">
    <!-- Images Go Here! -->
  </div>

  <div id="mouseover-image">
    <!-- This is where the JS is going to put the large image. -->
  </div>
</div>

// Variable for the larger image display.
var $image = $("<img>");

// Append the larger image to the mouseover-image div.
$("#mouseover-image").append($image);

// When you hover over a thumbnail image...
$("#thumbnails img").hover(function (){
  // Get the thumbnail's source.
  var imageSource = $(this).attr("src");

  // Set the large image's source to the current thumbnail.
  $image.attr("src", imageSource);
});

There are definitely features you could add to make it nicer than this. But you're absolutely right that it's a good plan to start from the most basic concept and build up slowly.

I find it's easiest to think of it in blocks, and I tend to start with the event personally.

For this, I know I need to do something when I mouseover the thumbnails, so I start with that.

How do I select those thumbnail images?

How do I do that when I mouseover them?

For me, it's easier to do that and then figure out what I want to do once I've got that $(this) to work with. But I'm sure there are as many approaches as there are people who write code. I am still fairly new to this, so I refer to the documentation on the JQuery site a ton.

EDIT - I also save all of my Treehouse projects.

When I'm learning a new language, I like to refer to previous projects when I'm working on new stuff. Much of the time, there are similar enough things in previous work that you can reuse parts of them or concepts in new projects.

For this, I referred to the Lightbox project that @chalkers teaches in the JQuery course. It's not the same goal, but the structure helped me knock out a basic plan quickly.

cool that's some good advice, I'm pretty decent at css now so I'm trying to push on with javascript and jquery. I guess I'm at that stage where I just need to keep pushing on watching news videos trying projects and I'll start picking it up. But your right with treehouse I need to make more of an effort of saving there projects as a lot of what they teach can be changed slightly and used differently.

Thanks again you've gave me a great starting point for me to push on with my project

Here's a Codepen I put together that may give you some ideas - specifically the JavaScript logic on hiding and displaying images. This took some time for me to reason about, and eventually it seemed easier to just hide all images and then show the one you want.