[Ntwiles]

I'm just finishing up an image gallery for a friend. It displays 4 thumbnails at a time, and I just realized if the gallery contains less than 4 images then one of them will get that ugly broken link image. I've created an image with the words "No Image" to replace these with, but I'm unsure about the best way to put it in.

I realize that Javascript is client side, not server side, and that I can't simple check if the file exists. But can I use some kind of error handling techniques to accurately catch this problem and fix it? Or would I be better off doing it with PHP?

This post has been edited by Ntwiles: 07 February 2011 - 12:24 AM

[Dormilich]

can’t you just stop thumbnail creation when there is no more image?

[Ntwiles]

Yes I could, but I think it would take away visually from the layout of the gallery. I display 4 thumbnails at a time, then their are arrows on either side to move forward and backward in the list to see different thumbnails. I wouldn't rather display a placeholder than just 2 or 3 thumbnails. Here's a screenshot to show what I'm talking about:



Edit: The black arrow on the right would normally be grayed out; I photoshopped in those "No Image" images.

This post has been edited by Ntwiles: 07 February 2011 - 12:32 AM

[Dormilich]

this would only make sense if you move forward by 4 images at once.

depending on how you create those image tags, you could use the fallback image by default and overwrite the source for every actual image.

[Ntwiles]

Yeah I'm not sure if my friend's client wants to move 4 at a time or 1 at a time so I'm trying to code for both options. I could do that, but I would still have the problem of the src of the images being overwritten with one that doesn't exist. Here's how I change the thumbnails:

function getThumbnails()
{
   document.getElementById('thumb_1').src = 'images/'+cat+'/'+thumb_min+'_thumb.jpg';
   document.getElementById('thumb_2').src = 'images/'+cat+'/'+(thumb_min+1)+'_thumb.jpg';
   document.getElementById('thumb_3').src = 'images/'+cat+'/'+(thumb_min+2)+'_thumb.jpg';
   document.getElementById('thumb_4').src = 'images/'+cat+'/'+(thumb_min+3)+'_thumb.jpg';
   checkRange();
}

Could that be reworked in a way that allows for your idea to work?

[Dormilich]

how do you create those thumbnails?

[Ntwiles]

They're just smaller versions of the actual image. They're manually added to the directory.

[Dormilich]

sorry, what I meant is: how do you create the <img> tags that show these thumbnails in the browser.

[Ntwiles]

Oh ha I'm sorry. They're created like so:

   
<img id='thumb_1' onclick="changeImage('thumb_1');" width=128px height=96px src=''>
<img id='thumb_2' onclick="changeImage('thumb_2');" width=128px height=96px src=''>
<img id='thumb_3' onclick="changeImage('thumb_3');" width=128px height=96px src=''>
<img id='thumb_4' onclick="changeImage('thumb_4');" width=128px height=96px src='images/no_image.gif'>

You can see on the last one where I tried your method to no effect.

This post has been edited by Ntwiles: 07 February 2011 - 12:53 AM

[Dormilich]

Ntwiles, on 07 February 2011 - 08:52 AM, said:

You can see on the last one where I tried your method to no effect.

then I’d like to see a live page, so that I can go at it with FireBug.

[Ntwiles]

Sure, you can find it here:

http://theblog.x10.m....php?category=1

This post has been edited by Ntwiles: 07 February 2011 - 01:07 AM

[Dormilich]

first impression, works out of the box with JS disabled.

second looks, in getThumbnails() you overwrite all default images.

do you have a method to determine the number of images you want to display?

This post has been edited by Dormilich: 07 February 2011 - 02:02 AM

[Ntwiles]

Yeah I use PHP to count the number of images in each folder:

if (isset($_GET['category']))
{
   $category = $_GET['category'];
   $directory = "images/$category/";

   if (glob("$directory*.jpg") != false)
   {
      $filecount = count(glob("$directory*.jpg"));
   }
   else
   {
      $error = "There are no images in this category.";
   }
   if (!$error)
   {
      if ($filecount % 2 !== 0)
      {
         $error = "Error: Not all images have thumbnails.";
      }
      else 
      {
         $image_num = ($filecount / 2);
         $displaygallery = True;
      }
   }
}

It works with Javascript disabled? It doesn't for me. Yeah getThumbnails is the one I showed you. That's the one I would need to change to do the method you were talking about.

This post has been edited by Ntwiles: 07 February 2011 - 02:14 AM

[Dormilich]

it looks like that is not the only function concerned. from glancing over, there is a lot of inconsistency present.

what part in your code is written by PHP? (how do you pass the information from PHP to Javascript?

have you ever done AJAX?

[Ntwiles]

Yeah there are definitely some weird functions in there. I could do with more experience. Yeah I have done a little AJAX. I'm no expert but I understand how it works. This is something I'm only getting paid $25 flat for though, and I think I've already worked more than I'm getting paid for. I made some offers to improve the quality of the gallery but he didn't seem too concerned with it. I also promised him that anything I did he would be able to understand and modify, and I don't think he would be able to get AJAX.

Besides the chunk of PHP I showed you, there's just a small bit used to echo some gallery categories, then the pieces I use to pass values to javascript:

<?php echo "var image_num = $image_num;"; ?>
<?php echo "var cat = $category;"; ?>

I also use it to import the actual gallery.html file, which is just the formatting for the gallery.

This post has been edited by Ntwiles: 07 February 2011 - 02:37 AM