Solved

Javascript php image gallery

Posted on 2008-11-02
15
961 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now