Riu 2009 0 Junior Poster

hello everyone, hope u ppl r fine :)

well i am a beginner in php and my sql.. but i have no idea of javascript, i just wanted to use topup lightbox for my project.. i want to display the course material and the material is all media files like images,pdf, ppt,audios and videos..i have stored these media files (locally uploaded) and stored urls of media files from youtube,vimeo,picassa,flicke, slideshare in DB as well
this is my script and i've loaded all files as mentioned in the documentation and setup my it just pops up a gray window without any image of other media files.. please check my code and help me solving the problem :(
thanx in advnce :)

start-course.php

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
        TopUp.host = "http://localhost/project/";
        TopUp.images_path = "../teacher/graphics/learningmaterial/";
    </script>
    <script type="text/javascript">
        TopUp.host = "http://localhost/project/";
        TopUp.players_path = "../players/";
        </script>
<script type="text/javascript" src="../javascript/top_up.js"></script>
<script type="text/javascript" src="../javascript/top_up.js?libs=core+clip"></script>
<script type="text/javascript" src="../javascript/top_up.js?images_path=/foo"></script>
<?php include("../includes/pre-header.php");?>
<title>My Courses</title>
</head>
<body>
<div class="container">
<?php include("../includes/header.php"); ?>
<?php include("includes/nav.php"); ?>
<div id="maincontent">
<div class="span-24 last">
    <div id="breadcrumbs" class="mycss">
        <a href="index.php">Home</a> >
        <a href="my-courses.php">My Courses</a> >
        <a href="start-course.php"><?php echo $title; ?></a> >
        Start Course

    </div>
    </div>
<?php include("includes/offered-courses-aside.php"); ?>
<br /> <br />
 <div class="span-18 last">
<h2 class="alt"><?php echo $title ?></h2>


<?php
   $con=mysql_connect($dbserver,$dbusername,$dbpassword);
if (!$con)
    {
   die('Could not connect: ' . mysql_error());
    }
mysql_select_db($dbname, $con);
$result = mysql_query("SELECT * FROM learningmaterial WHERE (coursesid=".$cid.") ORDER BY sequence ASC");


echo "<table border='1' style='width:500px;'> <br />";

while($row = mysql_fetch_array($result))
  {
    echo "<tr>";
    echo " <h5>" . $row['title'] . "</h5>";


        if ($row['type'] === 'youtube video')
            {
                echo "<img src='graphics/youtube-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'vimeo video')
            {
                echo "<img src='graphics/vimeo-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'youtube audio')
            {
                 echo "<img src='graphics/youtube-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'Flickr')
            {
                echo "<img src='graphics/flickr-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'Picasa')
            {
                echo "<img src='graphics/picassa-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'video')
            {
                echo "<img src='graphics/local-icon.png'/> <br />";
            }
        elseif ($row['type'] === 'audio')
            {
                echo "<img src='graphics/local.png'/> <br />";
            }
        elseif ($row['type'] === 'image')
            {
                echo "<img src='graphics/local.png'/> <br />";
            }
        elseif ($row['type'] === 'ppt')
            {
                echo "<img src='graphics/local.png'/> <br />";
            }
        elseif ($row['type'] === 'pdf')
            {
                echo "<img src='graphics/local.png'/> <br />";
            }
        else
            {
                echo "&nbsp;";
            }
            "<br />";
      echo " <p class='des'>" . $row['description'] . "</p> <br />"; 


      if ($row['source']==='E')
            {
            echo "<a href='".$row['url']."' class='top_up' toptions='shaded = 1, overlayClose = 1 layout = quicklook,  width = 1010, height = 600, type = auto, effect = fade'>CLICK TO VIEW!</a>";
            }
      elseif ($row['source']==='I' && $row['type']=='image') 
       {
        echo "<a href='".$row['internalpath']."' class='top_up' toptions='shaded = 1, overlayClose = 1 layout = quicklook,  width = 1010, height = 600, type = image,effect = fade'>CLICK TO VIEW!</a>";
        echo "<img src='../teacher/".$row['internalpath']."'/>";
      }
      else{
        echo "Nothing";
      }


      }   
echo "</table>";
mysql_close($con);
?>

Dani AI

Generated

— the gray overlay almost always means the lightbox UI loaded but the library could not find or render the content. The post shows the right idea, but a few targeted checks will usually find the culprit quickly.

First, use the browser developer tools. Check the JavaScript console for errors and the Network tab for 404s or blocked resources (CSS, JS, player files, images). Inspect the DOM when the overlay appears: if the content container is present but empty, the problem is the content URL or the library failing to instantiate; if the container never appears, a script or CSS file is missing or broken.

Next, isolate common causes:

  • Only include the lightbox script and its CSS once. Multiple includes or conflicting query-strings can break initialization.
  • Verify any base/host and assets paths are correct and resolve from the page (relative paths can be wrong depending on include locations). Use absolute URLs while debugging.
  • Ensure the anchors actually point at accessible media (open the href directly in a tab). For third-party services, the library may need an embed URL rather than the regular page URL.
  • Make sure option strings you emit from PHP are correctly quoted/escaped so the HTML attribute parser receives valid values.

If the overlay is empty for audio/video, confirm required player files are in place and reachable. If thumbnails show but the popup content does not, the library is probably missing a required module or returning an error — the console will show that.

Quick test: build a minimal static page with a single anchor linking to a single image and the lightbox assets. If that works, progressively reintroduce your PHP output until it breaks — that isolates the bad output. Collect console errors and failing network entries; those details will point to the exact fix.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.