squemish

Author Topic: JQuery Gallery working with PHP  (Read 5332 times)

CoopStew

  • Guest
JQuery Gallery working with PHP
« on: March 16, 2014, 10:27:51 am »
I am trying to get a simple lightbox gallery to work with a PHP and MySQL database.  I have the gallery working with standard HTML, so I know there isn't anything wrong there. I followed a tutorial: http://code.tutsplus.com/articles/create-a-photo-admin-site-using-php-and-jquery--net-1530 but when I test the page it does away with just about everything on the page except for the header and navigation: http://wldesigns.net/hpd/hpdmstewart_gallery.php
My professor and classmates have combed over the coding with me, and we cannot find the culprit as to why it is not working.  Any help would be greatly appreciated!  I've attached the zip file with the two different gallery pages and all of the other files necessary to view the page properly. hpdrstewart_gallery.php is the one I currently set up with HTML, hpdmstewart_gallery.php is the one attempting to draw from the database. I've also included the database dump and the .ste file if that will help anyone with assisting me to figure this out.
Thanks so much!

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: JQuery Gallery working with PHP
« Reply #1 on: March 17, 2014, 02:42:08 pm »
If you use Firebug or the Google Chrome Developer tools you can see that an error is being returned by the gallery page.

"NetworkError: 500 Internal Server Error - http://wldesigns.net/hpd/hpdmstewart_gallery.php"

Unfortunately we cannot see what the error is. But it looks like it is coming from the getPhotos.php file.

I do see a minor problem in getPhotos.php.

$query = "SELECT Title, Image_Description, Artist_ID, src, FROM Description";

You need to remove the comma after src:

$query = "SELECT Title, Image_Description, Artist_ID, src FROM Description";




Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

CoopStew

  • Guest
Re: JQuery Gallery working with PHP
« Reply #2 on: March 23, 2014, 04:53:18 pm »
Hi Erik,
Thanks for getting back to me! 

That must have been a temporary server error - because I don't see that error anywhere.  For sake of getting the final completed on time I actually went ahead and constructed the galleries using HTML and JQuery only.  I haven't given up yet though and am still trying to get a test gallery page to pull info off of the database.
You will find the test gallery at: http://wldesigns.net/hpd/hpdtest_gallery.php

I did fix that comma error you caught in the original getPhotos.php file.
The actual galleries on the site are set up and working the way I want the test gallery to work - one of them is partially included in the attached zip file.
I know I am getting ahead of myself - but if I want to set up a different gallery for each photographer - will I need a different table in the database with separate files of the getPhotos.php file for each?

I would love to get this working before I need to turn in the final - that way I can at least have some of my original ideas for this project come to fruition!  I've included a new zip file with only the three galleries included - just to keep it simple.

Thanks so much!

CoopStew

  • Guest
Re: JQuery Gallery working with PHP
« Reply #3 on: March 29, 2014, 02:02:21 am »
My apologies that file was accidentally deleted from the server for a few days.  It is reloaded now and the link works.  Any help that can be offered would be greatly appreciated.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: JQuery Gallery working with PHP
« Reply #4 on: March 31, 2014, 12:03:52 pm »
If you want to setup a different page for each photographer you will probably need to add a new column to your table that identifies who the photographer is. Actually I guess your Artist_ID field is doing that already?

In that case you would setup each page and just modify your SELECT statement to pick the artist.

$query = "SELECT Title, Image_Description, Artist_ID, src FROM Description WHERE Artist_ID = 1";

That query would only return records where the Artist_ID was 1. You could do the same on your other pages but change the Artist_ID value. So in page 2 the query might look like this:

$query = "SELECT Title, Image_Description, Artist_ID, src FROM Description WHERE Artist_ID = 2";

Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

CoopStew

  • Guest
Re: JQuery Gallery working with PHP
« Reply #5 on: April 02, 2014, 06:54:03 am »
Thanks Eric,
I have made that modification for the separate galleries, but the gallery itself is still not working, all I get is the top banner, navigation, and the first header.  I can't figure out why it the gallery won't even show.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: JQuery Gallery working with PHP
« Reply #6 on: April 02, 2014, 07:52:33 am »
Try replacing what you have in getPhotos.php with the following:

<?php
 
require 'dbconnection.php';
 
$query = "SELECT Title, Image_Description, Artist_ID, src, thumb FROM Description WHERE Artist_ID = 1";
 
