Website Directory Navigation

Website Directory Thumbnails without Websnapr

Try it out: cms-view-website-directory-without-websnapr-demo.html. This is just a JavaScript demo that does not use MySQL db tables, but it performs identically to a script with MySQL and PHP. The script below is the code for a PHP/MySQL demo of a Content Management System for Viewing Website Directories without the use of Websnapr. It assumes you have set up db tables like in the cms-view-website-directory-with-dynamic-descriptions-and-thumbnails.html app with MySQL db tables set up by the app cms-creating-website-directories.html all of which can be downloaded here: cms-directory.zip.

There are about 4 main ways to deal with this website directory creation script scenario—we'll give you the pros and cons of each:

Use Websnapr. The Pros here are that, for a fee, these guys will take care of the whole issue and you'll need no thumbnail creation or storage and no changes to our Content Management System for Website Directories. The Cons are that the free version illustrates that, like most everything else in life, you get what you pay for. At first it appeared that we merely add up to 100 new links a month and they would process them and they would be readily available whenever they were needed. Not quite. The free version apparently needs for you to make frequent use of these thumbs or they would go into a kind of limbo where when you hovered the links, instead of the thumbnail you get their nag screen. Then if you come back to that link later, it would act properly and give you the thumbnail. But what possible good is that to anyone? Throwing a nag screen (or call it a Websnapr ad) at us after we'd already broken in each link defeated the thumb-showing functionality purpose entirely. Worse yet, after clicking a bunch of links, we ran into their infamous "Limit Reached" screen which was acting like we had never initialized the initial 128 links (over 2 months) in the first place. It's almost like they would force us to re-initialize each and every link again every month! This was more than a little frustrating since their literature did NOT give the impression we'd be running into such high-pressure tactics. We understand the need to pay for their thumbnail storage and hosting, but they needed to make their "free" version's features a lot more clear upfront, calling it what it is: a nice way to try their thumb system out and see how things work. It is MY NO MEANS a viable thumb option for any actual real purpose! Can you imagine making a website directory relying on this and then having customers run into ads for their service instead of a legitimate thumb?! But, of course, that is why there are paid versions—so there's no nagging or dysfunctionality. Happily for us, we're not using their system for anything other than teaching coding, so it won't be nagging and disappointing any of our readers anytime soon.
Use the code you see below and be careful to keep your website links and your thumbnail links closely coordinated. The scenario goes like this. Each link url is stored in the db. If you have 10 links for the subject DHTML sites and you name your thumbs DHTML0.jpg through DHTML9.jpg, all will be well—or 100 links that require DHTML0.jpg through DHTML99.jpg will be fine, too. But only if you never change anything or add or delete any link ever—once you do, things get weird. If you add a link, have the next thumb name be DHTML10.jpg. However, if you must delete a link, things will get tricky and perhaps even crazy, so you're safest to do the deleting in phpMyAdmin and add a url link (that will be in the same place alphabetically in a url list) in its place while you're at it. Then name the new thumb the same as the obsolete thumb, in your code. Do not expect for records to keep the order you wish they would once you start adding and deleting, since once this happens there is a big chance that most of your links will be matched with the wrong thumb thereafter. The cure? See number 4, below. By the way, only the DHTML category was made functional in that code since we were too lazy to create 128 thumbnails from websites. If you want to use this method, take if(c!=3){alert("Choose DHTML for this demo of not needing Websnapr.");return;} out of the newcategory(c) function. And store thumbs in a folder on the site and call it thumbs.
Use image names that derive from their urls. For example, in the link http://www.dynamicdrive.com/ you could use JavaScript, PHP, and perhaps regular expressions to dump all but the "dynamicdrive" string and then put ".jpg" after it. This will only work if you'll never need the same domain in your thumbnails folder, but if it fills your needs, go for it.
BEST SOUTION: Put another field in your db urls table called images. Store the names of your images such that every record now has this images field specifying the thumbnail to load. If we were to really go into the website directory business, we'd get those that signed up and submitted directories to include a screen shot and we'd merely link to that, to cut down storage requirements. But if we were just making a directory with limited scope and purpose where we would put together the data and thumbnails and links ourselves, and we wanted no sign-ups or outside contributions, this added field method would be our first choice because of the way it keeps each record's data together and solves the db issues regardless of whether or not any record/url/link deletions or adjustments occur. The CMS system here cms-creating-website-directories.html would need to be adjusted for the addition of this new field, and all the apps of the system would need small adjustments to accomodate this images field. We had no reason to do this work ourselves, since for teaching purposes the Websnapr option filled the bill. The code below gives you a fine script for putting thumbnail pictures on the screen when you hover over the link called thumbnail. If you change the script to get its image name from the images field in the urls table instead of getting the name from one of the ways outlined above, you'll be all set. Make sure to get rid of code that is trying to get the name from the category like document[n].src="thumbs/"+cc+s+".jpg";}, or trying to keep you away from anything but the fourth catalog element, like if(c!=3){alert("Choose DHTML for this demo of not needing Websnapr.");return;}.

