asked on

Javascript php image gallery

Dear Experts,
I would lke to build a "simple" as I thought javascript gallery for a website.
I am attaching an image that shows how the gallery would like like
http://img523.imageshack.us/my.php?image=samplege0.jpg

So as you see we have thumbnails both on the bottom of the page as well as on the left of the page. The user clicks on any of the two thumbnail regions and the image loads on the big image placeholder. Just image on the sample that the images on both thumbnails are for the same gallery. The next and previous button on the top of the left region thumbnail are moving the big image placeholder to the next image on the array. The arrows on the bottom of the left (where it says 19 photos) are to move to the next page of the thumbnails on that region.
The Next and previous buttons on the bottom thumbnail region move to the next big image.
The images are stored in a database with the path, and they have caption texts connected with them.
One last requirement is that on the previous page the user can select out of a random 5 pictures in which if they click on one of them this image gallery preloads and displays the picture directly. So I need to have some kind of and argument passing between the previus page and the gallery that will say to the script which image to preload. If not, then the first picture of the gallery will be shown.
I hope this is clear enough. Thank you for your time and any help will be appreciatted.

v2Media

So do I correctly interpret your question as "Here's a mock-up of my idea for a website gallery. Can you code it up for me and I'll give you 500 points?"

http://www.google.com/search?q=javascript+gallery

atsalis

ASKER

No you did not correclty interpret my question....My question is "If you are plase kind enough can you help me code the thing up because i am running out of ways of actually doing that thing?"
Searching Google is the first resource I am going through before I post something on Experts Exchange, I have gone through almost all the javascript galleries I could find on google and none is doing what I am supossed to do.
Add to that that my javascript knowledge is limited because I moslty work on php.
So, thank you for taking the time to read my post but that will not do the trick.
I am thinking that the first step in what I am supossed to do is to actually pass the variable I discribed above and preload the necessary image. Then I need to do the image swapping between the thumbnails and the main image.
Thanks

v2Media

I would be glad to help, but not until you have some code to show. There's a line between using points for rewarding experts for helping you out and using points in lieu of subcontracting developers. Do you have any html/php/css/js code to show?

SOLUTION

ShaneJones

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

atsalis

ASKER

@ShaneJones:Hi there and thanks for your input. Unfortunatelly this is what I am asking. I want something less complex than this....but either way, thanks a lot for your time.

@v2Media: Since you want some coding here is what I have done trying to achieve what I am after. You will agree that I am very far off the solution of this problem. I think it is pretty straightforward what I have done, but again I am guessing that I need an aray to go on with what I want. Anyway, if you can help please do so...

<?php 
require_once('Connections/jobs.php'); 
?>
<?php
$profile_Id = $_REQUEST['prof_id'];
mysql_select_db($database_jobs, $jobs);
$query_profile = "SELECT * FROM profile_images WHERE profile_id=1";
$profile = mysql_query($query_profile, $jobs) or die(mysql_error());
$row_profile = mysql_fetch_assoc($profile);
$totalRows_profile = mysql_num_rows($profile);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
</style>
<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;
 }
}
//jump to top of page
document.location.hash = "top";
</script>
</head>
 
<body>
<div align="center">
<div id="image_placeholder">
<?php if (!isset($image)) {?>
<img src="<?php echo $row_profile['image']; ?>" alt="" name="placeholder" align="middle" id="placeholder" />
<p id="desc"><?php echo $row_profile['caption']; ?></p>
<?php } else { ?>
<img id="placeholder" src="<?php echo $image ?>" alt="" align="middle" />
<p id="desc"><?php echo $row_profile['caption'] ?></p>
</div>
<?php } ?>
 <br />
    <?php do { ?>
        <a onclick="return showPic(this)" href="<?php echo $row_profile['image'] ?>" title="<?php echo $row_profile['caption'] ?>"><img src="<?php echo $row_profile['thumb'] ?>"  alt="" /></a>
     <?php } while ($row_profile = mysql_fetch_assoc($profile)); ?>
</div>
</body>
</html>

Open in new window

v2Media

Seeing as though you're after a javascript solution, could you post the outputted html of the page as well?

atsalis

ASKER

Yep here it is ....It doesnt actually have to be a javascript solution...if it can be a php solution I would go for it, I just dont know what the idea of it would be.
I think I have like 30 images on the database...the bad thing is that when I have 30 images and I go to the bottom of the page then the big image changes and the user cannot see the change of the image...he/she has to actually scroll to the top of the page.
The code
//jump to top of page
document.location.hash = "top";
is to make the page when the thumbnail is clicked to jump to the top of the page....however of course this doesnt work as well...
This script that I gave you is working but is by far away from what I want the final result to be....
Thank yOU


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
</style>
<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;
 }
}
//jump to top of page
document.location.hash = "top";
</script>
</head>
 
<body>
<div align="center">
 
