Tilted Forum Project Discussion Community  

Go Back   Tilted Forum Project Discussion Community > Interests > Tilted Technology


 
 
LinkBack Thread Tools
Old 01-07-2005, 02:04 PM   #1 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
[Java] gallery question

This is tied into this thread:
http://www.tfproject.org/tfp/showthread.php?t=76973

I have a gallery I'm trying to build located here:
http://www.arch13.com/index.php?id=g...d2=test/popgal

The page with two tables is included through id=gallery. The php script on the left side is then included through id2=test/popgal and builds the thumbnail table.
Right now it pops up images using this code:

Code:
<a href="#" onClick="popupgalimage('imgs/<?php echo $file;?>', <?php echo "$width";?>, <?php echo "$height";?>); return false"  class="popimage"><? echo "<img src='imgs/thumbs/$file' class='popimage'></a></td>"."\n";
I want to make it display the image on the righ side of the page is instead of poping up an image. How can I change the onClick behaviour to do this? Is this fairly easy, or am I asking for a huge project here?

I'm also looking at how to do it using php is the referenced thread, but if I understand theFez correctly, I can only do it in php by adding another id variable to the url and refreshing the page, which doesn't seem like it would come off as proffesional.

Any help, suggestions, etc are greatly appreciated.
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever
arch13 is offline  
Old 01-07-2005, 09:16 PM   #2 (permalink)
Crazy
 
Location: here and there
first of all, this is a javascript question, not a java question. the only similarity between the two is that the latter is a proper subset of the former in name only.

Basically what you need to do is name your large image, then change your onclick to swap the images. so if you change this:
Code:
<img src='imgs/rail_def.jpg'>
to
Code:
<img src='imgs/rail_def.jpg' name='master'>
Now you have named the master image and can use javascript to alter this image. so your tnail links will change to
Code:
<a href="#" onClick="document.master.src='imgs/rail1.gif';"  class="popimage"><img src='imgs/thumbs/rail1.jpg' class='popimage'></a>
This is a little quick and dirty. The best thing to do would be to implement a preloader so the images will swap in quickly. Put something like this in your body tag:
Code:
<body onLoad="doPreload();">
then something like this in your javascript file or in the page:
Code:
function doPreload()
{

   var images = new Array('images/rail1.gif','images/rail2.gif', 'images/rail3.gif');
   preload(images);
}

function preload(img_arr) {

   for(var loop = 0; loop < img_arr.length; loop++)
	
   {
 	var image = new Image();
	image.src = img_arr[loop];
   }
}
this will cache all the large images so they wont have to download from the server once they are called for. You dont have to reference any of the variables here, you can just use the image name to load them. Probably if i was you, I would alter these functions so you can pass the image names to the preload function and generate your javascript with php on the fly.
__________________
# chmod 111 /bin/Laden
theFez is offline  
Old 01-07-2005, 09:51 PM   #3 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
Quote:
Originally Posted by theFez
first of all, this is a javascript question, not a java question. the only similarity between the two is that the latter is a proper subset of the former in name only.

Basically what you need to do is name your large image, then change your onclick to swap the images. so if you change this:
Code:
<img src='imgs/rail_def.jpg'>
to
Code:
<img src='imgs/rail_def.jpg' name='master'>
Now you have named the master image and can use javascript to alter this image. so your tnail links will change to
Code:
<a href="#" onClick="document.master.src='imgs/rail1.gif';"  class="popimage"><img src='imgs/thumbs/rail1.jpg' class='popimage'></a>

theFez, I think I'm looking at something similar

I used this page as tutorial and seem to have an understanding but can't get the image to swap
http://www.alistapart.com/articles/imagegallery/

the javascript function in the pages header is this:

Code:
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder')»
  .src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc')»
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
I don't need the title stuff, but don't know which lines of code to erase

The image placeholder is
Code:
<img id="placeholder" src="imgs/blank.gif" alt="" />
and I tried this as the onclick action for the images in the thumb table:
Code:
<a onClick="return showPic(this)" href="imgs/<?php echo $file;?>"><? echo "<img src='imgs/thumbs/$file' class='popimage'></a>
The table builds fine and the page displays correctly but clicking the thumbs just links to the actual image and doesn't swap it.

If I understand your post, is this the same method? Assigning a name to the swapped image and using the image file name as the variable? Or did I miss the point completely?

The current page that I've been banging on for the last three hours is here:
http://www.arch13.com/galtest3.php

Is what I'm doing wrong obvious to you? Or should I drop this method and try your some more? (I tried it once before posting and got back errors when I changed the imgs/rail1.gif to ?php echo $file;? (with brackets of course)
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever
arch13 is offline  
Old 01-07-2005, 10:04 PM   #4 (permalink)
Crazy
 
