Hey all.

I'm currently mocking up a website using VSD (and a jolly fine program it is too) and I am trying to add images that expand into a pop-up when clicked.

I'm currently using colorbox to make the pop-ups but something doesn't seem to be working. I can get the thumbnail to appear on the webpage but when clicked the image expands as it should, but the entire background is blacked out (not transparent) and I don't have any of the buttons (next, close, etc). I can return to the webpage by hitting back on the browser but it's obviously not the effect I'm after.

I've tried Lightbox 2, but experience the same issue, which leads me to think I am the cause. I have no coding experience at all, so I'd be grateful if you could keep any answers to caveman levels of techno-babble

A few bits of info that may be helpful; I am using the trial version of VSD, Windows 7 and Firefox is my default browser. I haven't published the site either, only previewed it.

Thanks in advance.

Take a look at this.
http://progrower.coffeecup.com/colorboxpics.html

Thanks Eric, that's the incredibly helpful page I've followed so far (I'm even using the same pictures will I practice).

However when I click on the thumbnail on my page I don't get the frame, title line or close button on the enlarged image and the background is solid black, not the slightly transparent one shown in the example.

If you have a web host it would be helpful if you could publish to a temp directory so users could see what you see and look at the source. Would really help.

Now there's a funny story about the webhost. Basically we had one a few years back, but the person who set it up has lost all the passwords and such, so I can't upload anything at present.

I know it's not the same, but these are a couple of screenshots of the problem. As you can see I can get the thumbnail into the page and make it clickable. But once clicked it enlarges and gets the black boarder and no close button. I hasten to add that this is not the website I'm working on, I'm just using it to practice adding the HTML code so I don't mess up the actual site.

I think you're not getting all the files where they need to be. I just ran through Eric's example, changed 1 pic, and it all works great. You can see the result here... http://gunsmoke.me/test12

Make sure when you add the files to VSD that you add them exactly where Eric says to put them. You may have to adjust the code a bit depending on where you put the images.

It would be most helpful if you had a host, just even a test site, it's much easier to see things because they become self explanation. When your using Jquery libraries you have to get them exact, once you do you will be fine, it's just getting it right first time. I prefer Lightbox to Colorbox although the easiest for a beginner would be basic slider, similar type of thing but it doesn't have thumbnails but slides a larger image. Personal preference and depends what your needs are.

Well there's strange. I tried adding colorbox in a completely new page and it worked perfectly. I went back and looked at the previous attempts and they all work fine now. Nothing has changed on my computer, no windows updates, virus scans or software changes, so I'm a little confused as to why it is suddenly working when it hasn't been for the last 3 days. Oh well, I'm just happy it's sorted itself out. The joys of computers I suppose.

Thanks for the help folks, really appreciate it. It wasn't a total loss either as thanks to Gunsmoke's images I've discovered how I should be adding the ie6 files.

While I have your attention, what is the maximum size you would recommend making the pop-up images?

If you'll indulge me a little longer, I have a future project in mind that will require the website to host a portfolio of images which may require regular updating (a gallery rather than individual pop-up images). How would you folks go about setting something like that up?

That would be up to you and would probably depend on what you were trying to do. Are you selling pictures? Or just displaying pictures? I personally wouldn't go much bigger than 400x400 but that's just me. I would also suggest either low res pics, watermarks, or disable the right-click so users wouldn't ( dare I say it ) borrow your pictures. Depending on how many pics you're going to display you might want to really cut down on the size too. Although, if you're site is responsive then you don't want to go so small that phone or tablet users can't really make out the pics. Lots of variables to consider. Good luck to you.

So you obviously mean, after you click the thumbnails and then you see the photos. It really depends on you, what you like, I personally would go more than 400x400, photography is my passion and we see things better when they aren't square, so when Huey Lewis said it's hip to be square don't believe him This is a site I work on for my wife's making beads, http://mirandasbeads.co.uk/bracelet.html if you click on the thumbnail you see it's more landscape, I like something around 600x350-400 You may not like that but trust me on the square, I know you see lightbox eg's and all square but that's all they are examples width should in general and I use the word general because if your photographing portraits that goes out the window, but as a rule wider should be more.