Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Javascript php image gallery

Posted on 2008-11-02
15
Medium Priority
?
972 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 12

Assisted Solution

by:ShaneJones
ShaneJones earned 400 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 400 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

772 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