Location: here and there
» is not a string concatenation operator. yank that from your javascript code and it should work.
__________________
# chmod 111 /bin/Laden

Last edited by theFez; 01-07-2005 at 10:06 PM..
theFez is offline  
Old 01-07-2005, 10:26 PM   #5 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
Quote:
Originally Posted by theFez
» is not a string concatenation operator. yank that from your javascript code and it should work.
hmmm. that both works and doesn't now.
Your right, that >> was screwing it up.

Now that I pulled it, when I click on the image, it swaps into the right table. But then the page auto-refreshes to the image itself.

I have no idea why it's doing that. Did I create something somewhere that is causing this?
Maybe I should just post the page source to make it easier:
As you can see, I changed the script to pull the >> tags. Is the class=popimage cuasing the page to refresh to just the image instead of the image in the table swapped?

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder')
  .src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc')
  .childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc')
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>
</head>

<body onLoad="MM_preloadImages('splash/boiler_splash.JPG')">
<table height="114" border="0" cellpadding="0" cellspacing="0"><!--DWLayoutTable-->
  <tr> 
    <td width="201" bgcolor="#999999" class="navbars" cellpadding="0" cellspacing="0"><div align="center">
	<?php

# PopUp! Gallery, a basic and configurable PHP script
# to display javascript pop-up picture galleries on the web.
# - By Matthew Blake (http://www.darkhighway.net)
# - Download source at http://www.darkhighway.net/PopUpGallery/
# Special thanks to ninebirds from DevShed for helping with sort issue
#####################################################################
# This program utilizes aspects of the following scripts:
# JK Pop up image viewer script- by JavaScriptKit.com
# --- Visit JavaScript Kit (http://javascriptkit.com)
# --- for free JavaScript tutorials and scripts
# PHPphotoAlbum 1.0 - by Daniele Leone (info@danieleleone.com)
# --- Download available at http://www.danieleleone.com/
# Disable right click script III- By Renigade (renigade@mediaone.net)
# --- For full source code, visit http://www.dynamicdrive.com
#####################################################################

include("test/_vars.php");
echo "<!--BEGIN PopUp Gallery -->"."\n";
echo "<style type='text/css'>IMG.popimage { border: $thumb_border; }</style>"."\n";
$files = array ();
$myDirectory = opendir("imgs/thumbs");
echo "\n";
echo "<table width=$table_width bgcolor='$table_bg_color' border='$table_border' cellpadding='$cell_padding' cellspacing='0'>"."\n";
echo "<tr>"."\n";
while ($file = readdir($myDirectory)) {
	if (($file != ".") && ($file != "..") && ($file != "index.php") && !(is_dir("imgs/$file")) )
	{
	$files[] = $file;
	}
}
sort($files);
for ($i = 0; $i < count($files); $i++)
{  
  $file = $files[$i];
	if (is_int(($i + 1) / $cols))
	{
	list($width, $height) = getimagesize("imgs/$file"); 
	echo "<td align='center' >";?><a onClick="return showPic(this)" href="imgs/<?php echo $file;?>"><? echo "<img src='imgs/thumbs/$file' class='popimage'></a></td>"."\n";
	echo "</tr><tr>"."\n";
	}
	else
	{
list($width, $height, $type, $attr) = getimagesize("imgs/$file");   
echo "<td align='center'>";?><a onClick="return showPic(this)" href="imgs/<?php echo $file;?>"><? echo "<img src='imgs/thumbs/$file' class='popimage'></a></td>"."\n";
	}
}
echo "</tr>"."\n";
echo "</table>"."\n";
echo "<!--END PopUp Gallery -->"."\n";
closedir($myDirectory);
?>

      </div></td>
    <td width="439" height="25" bgcolor="#999999" class="navbars" cellpadding="0" cellspacing="0"><div align="center"><img id="placeholder" src="/splash/boiler_splash.jpg" alt="" /></div></td>
	</tr>
</table>
</body>
</html>
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever
arch13 is offline  
Old 01-09-2005, 02:24 PM   #6 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
Quote:
Originally Posted by theFez
first of all, this is a javascript question, not a java question. the only similarity between the two is that the latter is a proper subset of the former in name only.

Basically what you need to do is name your large image, then change your onclick to swap the images. so if you change this:
Code:
<img src='imgs/rail_def.jpg'>
to
Code:
<img src='imgs/rail_def.jpg' name='master'>
Now you have named the master image and can use javascript to alter this image. so your tnail links will change to
Code:
<a href="#" onClick="document.master.src='imgs/rail1.gif';"  class="popimage"><img src='imgs/thumbs/rail1.jpg' class='popimage'></a>
theFez, I tried this this afternoon and keep getting parse errors. I thought I'd give your code a go since the code I've been trying to use has been giving me a problem (see above)