mysqli_select_db($conn, $dbname);
$query = "SELECT Title, Image_Description, Artist_ID, src, thumb FROM Description WHERE Artist_ID = 1";
$results = mysqli_query($conn, $query) or die(mysqli_error());

  echo"<div id='gallery' class='content'>'> \n";
  echo"<div id='controls' class='controls'></div> \n";
  echo"<div class='slideshow-container'> \n";
  echo"<div id='loading' class='loader'></div> \n";
  echo"<div id='slideshow' class='slideshow'></div> \n";
  echo"</div><!--End slideshow-container--> \n";
  echo"<div id='caption' class='caption-container'></div> \n";
  echo"</div><!--End gallery--> \n";
  echo"<div id='thumbs' class='navigation'> \n";
  echo"<ul class='thumbs noscript'>  \n";

  while($r = mysqli_fetch_assoc($results)) {
     
    $Title = $r->Title;
    $src = $r->src;
   $thumb = $r->thumb;
    $Description = $r->Image_Description;
   $Artist_ID = $r->Artist_ID;   
       
   echo"<li><a class='thumb' href='images/m_stew_gall/gallery/$src' title='$Title'><img src='images/m_stew_gall/thumbs/$thumb' alt='$Title' /></a>  \n";
   echo"<div class='caption'>  \n";
   echo"<div class='image-title'>$Title</div>  \n";
   echo"<div class='image-desc'>$Description</div>  \n";
   echo"</div> </li> \n \n ";
    }
  echo"\n</ul><!--End thumbs noscript-->";
  echo"\n</div><!--End thumbs-->";

?>
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

CoopStew

  • Guest
Re: JQuery Gallery working with PHP
« Reply #7 on: April 04, 2014, 08:13:43 am »
That's definitely a step in the right direction Thanks!!  I now have a full page with body and footer included - but none of the three pictures I have in the database are showing in the gallery.  http://wldesigns.net/hpd/hpdtest_gallery.php as you can see it has some of the navigation for the gallery, but none of the thumbnails or images.  I made a whole new getPhotos file - just so I can see what changes were made, and they make sense to me surprisingly... for the most part. I just can't figure out why the gallery won't pull images now!

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: JQuery Gallery working with PHP
« Reply #8 on: April 06, 2014, 05:57:54 am »
Ok, try this one:

<?php
 
require 'dbconnection.php';
 
$query = "SELECT Title, Image_Description, Artist_ID, src, thumb FROM Description WHERE Artist_ID = 1";
 
mysqli_select_db($conn, $dbname);
$query = "SELECT Title, Image_Description, Artist_ID, src, thumb FROM Description WHERE Artist_ID = 1";
$results = mysqli_query($conn, $query) or die(mysqli_error());
$row_Results = mysqli_fetch_assoc($results);
  echo"<div id='gallery' class='content'> \n";
  echo"<div id='controls' class='controls'></div> \n";
  echo"<div class='slideshow-container'> \n";
  echo"<div id='loading' class='loader'></div> \n";
  echo"<div id='slideshow' class='slideshow'></div> \n";
  echo"</div><!--End slideshow-container--> \n";
  echo"<div id='caption' class='caption-container'></div> \n";
  echo"</div><!--End gallery--> \n";
  echo"<div id='thumbs' class='navigation'> \n";
  echo"<ul class='thumbs noscript'>  \n";

do {
   echo"<li><a class='thumb' href='images/m_stew_gall/gallery/{$row_Results['src']}' title='{$row_Results['Title']}'><img src='images/m_stew_gall/thumbs/{$row_Results['thumb']}' alt='$Title' /></a>  \n";
   echo"<div class='caption'>  \n";
   echo"<div class='image-title'>{$row_Results['Title']}</div>  \n";
   echo"<div class='image-desc'>{$row_Results['Description']}</div>  \n";
   echo"</div> </li> \n \n ";
  } while ($row_Results = mysqli_fetch_assoc($results));
 
  echo"\n</ul><!--End thumbs noscript-->";
  echo"\n</div><!--End thumbs-->";

?>
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

CoopStew

  • Guest
Re: JQuery Gallery working with PHP
« Reply #9 on: April 06, 2014, 07:50:35 pm »
Thank you, thank you, thank you Eric!! You're the best!!

That worked like a charm!!  Now I can get to work loading my database with everything and converting it all over to a system that is much easier to manage!

Oh yea, did I mention how grateful I am for all of your help?? ;D  Thanks again!!

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: JQuery Gallery working with PHP
« Reply #10 on: April 07, 2014, 07:24:21 am »
You are welcome. I'm glad that worked!
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu