0

I have thumbnails and a previous and next button already set up. When a thumbnail is clicked it loads a blank div with the navigations buttons in it. I already have the large images in a folder on the site.

http://www.robertfikesiv.com/

So my question is how do I load the image into the div when a thumbnail is clicked and have those images change swap in and out when using the previous/next button to remove the current image and load in the next or previous image in the list?

Would this require AJAX? PHP? or will jQuery be enough?

Originally I was going to load all the images on the page with a property of display:none and use jQuery to navigate through them. This site will have a preloader on it eventually but I want the best strategy for preformance and load time.

Robbie Fikes
  • 409
  • 4
  • 15
  • if you're making a call to a database and you don't want the page to reload then you need to use AJAX – jmore009 Dec 29 '14 at 03:30

2 Answers2

0

You should look at this Load image with jQuery and append it to the DOM

Basically you do not need any of server-side interactions, you need to place some links onto the page, so the browser will load it by itself. When picture is loaded, you can manipulate it any way you want, also keep in mind that once browser downloaded it, the image is cached and next time you fetch it from remote server - in fact you are only pulling it from your file system

Community
  • 1
  • 1
Aleksandr
  • 2,185
  • 2
  • 21
  • 29
  • Ok makes sense. But then I guess the question would be how to make it so that the next/previous button will swap out the image loaded? – Robbie Fikes Dec 29 '14 at 04:07
  • @RobbieFikes You can keep your loaded images on the page simply hiding them (CSS property *display: none;*), so when the Next is clicked - hide all images, show next one (keeping the current index in memory). – Aleksandr Dec 29 '14 at 04:10
  • @RobbieFikes For smooth transitions, use the power of CSS3. Also you can look up the methods that are used in popular slideshow libraries - this will be very good for your education as well as writing everything from scratch. – Aleksandr Dec 29 '14 at 04:12
  • I know how to do that, I was just wondering would that method slow down preformance because it is loaded but not hidden? These are very large images and I have about 50. – Robbie Fikes Dec 29 '14 at 04:16
  • @RobbieFikes In this case I would suggest you to do this - do not load all images at once, load only previous 2 and next 2 images. So, for example you start from the 10th image - load the 10th image in the first turn and show it to user. While user is busy with it, load previous 2 and next 2 - so when user clicks Next or Previous, he will not have to wait. Tune it, test it, compare performance for different browsers. Also keep in mind that you should load images in asynchronous mode - use the beauty of JavaScript. – Aleksandr Dec 29 '14 at 04:27
  • Interesting, I'll try that out – Robbie Fikes Dec 29 '14 at 04:37
0

as long you're alright with using plugins, as opposed to writing something from scratch in jquery, have you looked into using a lighbox? there are tons of options, and they're a snap to set up.

this is a pretty nice one: http://fancybox.net/

dresden
  • 1
  • 1