Tilted Forum Project Discussion Community

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - [Java] gallery question (https://thetfp.com/tfp/tilted-technology/80397-java-gallery-question.html)

[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.

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'>

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.

Quote:

Originally Posted by theFez

Code:

<img src='imgs/rail_def.jpg'>

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)

» is not a string concatenation operator. yank that from your javascript code and it should work.

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>

Quote:

Originally Posted by theFez

Code:

<img src='imgs/rail_def.jpg'>

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?

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.

Quote:

Originally Posted by theFez

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.

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.

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
:thumbsup:

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. :crazy:

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.