473,903 Members | 6,365 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamicly creating a table of images: thumbs as index to be clicken on

1 New Member
My problem is:
I want to create an index to any of the available picture-groups.
This index is a table of thumbs with a scrollbar. If you click on the thumb, you get the full picture displayed.

This table must be created from scratch. (The function must be reusable, and speed up the load-time: only one of the various possible picture-groups will be indexed. any other will be loaded by request.
The picture-groups are defined in flexible text-arrays, from which the thumbs-table can be created.
It is all well, in principle, but I have some difficulty in realising it.

I can create the table from the array, but can insert only a text (the URL of the thumb) into the table.

Expand|Select|Wrap|Line Numbers
  1. var EAPictsDE = new Array (
  2.                                 "/elsoaldozas/thumbs/",
  3.                                 "/elsoaldozas/",
  4.                                 "IMG_0010",
  5.                                 "IMG_0012",
  6.                                 "IMG_0015",
  7.                                 "IMG_0016",
  8.                                 "IMG_0017",
  9.                                 "IMG_0018",
  10.                                 "IMG_0020",
  11.                                 "///");
  14. var EAPictsAA = new Array (
  15.                                 "Elsoaldozas/Thumbs/",
  16.                                 "Elsoaldozas/",
  17.                                 "IMG_0058a",
  18.                                 "IMG_0060",
  19.                                 "IMG_0080",
  20.                                 "IMG_0083",
  21.                                 "IMG_0086",
  22.                                 "IMG_0088",
  23.                                 "IMG_0096",
  24.                                 "///");
  27.     var CurrThumbsAdr;
  28.     var CurrFullAdr;
  29.     var CurrArray;
  30.     var CurrLimit;
  31.     var CurrThumbsTbl;
  32.     var CurrTblRows;
  33.     var CurrDestImgNr;
  34.     var CurrThumbsTblId;
  36.     var CurrPosit;
  38. var Zeile = 1;
  40. function ThumbsTableInit( UseArray ) {
  41.     CurrArray = UseArray;
  42. //    CurrDestImgNr = FullDisplayId;
  43.     ClearTable();
  44.     CreateTable (UseArray);
  45. }  // function ThumbsTableInit
  48. function CreateTable (UseArray) {
  49.     var CurrLineText = "";
  50.     var TblPointer = 2;
  51.     CurrArray= UseArray
  52.     CurrThumbsAdr = CurrArray[0];
  53.     CurrFullAdr = CurrArray[1];
  54.     var Temp = "";
  55.     Zeile = 0;
  57.     do {
  58.         CurrLineText = CurrArray[TblPointer] ;
  59.         if (CurrLineText != "///") {
  60.             if (CurrLineText != "") {
  61.                var TR = document.getElementById("Tabelle").insertRow(Zeile);
  62.                    Zeile += 1;
  63.                 var TD1 = document.createElement("td");
  64.                 Temp =  CurrThumbsAdr + CurrLineText + ".jpg";
  65.                var TD1text = document.createTextNode(Temp);
  66.                TD1.appendChild(TD1text);
  67.                TR.appendChild(TD1);
  68.                 }// if (CurrLineText != "") 
  69.                TblPointer += 1;
  70.             }// if (CurrLineText != "///")
  71.     } while (CurrLineText != "///");
  72. } // function CreateTable
  76. function ThumbClick(TrNr) {
  77.       alert ("ThumbClick   TrNr=" + TrNr);
  79. } // function ThumbClick
  81. function ClearTable(){
  82. //      alert ("ClearTable   Zeile="+Zeile );
  83. //      alert ("ClearTable   Zeile=");
  84.         while (Zeile > 1) {
  85.               Zeile -= 1;
  86.             document.getElementById("Tabelle").deleteRow(Zeile);
  87.     }
  88. }

Getting the full picture displayed from a static/fixed thumbs-table does not cause any problems either:


[HTML]<style type="text/css" media="screen">
#div2 { position:absolu te; top:15px; left:15px; font-size: 14.0pt; text-align: right ; visibility: visible; background-color: beige; }
body { text-align: center; font-family: "Book Antiqua"; font-size:22pt; font-weight: bold;}
td { border:thin solid blue; }


<body bgcolor="#CCFFF F" onload="CreateT able(EAPictsDE) ">

<img id="DestPict" src="Elsoaldoza s/Gyuri.jpg" alt="" border="3" />

<div id="div2" style="width:19 0px; height:645px; overflow:auto; ackground-color: beige;
border: 2px; border-color: gold; border-spacing: 2px; border-style: ridge;" >
<table id="ThumbsTable " cellpadding="2" cellspacing="2" border="2" frame="box" style="empty-cells:hide">
<tr><td onclick="javasc ript:ClickThumb nail(0)"><a href="#" name="">
<img src="Elsoaldoza s/Thumbs/IMG_0010.jpg" name="IMG_0010" alt="IMG_0010" border="0" />
<tr><td><a href="#" onClick="javasc ript:ClickThumb nail(1); return false;">
<img src="Elsoaldoza s/Thumbs/IMG_0012.jpg" name="IMG_0012" alt="IMG_0012" border="0" />
<tr><td><a href="#" onClick="javasc ript:ClickThumb nail(2); return false;">
<img src="Elsoaldoza s/Thumbs/IMG_0015.jpg" name="IMG_0015" alt="IMG_0015" border="0"/>
............... .
<tr><td><a href="#" onClick="javasc ript:ClickThumb nail(12); return false;">
<img src="Elsoaldoza s/Thumbs/IMG_0031.jpg" name="IMG_0031" alt="IMG_0031" border="0" />

My problem is in generating the table showing the thumbs, or more correctly the generation of a cell in the form:
[HTML]<td><a href="#" onClick="javasc ript:ClickThumb nail(Index); return false;">
<img src="Picture-Url" name="IMG_0031" alt="IMG_0031" border="0" />
The following lines should be somewhat different:
Expand|Select|Wrap|Line Numbers
  1.                var TR = document.getElementById("Tabelle").insertRow(Zeile);
  2.                    Zeile += 1;
  3.                 var TD1 = document.createElement("td");
  4.                 Temp =  CurrThumbsAdr + CurrLineText + ".jpg";  // here creating the full text <a href="#" onClick="javascript:ClickThumbnail(Index); return false;"><img src="Picture-Url" name="IMG_0031" alt="IMG_0031" border="0" /></a>  is no problem
  5.                var TD1text = document.createTextNode(Temp);  // I think this line must be different, but could not find out what should I use instead of "createTextNode"
  6.                TD1.appendChild(TD1text);
  7.                TR.appendChild(TD1);
I would be grateful for any help.
Jun 12 '06 #1
1 2410
16,027 Recognized Expert Moderator MVP
Create a link element and then append that to the cell:
Expand|Select|Wrap|Line Numbers
  1.    var TR = document.getElementById("Tabelle").insertRow(Zeile);
  2.    Zeile += 1;
  3.    var TD1 = document.createElement("td");
  4.    Temp =  CurrThumbsAdr + CurrLineText + ".jpg";
  5.    link = document.createElement("a");
  6.    link.href = "#";
  7.    link.onclick = function() {...};
  8.    img = document.createElement("img");
  9.    img.src = Temp;
  10.    img.name = ...//etc.
  11.    link.appendChild(img);
  12.    TD1.appendChild(link);
  13.    TR.appendChild(TD1);
Apr 21 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Robert | last post by:
I created two pages. One using CSS and the other using a table. I'd like the css version to work like the table version. The problem arises when the full image doesn't fit in the window. Click on the moon thumb to see the problem. In IE 5.2 on MacOS 10.2.6, the moon drops down below the list of thumbs. I'd like it to say to the right of the thumbs and be able to scroll right. In Netscape 7.2, the larger image of the moon stays to...
by: Abs | last post by:
Hi! I'm trying to center horizontally the thumbnails at the top of the following page: http://project.fotografist.com/photos.php?p_idgal=1 Like the image at the center. I've tried different CSS things on different elements but I can't get it to work as I want. Any
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there anyway to stop this...??? <HTML> <HEAD> <title>Conform Inbox</title> <meta content="False" name="vs_snapToGrid">
by: Jay Levitt | last post by:
On http://www.wellesleycarriagehouse.com, there is no margin around the thumbnail images at bottom. I've verified that Firefox doesn't even THINK there's a margin, using Firebug 0.4. So why is there space around the images in Firefox 1.5 for Windows? Jay Levitt
by: ctiggerf | last post by:
I was hopeing someone could help me out here. Been stumped on this one all day. This function 1. Checks uploaded files. 2. Creates two resized images from each (a full size, and a thumbnail). 3. Returns an array with a bool (false if the upload failed), and an error message.
by: Mariusf | last post by:
I am a novice Perl programmer and need to change a perl script that I use to create web pages with thumbnail images and some text. Currently the script created a web page for each artist / category with all the thumb images below one another in the table. Thus the table has one column with a row for each image. I am trying to change the script to have 3 columns in the table in the end (first testing with second column as in the attached...
by: Confused but working on it | last post by:
Just wanted to say thanks for the posts helping me make ths work. Added a few comments and after the readdir used a pattern match to test for ..jpg, and seems to work fine on my test setup. Maybe I should test for gif, tiff, and png... Anyway, here's the code: <?php //Open images directory $dir = opendir("images"); //read files in the dir while (($file = readdir($dir)) !== false) //test to make sure jpg
by: aladinsane | last post by:
Hi, I trying to build a table using the TableControl in order manage som image files. What I would like to do is to load an image combined with a linkbutton into each cell and to delete the image if you click it. The table is created complete with links and images, but the eventhandler attached to the linkbutton is not reached when I activate the linkbutton. I assume that it has something to do with how the page is loaded, but I cannot...
by: manoj10029 | last post by:
UPDATE collection SET image_name = 'collection_diir/1225542431.jpg', Code = 'qqq', Media = 'qqq', Dimensions = 'qqq', Availbility = 'qqq' WHERE collection. image_id = '7' AND collection. image_name = `collection_dir/19521.jpg` such SQL query is not work
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.