?
Solved

Jquery Lightbox and Ajax paging

Posted on 2009-07-09
11
Medium Priority
?
1,342 Views
Last Modified: 2012-05-07
I have a gallery page on my site, it basically has 12 images shown on the page and then paging at the bottom to get to page 2,3, etc of the gallery. This is done using AJAX.

When an image in the gallery is clicked, then a lightbox should appear with a larger version of the image. This is only working sporadically for some reason. I know the lightbox script is working as it's used throughout the site, example being on this page, last word in paragraph works.

I've attached my code below, the site is http://bigcoffee.arrivaldesign.co.uk/gallery/

Many thanks

Chris
paging.php
 
<?php virtual('/Connections/bigcoffee.php'); ?>
<?php
$currentPage = $_SERVER["PHP_SELF"];
 
$maxRows_rsprojects = 12;
$page = 0;
if (isset($_GET['page'])) {
  $page = $_GET['page'];
}
$startRow_rsprojects = $page * $maxRows_rsprojects;
 
mysql_select_db($database_bigcoffee, $bigcoffee);
$query_rsprojects = "SELECT * FROM coffee_gallery ORDER BY id DESC";
$query_limit_rsprojects = sprintf("%s LIMIT %d, %d", $query_rsprojects, $startRow_rsprojects, $maxRows_rsprojects);
$rsprojects = mysql_query($query_limit_rsprojects, $bigcoffee) or die(mysql_error());
$row_rsprojects = mysql_fetch_assoc($rsprojects);
 
if (isset($_GET['totalRows_rsprojects'])) {
  $totalRows_rsprojects = $_GET['totalRows_rsprojects'];
} else {
  $all_rsprojects = mysql_query($query_rsprojects);
  $totalRows_rsprojects = mysql_num_rows($all_rsprojects);
}
$totalPages_rsprojects = ceil($totalRows_rsprojects/$maxRows_rsprojects)-1;
?>
<?php do { ?>
  <a href="/gallery/<?php echo $row_rsprojects['image']; ?>" title="<?php echo $row_rsprojects['name']; ?>" rel="lightbox"><img src="/gallery/thumb_<?php echo $row_rsprojects['image']; ?>" width="139" height="114" /></a>
<?php } while ($row_rsprojects = mysql_fetch_assoc($rsprojects)); ?>
<?php
mysql_free_result($rsprojects);
?>

Open in new window

0
Comment
Question by:djfenom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
11 Comments
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24813056
When you say it's working sporadically, what happens when it doesn't work? When I click on any of the images, it just takes me to the image itself in the browser. I didn't get a same-page popup on any of the images that I clicked on.
0
 

Author Comment

by:djfenom
ID: 24813136
That's exactly what happens, it just opens the image as though javascript is turned off. Other times it will actually open the lightbox, but not very often, it's hard to pinpoint when this actually happens.
0
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24813520
Try modifying the lightbox.js file. At the end of that file, there is:

$(function() {
$('a[@rel*=lightbox]').lightBox();
});

Change it to:
$(document).ready(function(){
   $('a[@rel*=lightbox]').lightBox();
}
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24813585
By the way, the reason that works (or probably will work), is because Javascript will try to execute as soon as it can. Often times, it's before the rest of the page has loaded. This line:

$('a[@rel*=lightbox]').lightBox();

Tries to "activate" all the links that have rel="lightbox". But if that line runs before all the links have been "built" (meaning they're still traveling from the server to your computer), then it won't activate what it doesn't know is there. When it occasionally works, it's probably because the document got to your PC fast enough (or your browser cached it), so it could load fast enough that by the time the Javascript ran, all the links were in place.

Using $(document).ready(function(){ .... } tells the browser to hold off on executing something (the .... part)  until everything on the page has finished loading up.
0
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24813616
Also, you may have to modify your paging function - I think it's called jah()  - so that when you change pages, it re-runs:

$('a[@rel*=lightbox]').lightBox();

after the AJAX call finishes and the HTML has been loaded. Otherwise, the newly-loaded links won't be activated with the lightbox.
0
 

Author Comment

by:djfenom
ID: 24813721
I've amended that to:

$(document).ready(function(){
   $('a[@rel*=lightbox]').lightBox();
})

But it still does the same?
0
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24814417
I'm getting a 404 when I try to go to the URL now.

It also could be that the paging call is running on document.ready and is overwrite the activated links, so make sure the jah() function is also updated.
0
 

Author Comment

by:djfenom
ID: 24815105
Sorry, I've moved the page now - http://thebigcoffee.co.uk/gallery/

Not really sure where that needs to go in the jah function, that was something I got from another site, any ideas?
0
 
LVL 35

Expert Comment

by:gr8gonzo
ID: 24815219
Hmmm, the calls to the jah() function are spread out a bit. Try this:

Edit the file called jah.js file (it should be in a folder called js).

Change this line:
function jah(url,target) {


To:
function jah(url,target) {
   _jah(url,target);
   $('a[@rel*=lightbox]').lightBox();
}
function _jah(url,target) {


Basically, we're renaming jah() to _jah() so we preserve the original function code. Then we're creating a new jah() function in its place that just runs the original function, but then after the original function runs, it will run the line of code that activates the It's basically writing a "wrapper" function that runs the original code and then afterwards runs the lightbox activation code.
0
 
LVL 35

Accepted Solution

by:
gr8gonzo earned 2000 total points
ID: 24815241
Just for the record, there are different ways of doing this, too. You could have also added the lightbox activation line of code after the line in jahDone(), which is also in jah.js, that updates the innerHTML of the target with the variable called results:

FROM:
document.getElementById(target).innerHTML = results;

TO:
document.getElementById(target).innerHTML = results;
$('a[@rel*=lightbox]').lightBox();

You don't have to do both suggestions - it's just one or the other.
0
 

Author Comment

by:djfenom
ID: 24821613
Thanks gr8gonzo, the first method didn't work, but the second one seems to work fine.

Many thanks

Chris
0

Featured Post

Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

752 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