Yes.. it seems that jQuery is not referenced ok..
Try changing your base url to:
<base href="http://localhost/henryhoffman/"></base>
And the jQuery reference to:
<script src="assets/js/jquery-1.2.6.min.js" type="text/javascript"></script>
And triple check that jquery-1.2.6.min.js file is in assets/js folder under henryhoffman folder.
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
Do you have firebug installed? with that you can see what JS is actually loaded in to the browser from the page (by going to the js tab and viewing sources from dropdown menu). Check that is the jQuery source visible there.. Because all the errors seems to point that jQuery library is not found.
When the page has loaded, can the pictures be changed? Does the pictures fade out/in on change?
Can you get the site online so I could take a look?
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
Haha, can’t believe that I had forgotten this already... But yeah, I had seen the same problem previously.. when you want to call the onclick with jquery, you need to use the jquery click method, not onclick..
So replace:
$("#maxImage1").onclick();
with:
$("#maxImage1").click();
That
answer was also in the topic that I posted in my first reply to you above.. You should have read it fully
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
Excellent! Thanks so much for all this help - I can’t belive I missed that from the previous post.
Any idea how to deal with the delay of the picture loading? Can I preload?
You can preload the images if you want.
Google code for it.
Or you can try following:
wrap the <img id="maxImage".../> to a <div id="picHolder"></div> for example, then change the showPic function to something like this:
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast").remove();
var image = new Image();
$(image).attr({src: url, width: width, height: height}).load(function() {
$(image).hide();
$("#picHolder").append(image);
$(image).fadeIn("fast");
});
$("#maxTitle").html(title);
$("#maxDescr").html(descr);
}
That should fade in the new image only after it has been fully loaded.. If you want, you can easily put some kind of a loading picture in the "picHolder" div while the new picture is loading.. google for more info.
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
Try this:
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast").remove();
var image = new Image();
$(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
$(image).hide();
$("#picHolder").append(image);
$(image).fadeIn("fast");
});
$("#maxTitle").html(title);
$("#maxDescr").html(descr);
}
Added the id attribute to the new image that is created.
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
Thanks! I’m now very very close. The only problem I’m having is that it isn’t fading out any more, only in. Any ideas this time?
Thanks - I wish I could debug this myself but I have a very limited understanding. I’m getting a JQuery book out of the library today in an attempt to gain at least a little independence.