SAVE THIS PAGE AS: cms-view-website-directory-without-websnapr.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Viewing Website Directories—Content Management System (CMS)</TITLE>
<meta name="description" content="Viewing Website Directories—Content Management System (CMS)">
<meta name="keywords" content="View Website Directories,View Web Site Directories,Viewing Website Directories,Content Management System,Content Management System Articles,php,CMS,javascript, dhtml, DHTML">

<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 24px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.d {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:#ddd; border:1px solid #000; font: 11px Verdana;top:70px;z-index:99;}
.e {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:transparent; border:none; font: 11px Verdana;}
.f {position:absolute; left:330px;z-index:0; top:70px; padding:10px; background-color:#eee; border:1px solid black; font: 13px Verdana;}
.b {font:bold 13px Verdana;}
.g {position:absolute; left:228px; width:90px; top:70px; padding:10px; background-color:#bbb; border:1px solid black; font: 13px Verdana;z-index:99}
.c {position:absolute; left:2px; width:224px; top:70px; padding:5px; background-color:#ddd; border:1px solid black; font:bold 15px Verdana;}
.l {position:absolute; left:2px; width:224px; top:44px; padding:3px; background-color:#aaa; border:1px solid black; font:bold 15px Verdana;text-align:center}
.t {position:absolute; left:228px; width:463px; top:44px; padding:3px; background-color:#bbb; border:1px solid black; font:bold 15px Verdana;text-align:left}
.z {position:absolute; left:700px; width:280px; top:44px; padding:3px; background-color:#ccf; border:1px solid black; font:bold 11px Verdana;text-align:left}
.url {position:absolute;top:0px;left:10px;width:998px}
.thumb {position:absolute;top:-201px;left:332px;width:200px;height:150px;z-index:111}
</style>
<SCRIPT LANGUAGE="JavaScript">

</script>
</head>

<body onLoad="startmouse(),metano(),fix()">

<div id='top' class='url'><h1>Viewing Website Directories—Content Management System (CMS)</h1></div>

<div id='k' class='d'></div>

<div id='kt' class='thumb'><IMG SRC="thumbs/DHTML0.jpg" WIDTH=200 HEIGHT=150 BORDER=0 name='thumb'></div>

<form name="MyForm" method="POST" action="cms-view-website-directory-without-websnapr.php">
<input type="hidden" name="category" value=" ">
</form>

<?php

include_once"config.php";

$C=$_POST['category'];
if (strlen($C)>0){echo "<div class='l'>".$C."</div>";

$urls=array();

$result = mysql_query("SELECT url FROM urls WHERE category='$C' order by url") or die(mysql_error());
while($row = mysql_fetch_array($result)){
array_push ($urls, $row[0]);
}
$num_urls_in_table=mysql_num_rows($result);
}

$cat=array();

$res = mysql_query("SELECT category FROM categories order by category") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($cat, $row[0]);
}

$num_cats_in_table=mysql_num_rows($res);

mysql_close();

?>

<SCRIPT LANGUAGE="JavaScript">

var cat = <?php echo json_encode($cat); ?>;

var urls = <?php echo json_encode($urls); ?>;

var cc = <?php echo json_encode($C); ?>;

var num_cats_in_table = <?php echo json_encode($num_cats_in_table); ?>;

var num_urls_in_table = <?php echo json_encode($num_urls_in_table); ?>;

document.write("<div class='c'>");
for (i=0;i<num_cats_in_table;i++) {
document.write("<a HREF='#' onclick='c="+i+",newcategory(c)'>"+cat[i]+"</a><br>");
}
document.write("</div>");

if (urls.length>0) {
document.write("<div class='t'>Thumbnail          
         
           Info</div><div class='z'>Use down arrow if anything is too low</div><div class='g'>");

for (i=0;i<num_urls_in_table;i++) {
document.write("<a HREF='"+urls[i]+"' target='_blank'>Thumbnail</a><br><br>");}

document.write("</div><div class='f'>");

for (i=0;i<num_urls_in_table;i++) {
document.write("<a HREF='"+urls[i]+"' target='_blank'>"+urls[i]+"</a><br><br>");}

document.write("</div>");}

</script>

<?php include("nav.html"); ?>

</body>
</html>

Free Personal Status Boards (PSB™)

Website Directory Thumbnails without Websnapr