One thing all web designers and developers have to deal with on a daily basis is the dreaded Internet Explorer and it's poor handling of web standards. For whatever reason IE has numerous issues that are hard to deal with. One of those issues is that IE doesn't return anything when calling the get method. Unfortunately I didn't realize this until I had already built out a nice fade transition for my portfolio only to find that it didn't work at all in IE 7 or below. (haven't tried IE 8 yet).
I'll preface this by stating that I'm not a developer… With some insight from friend and collegue Jackson Gabbard, I was able to work around IE's failure to return anything from Get by using hidden divs and the load function. It goes something like this: 1. Hide a div. 2. add a blank image tag to that div. 3. load an image into that image tag. 4. once that image is done loading, show the hidden div.
Here's roughly the jQuery I used to get this done:
$(document).ready(function(){
function fadeInImg() {
$("#port_wrapper").fadeIn(2000);
}
$("#portfolio img").click(function(){ // any image inside the portfolio div calls this function on click (div that holds the thumbnails)
var id = $(this).attr("id"); // used to determine which image to get based on the thumbnail image id attribute
$("#port_wrapper").fadeOut(2000, loadPortImg); // fade out current image (if any) from the and calls the img loading function
function loadPortImg() {
$("#port_wrapper").empty(); // clear any imaage currently loaded. (#port_wrapper holds the large images)
$("#port_wrapper").append("![]()
"); // add new empty image tag as loading "shell"
$("#loaded_img").load(function() { // once the loaded_img div is fully loaded call fadeInBg funciton
fadeInImg();
});
$("#loaded_img").attr("src","images/" + id + ".jpg"); // now add the selected img src to the appended img tag (once this loads fully the fadeInBg function is called
} // stop loadPortImg function
}); // stop thumbnail click function
}); //stop jquery
Here's roughly the HTML I used to get this done: NOTE – the thumbnail image id attribute MUST be the same as the large image filename sans the ".jpg" file extension.
<div id="portfolio">
<a href="#"><img src="images/thumb.jpg" alt="Website Design icon" title="Some Website Design" id="somePortImgTitle" width="50″ height="50″ /></a>
</div> <!– stop portfolio div –>
<div id="port_wrapper"></div> <!– stop content_container –>
Like I said, I'm not a developer so there may be an easier way to get around this IE/get issue but this seems to work pretty well for me. Also excuse any mistyped terminology.
click here for a working example
