This one is for those brave WebPAC Pro people who use the bib_display.html file. This also may be a little advanced if you don’t know much JavaScript, but I think you can still follow along. Now remember these tips and tricks won’t be supported by the help desk, these are meant for those who feel brave enough to play around in hopes of coming up with something cool for their patrons.
Let’s say you have a Syndetics account, and you display small book jackets in your brief citation browse display for Keyword searches. Very nice feature, looks cool, users are used to this sort of thing (see Amazon) and all that. One web option controls this little feature, which means the small book jacket size is also what you get when you click through to the individual record’s bib display page, which is all fine and good, but let’s get creative!
Using a little “JavaScript Fu” (that’s a style of Kung Fu) and some CSS chicanery we will slice and dice and add the next larger size book jacket to our bib display pages! Crazy talk I know, but stick with me.
OK here we go. First thing you need to understand is that the BIBIMAGE web option controls the size book jackets. The web option declares the size of the image with a text string: i.e. SC.gif. This text string size declaration will be part of the src of the book jacket image element that WebPAC inserts into the bib_display.html page through the token. We will be using this bit of text to do our magic, but we will come to that in a bit, but for now we are going to add a bit of mark up to your bib_display.html file around the bibimage token. So we change/add the following to the file:
<div id="coverImage" style="display:none;">
<!--{bibimage}-->
</div>
Now for you astute people out there you might be saying, “Hey wait that will just hide the Book Jacket!”. Yes, you are right, but we don’t want our patrons to see a weird flicker of the image changing sizes, rather how we will do it will make the user think we intended the larger size image from the start, stay with me…
If you don’t care about the flicker and are more concerned with the display:none ramifications, just omit the style attribute and the imageReveal function and its onload call below…
Now we need the a couple of JavaScript functions in order to pull off our little trick. The two functions following will be the ones to actually manipulate the image and parent div of the image:
function bibResizer(){
if(!document.getElementById("coverImage"))return false;
var cover = document.getElementById("coverImage");
var coverImg = cover.getElementsByTagName("IMG");
if(!coverImg[0]) return false;
var src = coverImg[0].getAttribute("SRC");
var tempSRC = src.split("SC.gif");
var newSRC = tempSRC[0] + "MC.gif" +tempSRC[1];
coverImg[0].src = newSRC;
}
function imageReveal(){
if(!document.getElementById("coverImage"))return false;
var cover = document.getElementById("coverImage");
cover.style.display ="";
}
bibResizer uses the native split() method of JavaScript to break apart the src of the book jacket image element at the size declaration. We then replace the old size declaration with the our new desired size. I have included some safety check in the code (the return false stuff) so that we could include this code in a js file that was called in all system generated pages without worry that the function would fail and mess up other pages functionality.
imageReveal is the function that will actually display our new image by making the parent div of our image element visible to our patrons.
OK, we have our functions that will do the work now we need to actually call those function to do their jobs. The way I chose to work this out was to use one call at DOM Ready and a second at onload (which means when all the content for the page (DOM, Images, etc…) have been loaded). I chose to use Dean Edward’s window.onload(again) script for the DOM Ready load in which we call bibResizer, and the onload function I use is Simon Willison’s nice addLoadEvent.
// Dean Edwards/Matthias Miller/John Resig
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
if (!document.getElementById) return false;
bibResizer();
};
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = init;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(imageReveal);
All you need to do now is to get these scripts in your bib_display.html page. You could do this several ways, you could use the INSERTTAG_INHEAD web option to link in an external JavaScript file (the way I would suggest), or you could just paste these functions right into the head of the bib_display.html file itself (less effective I think). Either way you go, you have larger book jacket images in your bib display page.
Now if you are running any other scripts on your page, obviously you will need to tweak your scripts to get this trick and everything else running and playing together nicely, but then if you have other scripts I assume you probably already knew this.
This little trick was just an idea I had kicking around one day and thought to give it a try, hope you liked it. Take where I began and run wild my friends! Enjoy!
Photos
Surveys
Video
February 8th, 2008 at 2:01 pm
Great idea, scary solution, at least for one of us timid, non bib_display.html folks who don’t know Java even without the Fu. I’ve wished for this exact functionality for quite sometime, and as soon as I’ve had too much to drink and lost my better judgment I might just play around with this idea in my staging directory. But for future reference, it sure would be nice to have this functionality built in as a good old-fashioned wwwoption.