Solved

Javascript php image gallery

Posted on 2008-11-02
15
966 Views
Last Modified: 2013-12-13
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.
 
0
Comment
Question by:atsalis
  • 8
  • 6
15 Comments
 
LVL 19

Expert Comment

by:v2Media
ID: 22865322
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

0
 

Author Comment

by:atsalis
ID: 22865360
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
0
 
LVL 19

Expert Comment

by:v2Media
ID: 22865640
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?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Assisted Solution

by:ShaneJones
ShaneJones earned 100 total points
ID: 22865723
I asked a similar question here

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23853757.html

Check out jAlbum.
or JDGallery
http://smoothgallery.jondesign.net/showcase/gallery/

very swish and easily customizable. The code is easy too, I understood it and am not an JS expert at all!

Shane
0
 

Author Comment

by:atsalis
ID: 22867745
@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

0
 
LVL 19

Expert Comment

by:v2Media
ID: 22874485
Seeing as though you're after a javascript solution, could you post the outputted html of the page as well?
0
 

Author Comment

by:atsalis
ID: 22874696
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

0
 

Author Comment

by:atsalis
ID: 22874842
---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

0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 100 total points
ID: 22874915
OK - going by the look of what you're trying to achieve, with the problem of using thumbs for navigation, I recon you should try dispensing with the large image area all together and just show a gallery of thumbnails. The thumbnails become links to corresponding detail images and you can use Lightbox 2.0 Javascript solution for generating an overlaying the detail image once the user clicks a thumb.

(Lightbox  Download: http://www.huddletogether.com/projects/lightbox2/ ).

The download has pretty good instructions for usage. If you group all the thumbnails for lightbox, it will display prev, next buttons. Grouping is also explained in the instructions.

By using lightbox, all you're responsible for is generating the pages of thumbnails using straight php and ensuring that the a tags' rel attributes are populated with the paths to detail images.
0
 

Author Comment

by:atsalis
ID: 22875139
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
0
 
LVL 19

Expert Comment

by:v2Media
ID: 22875225
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.
0
 

Author Comment

by:atsalis
ID: 22883633
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
0
 
LVL 19

Expert Comment

by:v2Media
ID: 22883690
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...
0
 

Author Comment

by:atsalis
ID: 22888552
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...
0
 

Accepted Solution

by:
atsalis earned 0 total points
ID: 22915285
Finally with a little manipulation of the Highslide galleryhttp://highslide.com/ I managed to solve my problem and get my desired rusult
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question