<div id="image_placeholder">
<img src="users/garga01/img/48c7ced003d0a.jpg" alt="" name="placeholder" align="middle" id="placeholder" />
<p id="desc">Some Caption</p>
 <br />
            <a onclick="return showPic(this)" href="users/garga01/img/48c7ced003d0a.jpg" title="Some Caption"><img src="users/garga01/th/48c7ced003d0a.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7ced390f59.jpg" title=""><img src="users/garga01/th/48c7ced390f59.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7ced6632ec.jpg" title=""><img src="users/garga01/th/48c7ced6632ec.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7ced9dd40c.jpg" title=""><img src="users/garga01/th/48c7ced9dd40c.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7ceddbebc4.jpg" title=""><img src="users/garga01/th/48c7ceddbebc4.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7cee08583d.jpg" title=""><img src="users/garga01/th/48c7cee08583d.jpg"  alt="" /></a>
 
             <a onclick="return showPic(this)" href="users/garga01/img/48c7cee703d0b.jpg" title=""><img src="users/garga01/th/48c7cee703d0b.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7ceec3d092.jpg" title=""><img src="users/garga01/th/48c7ceec3d092.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7cef140d9b.jpg" title=""><img src="users/garga01/th/48c7cef140d9b.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/48c7cef5487ad.jpg" title=""><img src="users/garga01/th/48c7cef5487ad.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e45ac65d6.jpg" title=""><img src="users/garga01/th/4902e45ac65d6.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e45e9c673.jpg" title=""><img src="users/garga01/th/4902e45e9c673.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e4a3b34a9.jpg" title=""><img src="users/garga01/th/4902e4a3b34a9.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e55aaf7a0.jpg" title=""><img src="users/garga01/th/4902e55aaf7a0.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e561d9703.jpg" title=""><img src="users/garga01/th/4902e561d9703.jpg"  alt="" /></a>
 
             <a onclick="return showPic(this)" href="users/garga01/img/4902e56e7a122.jpg" title=""><img src="users/garga01/th/4902e56e7a122.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5829c674.jpg" title=""><img src="users/garga01/th/4902e5829c674.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e59a94c61.jpg" title=""><img src="users/garga01/th/4902e59a94c61.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e59caf7a0.jpg" title=""><img src="users/garga01/th/4902e59caf7a0.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5c344aa4.jpg" title=""><img src="users/garga01/th/4902e5c344aa4.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5e1d1cf1.jpg" title=""><img src="users/garga01/th/4902e5e1d1cf1.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5e57641a.jpg" title=""><img src="users/garga01/th/4902e5e57641a.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5e96acff.jpg" title=""><img src="users/garga01/th/4902e5e96acff.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5ed16e38.jpg" title=""><img src="users/garga01/th/4902e5ed16e38.jpg"  alt="" /></a>
 
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5f16acfe.jpg" title=""><img src="users/garga01/th/4902e5f16acfe.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5f5f053a.jpg" title=""><img src="users/garga01/th/4902e5f5f053a.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e5fa0f426.jpg" title=""><img src="users/garga01/th/4902e5fa0f426.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e60057bd1.jpg" title=""><img src="users/garga01/th/4902e60057bd1.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e6066ea07.jpg" title=""><img src="users/garga01/th/4902e6066ea07.jpg"  alt="" /></a>
             <a onclick="return showPic(this)" href="users/garga01/img/4902e61135680.jpg" title=""><img src="users/garga01/th/4902e61135680.jpg"  alt="" /></a>
     </div>
</body>
</html>

Open in new window

atsalis

ASKER

---The code
---//jump to top of page
---document.location.hash = "top";
--is to make the page when the thumbnail is clicked to jump to the top of the page....however of course this --doesnt work as well...

I just fixed that in the following way

<?php 
require_once('Connections/jobs.php'); 
require_once ('lib/getfolders.php');
?>
<?php
$profile_Id = $_REQUEST['prof_id'];
mysql_select_db($database_jobs, $jobs);
$query_profile = "SELECT * FROM profile_images WHERE profile_id=1";
$profile = mysql_query($query_profile, $jobs) or die(mysql_error());
$row_profile = mysql_fetch_assoc($profile);
$totalRows_profile = mysql_num_rows($profile);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
</style>
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
document.location.hash = "top";
 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>
<div align="center">
<a name="top" id="top"></a>
<div id="image_placeholder">
<?php if (!isset($image)) {?>
<img src="<?php echo $row_profile['image']; ?>" alt="" name="placeholder" align="middle" id="placeholder" />
<p id="desc"><?php echo $row_profile['caption']; ?></p>
<?php } else { ?>
<img id="placeholder" src="<?php echo $image ?>" alt="" align="middle" />
<p id="desc"><?php echo $row_profile['caption'] ?></p>
</div>
<?php } ?>
 <br />
    <?php do { ?>
        <a onclick="return showPic(this)" href="<?php echo $row_profile['image'] ?>" title="<?php echo $row_profile['caption'] ?>"><img src="<?php echo $row_profile['thumb'] ?>"  alt="" /></a>
     <?php } while ($row_profile = mysql_fetch_assoc($profile)); ?>
</body>
</html>

Open in new window

SOLUTION

v2Media

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

atsalis

ASKER

Yes, hi and thanks for the comment...however I do not want to use pop up windows I just want to achieve the result I described above and I have on the picture. I know about the lightbox effect as well as the numerous scripts that are out there however none suits me because I need when someone prints the page to print both the thumbnails and the active image...
Thank you

v2Media

It's not a pop-up window. The detail image is styled as a layer over the top of the existing page. If JS is disabled, it gracefully degrades to a link to the actual image file.

As for the printing issue, you can link a print.css file in the header to change the way the webpage prints.

atsalis

ASKER

Hmmm....havent thought about this...and it is a very good idea actually...can you help me then with something else?...
Ok then I will try do that with highslide gallery, if I leave the question open will you help me with the printing css of that script?
Thank you

v2Media

If you can post a link to the working webpage, yes. Else it's too much work to recreate a dummy copu of the page on a local server...

atsalis

ASKER

ok as soon as I am ready to do so I will let you know thank you very much...unfortunatelly somehting else imaportand has to be fixed these days so I have to pull this back a bit...thank you very much though...

ASKER CERTIFIED SOLUTION

atsalis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial