Your "X"box is lovely and works fast. Just what I had hoped someone would one day make, and had already while I fiddled around with Lightbox, Lytebox, Slimbox and the others including Highslide and Lightview. I mention the last two since THIS product incorporates some of their features into it. Importantly, it activates rel-tagged Lytebox images. I HAD Lytebox working at one point without knowing what I done to make it work properly, then one day it broke. Here's the details.

Blog: Williams Sporadic Blogs

Version: Just DLed and installed today.

Template Source: Neo

Whats it do: Via AJAX or JSON fetches the latest post titles and posts. The template DOES NOT refresh but for the titles and the post when title is selected.

Problem: Same as with Lytebox (and Slimbox) and don't know what I did to fix it or break it. The INITIAL post that loads WILL DISPLAY the image selected. Selecting a different post ( the page DOES NOT REFrESH ) and the image WILL NOT ACTIVATE. Reload the page itself and quickly select a different post then the first and the image DOES active. Selecting a different post and DOES NOT.

I have no recollection of changing anything in the Lytebox js. I have to assume its trivial. I've even gone back and put things back to basic,eliminated widgets and code and re-uploaded the Lytebox script and nothing.

Simply put, Floatbox is working but, not when different post and their images are fetched via Ajax or Json. Its a minor inconvenience since the template resets when the image takes you to another page.

Thanks for any help
William

This is covered in the docs the Programming active content section. But to recap here...

After you add new floatbox-enabled anchors to your page via ajax, you have to register those anchors in floatbox. (I.e., Add the anchors to floatbox's inventory and set the onclick action.) You do this by running fb.tagAnchors(document.getElementById("myID")); where "myID" is the id of the element that you added ajax content to. (retagging everything in document.body will work too.)

Make sure you fire tagAnchors after the ajax load completes, and not when the ajax request is first sent, because most ajax calls run asynchronously.

Okay. I may have been mistaken. It may not be ajax fetched...but at least part of the template works by json. It still will only present the initial loaded post's image but selecting a different post and clicking the image will not present the floatbox. I'm not trying to compare it too lytebox but, again, I had a similar problem and something that I did somewhere along the line made it work and I'm assuming its the same thing. I don't recall adding code. I tried adding the ajax rev tag and the popup class and niether worked. Sorry but, I'm just not good at this stuff.

Let me see a sample online and I can probably sort it out for you.

Here are some. I am giving you where postcontent is found in the Neo JS. I only just understand CSS. I am ASSUMING it is what I need. Im not looking to load an image outside of a 'post'.

function updatePost(index) {
   var datediv = document.getElementById("PostDate");
   var titlediv = document.getElementById("PostTitle");
   var contentdiv = document.getElementById("PostContent");
   var editdiv = document.getElementById("PostEditLink");
   var commentdiv = document.getElementById("PostCommentLink");

   datediv.innerHTML = dateString(postDate[index], 1);
   titlediv.innerHTML = &#039;<a href="&#039; + postPermalink[index] + &#039;">&#039; + postTitle[index] + &#039;</a>&#039;;
   contentdiv.innerHTML = &#039;<p>&#039; + postContent[index] + &#039;</p><div style="clear: both;"></div>&#039;;
   if (editdiv)
     editdiv.innerHTML = &#039;<a href="http://www2.blogger.com/post-edit.g?blogID=&#039; + blogid + &#039;&postID=&#039; + postId[index] + &#039;"><span class="quick-edit-icon">&#160;</span></a>&#039;;
   commentdiv.innerHTML = &#039;<a target="_blank" href="http://www2.blogger.com/comment.g?blogID=&#039; + blogid +&#039;&postID=&#039; + postId[index] + &#039;">Post a Comment</a>&#039;;

It says it uses AJAX and particularly JSON. I can understand parts of the code as to what they're working...considering I've twiddled with it before. But, this is all a fresh start. I've honestly sought and tried my own things even removing things back to normal and am trying to move forward again rather waiting for an answer. I've given you the part that seemed like it would do something you'd need to know. Thanks for responding and putting together a great product.

http://www.anniyalogam.com/neo/neo.js is the URL to see the code in its entirety.

This isn't going to work out. By an online example I mean a page that has anchors that you want loaded in floatbox but that are not loading in floatbox. I could look at that and tell you why they're not loading if you like. But I'm not interested in wading through someone's 3rd party code trying to sort it out for you.

If you don't know where and how the content is getting added to your templated page, you're going to have a very hard time modifying the behaviour of that content. But the basic floatbox approach applies as per the docs: get the appropriate rel and rev attributes on those anchors, run fb.tagAnchors against them if necessary, and they will work.

Okay. Thanks anyhow.