This is an update to this post with the change being that I swapped out Lightbox JS (Scriptaculous/Prototype) in place of the Yahoo! User Interface Library.
The result is a minor performance increase using the YUI over Prototype.
First get the YUI Kit. For the sake of keeping things clean unpack the YUI and go to these files and copy them to the /js directory:
- /build/yahoo/yahoo.js
- /build/connection/connection-min.js
Now create a new page (like yahooFlickrSite.php) and copy the contents of index.php from the source code, into the new page. Then alter the header.php so the JavaScript Library's don't conflict with each other by removing the Lightbox, Scriptaculous and Prototype JavaScript references and replace them with the code below.
-
<script src = "js/yahoo.js"></script>
-
<script src = "js/connection-min.js"></script>
Once you're set up all you need to do is alter the Ajax scripts to use the YUI.
-
///SlideShow - callback / handler
-
-
var callbackMain =
-
{
-
success:handlerSlideShow,
-
failure:handleFailure,
-
argument: { action:"action", setid:"setid" }
-
};
-
-
var handlerSlideShow = function SlideShow_Callback(str) {
-
-
document.getElementById('mainphotoSS').innerHTML = str.responseText;
-
}
-
-
///PrevPhoto - callback / handler
-
-
var callbackPrev =
-
{
-
success:handlerPrevPhoto,
-
failure:handleFailure,
-
argument: { action:"action", setid:"setid" }
-
};
-
-
var handlerPrevPhoto = function PrevPhoto_Callback(str) {
-
document.getElementById('prevphotoSS').innerHTML = str.responseText;
-
}
-
-
///NextPhoto - callback / handler
-
-
var callbackNext =
-
{
-
success:handlerNextPhoto,
-
failure:handleFailure,
-
argument: { action:"action", setid:"setid" }
-
};
-
-
var handlerNextPhoto = function NextPhoto_Callback(str) {
-
document.getElementById('nextphotoSS').innerHTML = str.responseText;
-
}
-
-
//SlideShow function
-
function SlideShow(pid)
-
{
-
-
document.getElementById('mainphotoSS').innerHTML = '<img src=images/loading.gif>';
-
document.getElementById('nextphotoSS').innerHTML = '<img src=images/loading.gif>';
-
document.getElementById('prevphotoSS').innerHTML = '<img src=images/loading.gif>';
-
-
var request = YAHOO.util.Connect.asyncRequest('GET', 'ajaxSlideshow.php?action=main&pid='+pid+'', callbackMain);
-
-
var request = YAHOO.util.Connect.asyncRequest('GET', 'ajaxSlideshow.php?action=next&pid='+pid+'', callbackNext);
-
-
var request = YAHOO.util.Connect.asyncRequest('GET', 'ajaxSlideshow.php?action=prev&pid='+pid+'', callbackPrev);
-
-
}
-
-
var divError = document.getElementById('errorlog');
-
-
var handleFailure = function(o){
-
if(o.responseText !== undefined){
-
divError.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
-
divError.innerHTML += "<li>HTTP status: " + o.status + "</li>";
-
divError.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
-
}
-
};
There are several differences in this code compared to the Prototype Ajax code.
First there are 3 new callback function one for each photo function (main, prev and next) and there is a new handler to deal with failed requests.
The main part that does the actuall interaction with the external php file is where the difference lies. Have a look at this code:
-
//Yahoo request
-
var request = YAHOO.util.Connect.asyncRequest('GET', 'ajaxSlideshow.php?action=main&pid='+pid+'', callbackMain);
-
-
//Prototype request
-
new Ajax.Updater('mainphotoSS','ajaxSlideshow.php?action=main&pid='+pid+'', { method:'get', asynchronous:true, onSuccess:handlerSlideShow });
As you can see they both share the same traits and both interact with the same external php file. The beauty is that we only need to alter the JavaScript to switch between using the YUI and Prototype and we didn't have to touch any of the PHP code.