Lightbox not loading after ajax contents are loaded

[koolkedar]

hi i posted this yday but moderator told me to start the new thread so i am starting. So mr moderator can you please let me know the different lightbox version and which will be better for me. Another thing is i m describing the problem but i am not specially interested only in lightbox i tried slimbox2 its also not working and the most simple swap the images also didnt work. The problem is as below. Another thing is i apologize if i started the thread in wrong category. Moderator if u provide me the answer even for swapping problem i will be happy. Problem for slimbox2, lightbox and swap is same.


my web site is not ready so i m not in a position to upload it anywhere so i apologize for that...I have copied the link from another post and paste here...i didnt knew how to post the link plz tel me how to do that as well...thanks and sorry for such coping and pasting...

The problem :--

I have a page product.php on which there is menu with jquery, after that there is dropdown list which gets filled with product name using php code.
After selecting one of the product i pass this value to 3 different function and to 3 different php files for using ajax. Function getimg displays the image of prodcut in div d1. Along with this i show 3 more images in this php code which are sub parts of the product one peace product. Second div shows its technical specification and 3rd shows other options like product in different color or for different size (just the text not images). All the above three divs are working as Tabs(ofcourse handled by jquery). After clicking "product" tab it show the main product image with its sub part's 3 images. 2nd tab is Tech Specifications 3rd is other options.

Now everything is working fine all 3 divs are showing the thing properly. Ajax contents gets loaded properly in div d1. Now what i want is in div d1 when the sub parts are shown and user clicks that sub part either it should show in lightbox,slimbox or i am happy if it gets swapped with original image. which ever works is good for me, but as swap is easy i have no problem for that. As i am not in position to upload the page so sorry for that. I will give details of the which code i included the js, css files.

Another thing is where i have to add the js,lightbox files in product.php or the php files used by ajax.

Following is the code for products.php



<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="jquery.easing.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" />



after the above code is the code for navigation of menu then the code for ajax is written.
After that the js for tabs is called.

then is the html form which contact the dropdown menu which fill the product names.
after that are the divs.
Now i am giving you below the code for displaying the images in div d1.
which in proddet.php file




echo'
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="d1">
<!--DWLayoutTable-->
<tr>
<td height="30" colspan="8" valign="middle" align="center" bgcolor="#FFFFFF">';echo "product Name :--'". $row['productname']."'"; echo'<!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
</table>';

echo "<img class='swap' id='image22' width=800px; src='".$row["image"]."'/>";

echo'
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="d1">
<!--DWLayoutTable-->
<tr>
<td height="14" colspan="8" valign="top" bgcolor="#4E8EB4"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<!--DWLayoutTable-->
<tr>
<td width="13" height="94" valign="top" bgcolor="#4E8EB4"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="249" align="center" valign="middle" bgcolor="#FFFFFF">
<span class="style1">O<span class="style2">ther Options :---</span></span></td>

<td width="125" valign="top">';

echo " <a href='".$row['image1']."' onclick='lightBox()' rel='lightBox' ><img id='image0' style='margin:12px; border:thick; border:#FF0000' width=70px; height=70px; src='".$row["image1"]."'/>&nbsp </a>";

echo' </td>
<td width="185" valign="top">';

echo "<a href='".$row['image2']."' rel='lightbox' style='margin:12px' width=70px; height=70px;>'".$row['image2']."' </a>&nbsp;";
echo' </td>
<td width="180" valign="top">';

echo "<a href='".$row['image3']."' rel='lightbox' style='margin:12px' width=70px; height=70px;>'".$row['image3']."' </a>&nbsp;";
echo'</td>
<td width="163" valign="top" background="products/pilgrimage.png"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<!--DWLayoutTable-->
</table>
';




1st image is the main image and other three are its sub parts. I have written onclick="lightbox" as you told in ur older post to which i replied.

This is big post.
But please solve my problem i am fed up with this. I dont know why this thing is happening. I feel its due to conflict with the js and jquery and ajax loading problem. Mr moderator can u please give me some advance version of
lightbox or i am happy if you solve my problem with simple swap.
Thanks in advance

[jscheuer1]

jQuery Lightbox 5 is not a Dynamic Drive Script so I've moved this to the javascript section. What AJAX script are you using?

In any case, I'd recommend switching to Slimbox2 for the Lightbox duties and using my Live invocation with it. Get rid of the jQuery Lightbox 5 and use Slimbox2 instead.

See:

http://www.dynamicdrive.com/forums/blog.php?b=247

For Important details

Once Slimbox2 is configured as described in that blog it will pick up on any AJAX imported lightbox links.

[koolkedar]

Hi John
Thanks for your gr8 help and solved my problem..I am really greatful to you. But just one thing please let me know where i will have to change if i wish to see the image which is clicked only not in loop. Thanks for modifying my error in title as well.
Another thing is will it be possible for you to please explain to me what was wrong in my code.
It will be gr8 for me if u tell me so i will take care while doing it next time. Was the problem of conflict with ajax and jquery or anything else.
Thanks a lot...

[jscheuer1]

I'm not sure I understand the loop question. If you mean that you don't want the last Lightbox image in a group of images to lead you back to the first image, find this line in the live invocation:


$.slimbox(links, index, {loop: true /* , Aditional Options */ });


Change true to false.

If you mean something else, please explain further.

It's hard to say precisely what you did wrong. I've used a lot of Lightbox scripts, and jQuery Lightbox 5 just doesn't seem to measure up all that well. It could be made to work with AJAX though. I don't like it for other reasons.

Generally speaking the mistake you made was using a script that initializes its content when the page loads and expecting it to somehow automatically recognize new content for it when that content arrives later via AJAX.

Without the live invocation (or something like it), Slimbox2 would have the same problem. And most scripts are not AJAX friendly by design. So, if they initialize content on page load, they need some kind of help to recognize new content for them that arrives later.

[koolkedar]

Thanks john for ur reply and explained about my mistake. i want to give a look like when user click the image then that image should be shown in slimbox, after closing and clicking on 2nd image it should show 2nd image and later 3rd one, but i feel i am happy with the loop part, i have change my mind into it.
Now can u tell me is it possible to modify the script or any other version where i can show the product specifications and other product options in same slimbox. Like in FB an image is shown and on rt side comment on them so instead of comments in half portion is it possible to show specifications and other part its other options.It should show for all 3 images.

I am searching on net for that but i request you to please help me in this , i will try to find out solution for the showing single image in slimbox.
Thanks in advance.

[jscheuer1]

Well, the current script allows for a caption. This can be a complex caption with HTML in it. By default it appears at the bottom, below the image. To see it in action, give your lightbox link a rev attribute. So where you have:


<a href="someimage.jpg" rel="lightbox[groupname]" rev="My Caption">whatever</a>

add the highlighted.

If it has to be on the right, that can probably be arranged via css. When I have more time, I'll look into it. But at that point I would need a link to your page with some of these setup with the specifications showing as captions beneath the images so I can se what kind of information you want shown. Use examples that show the most information that has to be able to fit.