[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 988
  • Last Modified:

XAjax and Lightbox 2

Greetings experts,

I am currently working on a site for the futureheads, a band in the uk (http://www.thefutureheads.com) and I wanted to use the lightbox 2 features in the gallery section.  Problem is that when I apply the code it opens in a new window so it doesn't appear that the script is being initialised as Xajax is piping information through to a div.  Does anyone have experience of integrating it and if possible, please could you share some code with me.  I'm at my wits end and have spent days trying different things to no avail.

Thanks.
0
Mark Gilbert
Asked:
Mark Gilbert
1 Solution
 
neesterCommented:
Not sure where on the page you mean.
I cant see the site properly because I dont have flash.
Sorry.
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
Thanks for letting me know neester.  I have replicated the homepage under:

http://www.thefutureheads.com/homeasdf.php 

Near the bottom in the footer div, click the gallery link.  This will run the xajax functions and bring up the gallery.  Currently I have to display the photographs in their own layer as when ever I click on them using the rel="lightbox" it just opens in a new window.  I can paste the function here if you need it.

0
 
neesterCommented:
When I click gallery it does nothing at all...

Just sits there...
Notice how it says its loading from your site.
It never does...
:S

http://img509.imageshack.us/img509/2136/screenshot4xt.jpg
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
neesterCommented:
Sorry - that screenshot got resized - here is the original.

:)

http://img509.imageshack.us/img509/8599/screenshot9lp.jpg
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
Hmm, very strange.  For the purposes of letting you know how the site works, I'm removing the flash menu as it appears it's not layering properly in linux.  Will also have to look at why this is happening for the future.  Can you retry the site.
0
 
neesterCommented:
Yeah that all works fine!

Ajax loads (it loaded behind the white block by the looks of it)
but yeah, works great.

Doesn't open a new window/tab or anything.
0
 
neesterCommented:
BTW this screenshot doesn't show it.
But if I click a photo - they open in a new div too... all works perfect!

http://img367.imageshack.us/img367/1687/screenshot13hp.jpg
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
Hi Neester, thanks for the reply.  I am aware of them currently opening in their own divs as I had to do that to work around the lightbox not working.  They all have a javascript onclick event which runs a function called xajax_gallerypic(id).  However what I did want to happen was to have the <a href="image.jpg" rel="lightbox"><img scr="imagethumb.jpg></a> which unfortunately doesn't work because I am piping in information using ajax.  The way lightbox works is that it reads all the images in the page and then when you click on them it has a nice way of making the background change colour with an alpha transparency and then has the image centred nicely.

For a preview of what I wanted to do:

http://www.huddletogether.com/projects/lightbox2/

I have also updated the preview page above so that it is trying to use the lightbox functions and you can see what happens.  Also, here's a snippet of the code that i'm using to display the images so that you can get an idea of the ajax call:

function galleryread($id)
{
require_once('Connections/futureheads.php');
mysql_select_db($database_futureheads, $futureheads);

$ssql = "SELECT * FROM tblgallery WHERE Category = $id";
$rs = mysql_query($ssql) or die("Sql error: " . mysql_error());

if($id == "1") { $pic = "bandphotos.gif"; }
  elseif($id == "2") { $pic = "fanphotos.gif"; }
  elseif($id == "3") { $pic = "pressshots.gif";
 }
while($myrow = mysql_fetch_array($rs))
{
      $myID[] = $myrow['ID'];
    $myThumb[] = $myrow['thumb'];
      $myImage[] = $myrow['image'];
    $myName[]  = $myrow['Title'];
}


    $objResponse = new xajaxResponse();
      $newContent = '
      <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
      <table width="100%" height="100%" border="0" cellpadding="13" cellspacing="0" class="galleryreadHoverOff" id="layer1">
  <tr>
    <td align="left" valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="top"><img src="images/headers/'.$pic.'" /></td>
        <td align="right" valign="top"><a href="javascript:void(0)" onclick="xajax_galleryreadClear();"><img src="images/buttons/close.gif" border="0" /></a></td>
      </tr>
     
      <tr>
        <td colspan="2" valign="top"><table width="100%"  border="0" cellpadding="0" cellspacing="4" class="homecontent">';
if(mysql_num_rows($rs) <> 0 ){
$i = 0;
while($i < mysql_num_rows($rs))
{
$newContent .= '<tr>';
     for($j = 0; $j < 3; $j++)
     {
          $newVal = $i + $j;
$newContent .= '<td align="left" valign="top" height="80" >';

if($newVal <  mysql_num_rows($rs)){
$newContent .='<table border="0" cellpadding="0" cellspacing="0" >
                            <tr><td>';
             $newContent .='<a href="'.$myImage[$newVal].'" rel="lightbox"><img src="'.$myThumb[$newVal].'" border="0" /></a>';
//             $newContent .='<a href="javascript:void(0)" onClick="xajax_galleryreadpic('.$myID[$newVal].');dd.elements.gallerypic.resizeTo(100,70);dd.elements.gallerypic.maximizeZ();"><img src="'.$myThumb[$newVal].'" border="0" /></a>';
             $newContent .='</td><td width="25"><img src="images/transparentpixel.gif" width="25" /></td></tr><tr height="25"><img src="images/transparentpixel.gif" width="25" /></tr></table>';
             }
             $newContent .='</td> ';
             
              }
             
              $newContent .='</tr>';
              $i = $i + 3;
}

} else{ $newContent .= '<table><tr height="25"><td>&nbsp;</td></tr><tr><td class="gallery">Coming Soon</td></tr></table>';}
mysql_free_result($rs);

$newContent .='</table></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
';
                           
    // add a command to the response to assign the innerHTML attribute of
    // the element with id="SomeElementId" to whatever the new content is
    $objResponse->addAssign("galleryread","innerHTML", $newContent);
      
   
    //return the XML response generated by the xajaxResponse object
    return $objResponse->getXML();
}

Hope this helps and I really do appreciate your help.
0
 
aminerdCommented:
You'll probably want to call initLightbox() after loading the gallery page.
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
Hi  aminerd, thanks for the idea.  I did put this in, see code below, but it still doesn't do what it should do.  I've ensured all my css styles have been uniquely named, but for some reason it's still not coming through.  I've spent an absolute age on this problem and it just doesn't seem to be possible.  I can't understand what's going wrong but I am certainly hoping I can come up with the solution, and a great resource for other developers in the same situation.

Thanks all for any help you can provide.
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
Modified end of script:

    // add a command to the response to assign the innerHTML attribute of
    // the element with id="SomeElementId" to whatever the new content is
    $objResponse->addAssign("galleryread","innerHTML", $newContent);
      
   
    //return the XML response generated by the xajaxResponse object
    return $objResponse->getXML();
}?>
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
I have found the answer.  Just after addAssign call, one has to call the javascript function like this:

      $objResponse->addScript("initLightbox();");

So what happens is that it actually adds and runs the javascript at the time the html gets populated.
0
 
Mark GilbertSenior Performance EngineerAuthor Commented:
I am putting a request into Community Support to PAQ and refund this question as I was able to resolve the situation.
0
 
GhostModCommented:
Closed, 500 points refunded.

GhostMod
Community Support Moderator
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now