Member Avatar for carko

Help please

I am a newbie trying to learn. I have the time and attitude but I do need direction for what I am trying to do. I have a photo site that I am trying to redo.

I am trying to create a page where on the bottom or top is a group of thumbnails where if you click or rollover the thumbnails, a larger image will appear on the same page. It would also be nice if the display of thumbs will only display a set number at a time with an arrow bringing in more thumbs on the same page. This last area probably needs a js.

I am not looking for someone to do this, just what I need to learn or -helpful hints or tutorials- to point me in the right direction. Any help would be greatly appreciated.

  • 4 Contributors
  • 4 Replies
  • 105 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by kevinly

Dani AI

Generated

A concise, practical plan to build the gallery you described, plus small examples to get started.

Your basic split: server provides a list of images; client renders thumbnails and swaps the main image on click/hover. was right — JavaScript handles the rollover and AJAX will let the arrow bring new thumbs in without a full page reload. ’s example is a good visual reference but you’ll want a small server endpoint to power thumbnail paging.

Server-side (PHP): scan a directory or query a DB, filter image files, and return JSON. This lets the browser request pages of thumbnails on demand (server-side pagination) or get a full list once and page client-side. See PHP’s scandir for a simple file scan (example below) (PHP docs: https://www.php.net/manual/en/function.scandir.php).

Client-side (JS): fetch the JSON, create thumbnail nodes with a data-full attribute for the large image, and use event delegation to set the main image src. For paging/arrow behavior you can either request the next page from the server or shift the thumbnail container with element.scrollBy() for a smooth, lightweight carousel (MDN fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API; scrollBy: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy).

<?php
$dir = __DIR__ . '/images';
$files = array_values(array_filter(scandir($dir), function($f){
  return preg_match('/\.(jpe?g|png|gif)$/i', $f);
}));
header('Content-Type: application/json');
echo json_encode($files);
fetch('/gallery/list.php')
  .then(r => r.json())
  .then(files => { /* render thumbs with img.dataset.full = '/images/'+file */ });

thumbs.addEventListener('click', e => {
  if (e.target.tagName === 'IMG') main.src = e.target.dataset.full;
});

Practical tips: generate server-side thumbnails (GD or Imagick) and cache them; use loading="lazy" and srcset for responsive images; sanitize filenames and white-list extensions to prevent directory traversal; prefer click on mobile (hover is unreliable). If you want a faster path, a mature carousel/lightbox (e.g., Swiper/PhotoSwipe or a simple lightbox) will save time and handle accessibility and touch gestures out of the box.

Recommended Answers

All 4 Replies

Member Avatar for ezb

I don't think this is what you are hoping for but may find it of some use. Great tutorial and great finished product

Member Avatar for scru

this application will require some javascript too, for the rollover.

PHP would come in to limit the amount you display on one page.

If you want the arrow to refresh a new set of images without refreshing the actual page, you need AJAX(Here you combine PHP, javascript and XML).

Member Avatar for carko

I don't think this is what you are hoping for but may find it of some use. Great tutorial and great finished product

It does do what I want with the rollovers but not with putting many thumbnails into the thumb container. The response after this says I probably will have to go with js. This site also has alot of coding which I was hoping an array loop would help with. Is there a way to insert the array loop into his code? (the one you are directing me to)

Member Avatar for kevinly

Photo Story Platinum is also a good photo album maker, It is free to download:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.