I used
Code:
<img src='imgs/rail_def.jpg' name='master'>
as the dynamic image in the right column

Then I used the following in the php thumb gallery code:

Code:
<a href="#" onClick="document.master.src='imgs/<?php echo $file;?>';"  class="popimage"> <? echo "<img src='imgs/thumbs/$file' class='popimage'></a>
No function script in the page header (you didn't mention one). Am I wrong in thinking that the function of document.master needs to be defined so that onclick knows to swap the image with the clicked image in the generated code?

The page with your suggestion is here
http://www.arch13.com/galtest4.php

As for the code I've been trying mentioned above,
I finally figured that I can remove
Code:
 if (whichpic.title) {
   document.getElementById('desc')
  .childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc')
  .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
from it to get rid of the code pertaining to titles.

Unfortunatly, I still can't get it to work correctly. It still just loads the clicked image in the browser window instead of swapping it into the table. Could it be becuase the onclick link and placeholder image are seperated by a TD and that is breaking the code?
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever
arch13 is offline  
Old 01-09-2005, 08:22 PM   #7 (permalink)
Crazy
 
Location: here and there
http://www.arch13.com/galtest4.php is broken. looks like you have a php error in there somewhere.

I think it might be a good idea to get the javascript working first then worry about integrating the php afterwards.
__________________
# chmod 111 /bin/Laden
theFez is offline  
Old 01-10-2005, 09:36 PM   #8 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
Quote:
Originally Posted by theFez
http://www.arch13.com/galtest4.php is broken. looks like you have a php error in there somewhere.

I think it might be a good idea to get the javascript working first then worry about integrating the php afterwards.

Good point theFez.

Here's a page I banged out that contains nothing but javascript code in this thread.
http://www.arch13.com/galtest5.php

Still the same problem as before, works for 1sec, then simply loads the image in the browser window instead of swapping the image.

I suspect the problem is with the image link, not the function but could be wrong.
The link is:
Code:
<p><a onclick="return showPic(this)" href="/imgs/thumbs/producefactory.jpg"><img src="/imgs/thumbs/producefactory.jpg"></a></p>
The javascript function in the page header is:
Code:
	<script type="text/javascript" language="JavaScript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
 }
}
</script>
Like before, the image itself to be swapped is coded as:
Code:
<img id="placeholder" src="imgs/rail_def.jpg"/>
Is there a way to call the image using href=# to prevent the browser from linking to the image itslef instead? Or perhaps just a way to modify the code to make the swap work?

Edit:

This doesn't work as it generates errors and doesn'r swap the image, but is the this a direction that would solve the problem?


I've made the first of the three links in http://www.arch13.com/galtest5.php use this link to show what it does.
Code:
<p><a onclick="return showPic(this)='/imgs/thumbs/producefactory.jpg'" href="#"><img src="/imgs/thumbs/producefactory.jpg"></a></p>
Edit2:

Got http://www.arch13.com/galtest4.php workink using your method (found the parse error)
It works great!

I'd still like to see if I can work through this with your help though, as it's a good learning experiance for me.
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever

Last edited by arch13; 01-10-2005 at 10:36 PM.. Reason: more information of course!
arch13 is offline  
Old 01-11-2005, 08:12 PM   #9 (permalink)
Crazy
 
Location: here and there
Honestly, im not seeing the problem with the script. Lots of things look weird to me in it, but I am not a javascript guru and am not entirely sure what is going on.
__________________
# chmod 111 /bin/Laden
theFez is offline  
Old 01-11-2005, 08:18 PM   #10 (permalink)
Loves my girl in thongs
 
arch13's Avatar
 
Location: North of Mexico, South of Canada
Quote:
Originally Posted by theFez
Honestly, im not seeing the problem with the script. Lots of things look weird to me in it, but I am not a javascript guru and am not entirely sure what is going on.
Thanks anyway theFez


If you want to see the working finale, based on your suggestions, it's here:
http://www.arch13.com/index.php?id=gallery&id2=gal

Thank you for all your help.

Next up I'm going to see if I can't get the pae to preload all the images based on what images are called for in the gallery script. I'm going to start of working from the code you suggested here.
__________________
Seen on an employer evaluation:

"The wheel is turning but the hamsters dead"
____________________________
Is arch13 really a porn diety ? find out after the film at 11.
-Nanofever
arch13 is offline  
Old 01-11-2005, 08:35 PM   #11 (permalink)
Crazy
 
Location: here and there
looks good! might be a good idea to scale this one down: http://www.arch13.com/imgs/rail1.jpg so it doesnt jump the page so much.
__________________
# chmod 111 /bin/Laden
theFez is offline  
 

Tags
gallery, java, question

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT -8. The time now is 06:00 PM.

Tilted Forum Project

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0 PL2
© 2002-2012 Tilted Forum Project

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360