Develop Reference

Javascript image swap not working with IE8

I have a simple script that swaps an image in a div when you click on a thumbnail image. Like an image gallery. Works perfectly in IE 9 and above and in chrome firefox and so on. Just not in IE8 It will swap the image 1 or 2 times then it just stops working. I got this script off another forum, and I am a novice when it comes to scripts. I would appreciate any advice. this is the javascript.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
Here is the html
<div id="imageWrap">
<img src="images/main/blue.JPG" alt="Main Image" id="mainImage"/>
</div>
<!-- thumbnails are links to the full size image -->
<img src="images/main/blue_thumb.JPG" alt="Image 1"/>
<img src="images/main/green_thumb.JPG" alt="Image 2"/>
<img src="images/main/red_thumb.JPG" alt="Image 3"/>
<img src="images/main/purple_thumb.JPG" alt="Image 4"/>
and the css
#imageWrap {
width: 640px;
height: 510px;
background: url(../../images/main/ajax-loader.gif) center center no-repeat;
}
here is the link to the sample I have up.
http://www.rkshootingsupply.com/test

Your problem is that you're setting the source of the image before adding the event listener. When the src is changed for the first time it is requested from the server and this takes a bit of time; meaning that the event listener has chance to be attached before the image loads and subsequently triggers the load event. Then when you load the image the next time, IE fetches the image from its local cache and the load event is triggered before the event is attached. This will result in the JavaScript not knowing that the image has loaded and thus not updating it on the page.
Here is the modified code which changes the source after the event listener is attached.
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
}).attr('src',this.href);
return false;
});
});

Colorbox help! Embed a youtube video

I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:
{js}
<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>
<p><a href="javascript:void jQuery.colorbox({
html:'<iframe width=600 height=400 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=10 allowfullscreen></iframe>'
})"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>
Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.
If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.

All options you can find on this page: ColorBox
Here is example:
$.colorbox({ href: 'http://www.youtube.com/embed/eh-0knDpn5g', width: '600px', height: '400px', iframe: true });

<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
$('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
if (videoId && videoId[1]) {
return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
}
}});
</script>

popup with effect

var popup;
jQuery(document).ready(function(){
jQuery(window).bind('load',windowLoadComplete);
});
function windowLoadComplete() {
var settings = new Object();
popup = new SSKpopup(settings);
popup.createPopup();
jQuery('a').each(function(n){
if(jQuery(this).attr('href').indexOf("popup#")>-1) {
jQuery(jQuery(this).attr('href').split("popup#")[1]).hide();
jQuery(this).click(function(e) {
e.preventDefault();
popup.loadContent(jQuery(jQuery(this).attr('href').split("popup#")[1]));
});
}
});
}
I have that piece of code that is to create a popup containing pictures, information just like like http://jqueryui.com/demos/tabs/ and in my html code I create the popup as follows,
<a class="popup" href="/main/popup##hulk">Key Speakers</a>
<br>
Chairman
</p>
<div id="hulk" style="width: 450px; display: none;">
<img class="popup_img" border="0" alt="" src="/main/images/speaker.jpg">
<p>Content descriping the speakers</p
</div>
When I use firebug over the href I see the address different from normal location and if I insert into its as index.php/main/popup#$hulk to be same as every other links and click it then, the page direct me to localhost/xampp/. Of course no popup was displayed.

loading a whole series of images using jquery

I am using this library and what I want to do is to dynamically load the entire series of images in to an element:
<div id="product" style="width: 640px; height: 300px; overflow: hidden;">
/* These images are loaded and appended to the div element dynamically
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
<img src="images/06.jpg" alt="" />
/*
</div>
and then call the j360 library to set it up:
jQuery(document).ready(function() {
jQuery('#product').j360();
});
after the images have been loaded.
I have only seen tutorials where one image is loaded like this....
Are there any techniques for loading and appending a bunch of images in order?
Thanks in advance

Not sure what you mean by "load", but you can simply append the img element to the parent div, and the browser will say, "Hey, there's an image with a src, let me go grab it."
Here a working example on JSFiddle

If I understand correctly, you want to label the div as loading until ALL of the images to be appended have been properly loaded. This is doable, but a little complicated.
I am assuming you are able to generate an ordered list of image URLs. If this is not the case, then you have some more grunt work to do.
Essentially what we want to do is have each image check off whether or not it has loaded. Once they have all loaded, we can called a done handler and you can replace the loading .gif with your product view. Let's do it.
HTML
<div id="product" style="width: 640px; height: 300px; overflow: hidden;"></div>
JavaScript
$(document).ready(function() {
var imageURLs = [ ... ]; // you need to generate this (not too hard)
var imagesLoaded = 0;
var images = [ ];
$.each(imageURLs, function(i, imageURL) {
var $img = $('<img/>').load(function() {
imagesLoaded++;
// See if this was the last image we need to load.
if (imagesLoaded == imageURLs.length) {
showProductView();
}
})
.attr('src', imageURL);
images.push($img);
});
});
var showProductView = function() {
var $product = $('#product');
$.each(images, function(i, $img) {
$product.append($img);
});
$product.removeClass('loading');
$product.j360();
}

Don't know if this is specifically what you're looking for in your question, but this plugin will notify you when a set of images are loaded, and allow to perform a callback function after each individual image loads, or the whole set:
http://www.farinspace.com/jquery-image-preload-plugin/
It works great.

Is it possible to add a link in the image that shows up in slimbox?

I have an image gallery and I'm using slimbox in it. I want to know if it's possible to add a link in the image that shows up after clicking/hovering an image in the gallery, because I was able to add a link in the title/caption.
<a rel='slimbox' href="images/img2.jpg" title="<a href="http://www.google.com" >Google</a>">
<img class="cloudcarousel" src="images/img1.jpg" width="128" height="164" alt="" />
</a>

Yes. You can add the title/caption to each image. But you can not add a link to image directly. Try to add link in caption as in Slimbox demo. Please check the source. You can get some idea to customize.
<script type="text/javascript">//<![CDATA[
window.addEvent("domready", function() {
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
$$("a[href^=http://www.flickr.com/photos/] > img:first-child[src]").getParent().slimbox({
loop: true,
initialWidth: 1024,
initialHeight: 768,
overlayOpacity: 0.6,
overlayFadeDuration: 200,
resizeDuration: 1000,
resizeTransition: Fx.Transitions.Elastic.easeOut,
counterText: "This is image <strong>{x}</strong> on a total of <strong>{y}</strong> in this fabulous Flickr image gallery",
previousKeys: [37, 80, 16],
nextKeys: [39, 78, 17],
}, function(el) {
return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
(el.title || el.firstChild.alt) + '<br />Visit the Flickr page for this picture.'];
});
}
try {
_gat._getTracker("UA-760577-1")._trackPageview();
} catch(e) {}
});
//]]></script>
<h2>Customization</h2>
<p>You can change every parameter of Slimbox and make it work with any kind of link or element.<br />
Below is an example of integration with Flickr links and custom options.</p>
<p><img src="http://farm1.static.flickr.com/159/345009210_1f826cd5a1_t.jpg" alt="A nice bee." /><img src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_t.jpg" alt="Flowers" /></p>