If Image Exists?

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 2960 Views - Last Post: 07 February 2011 - 04:54 AM

#1 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

If Image Exists?

Posted 07 February 2011 - 12:22 AM

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


Is This A Good Question/Topic? 0
  • +

Replies To: If Image Exists?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 12:25 AM

cant you just stop thumbnail creation when there is no more image?
Was This Post Helpful? 0
  • +
  • -

#3 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 12:31 AM

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:

Posted Image

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

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 12:35 AM

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.
Was This Post Helpful? 0
  • +
  • -

#5 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 12:40 AM

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?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 12:42 AM

how do you create those thumbnails?
Was This Post Helpful? 0
  • +
  • -

#7 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 12:46 AM

They're just smaller versions of the actual image. They're manually added to the directory.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 12:50 AM

sorry, what I meant is: how do you create the <img> tags that show these thumbnails in the browser.
Was This Post Helpful? 0
  • +
  • -

#9 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 12:52 AM

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

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 12:58 AM

View PostNtwiles, on 07 February 2011 - 08:52 AM, said:

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

then Id like to see a live page, so that I can go at it with FireBug.
Was This Post Helpful? 0
  • +
  • -

#11 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 01:07 AM

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

Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 01:57 AM

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

Was This Post Helpful? 0
  • +
  • -

#13 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 02:12 AM

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

Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3490
  • View blog
  • Posts: 10,058
  • Joined: 08-June 10

Re: If Image Exists?

Posted 07 February 2011 - 02:19 AM

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?
Was This Post Helpful? 0
  • +
  • -

#15 Ntwiles  Icon User is offline

  • D.I.C Addict

Reputation: 148
  • View blog
  • Posts: 825
  • Joined: 26-May 10

Re: If Image Exists?

Posted 07 February 2011 - 02:32 AM

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

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2