Hi,
I have a function which will resize the image background when the page is loaded,
$(document).ready(function(){
loadBackground();
});
and I want to ‘unload’ or ‘remove’ this loaded function when I click on a button so that I can load this function anew instead of loading it on top of the page,
$('.get-image').click(function(){
$(window).unbind("resize",loadBackground);
loadBackground();
return false;
});
but I can’t make it work! any ideas please?
thanks,
Lau
Could you post the loadBackground() function? Without that I’m not really sure what you’re after …
sorry, below is the loadBackground() function,
this.loadBackground = function(){
var slide = 0;
// count the number of image
var total_image = $('#supersize li').length;
//alert(total_image);
// set the opacity of all images to 0
$('#supersize li').css({opacity: 0.0});
// add the class of active to the first image and display it (set it to full opacity)
$('#supersize li:first').addClass('active').css({opacity: 1.0});
if (total_image > 1)
{
slide = parseInt(1);
}
else
{
slide = parseInt(0);
}
$.fn.supersized.options = {
startwidth: 1024,
startheight: 768,
minsize: .50,
slideshow: slide,
slideinterval: 5000
};
$('#supersize').supersized();
$('#popup-home').hide();
$('#footer-home').hide();
$('#supersize').hide().fadeIn(1500, function(){
$('#popup-home').fadeIn(1500, function(){
$('#footer-home').fadeIn(1500);
});
});
}
it uses a plugin I came across from a website, below is the entire code of this plugin (I have modified it a little at the end of the code),
/*
Supersized - Full Screen Background/Slideshow jQuery Plugin
supersized.1.0.js
February 2009
By Sam Dunn
www.buildinternet.com / www.onemightyroar.com
*/
(function($){
//Resize image on ready or resize
$.fn.supersized = function() {
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
if (options.slideshow == 1){
setInterval("theslideshow()", options.slideinterval);
}
$().ready(function() {
$('#supersize').resizenow();
});
$(window).bind("resize", function(){
$('#supersize').resizenow();
});
};
//Adjust image size
$.fn.resizenow = function() {
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
return this.each(function() {
//Define image ratio & minimum dimensions
var minwidth = options.minsize*(options.startwidth);
var minheight = options.minsize*(options.startheight);
var ratio = options.startheight/options.startwidth;
//Gather browser and current image size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){
$(this).height(minheight);
$(this).width(minwidth);
}
else{
//When browser is taller
if (browserheight > browserwidth){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
if (browserwidth > imagewidth){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){
imagewidth = browserwidth;
$(this).width(browserwidth);
imageheight = browserwidth * ratio;
$(this).height(imageheight);
if (browserheight > imageheight){
imageheight = browserheight;
$(this).height(browserheight);
imagewidth = browserheight/ratio;
$(this).width(imagewidth);
}
}
}
return false;
});
};
$.fn.supersized.defaults = {
startwidth: 640,
startheight: 480,
minsize: .5,
slideshow: 1,
slideinterval: 5000
};
})(jQuery);
//Slideshow Add-on
function theslideshow() {
var currentslide = $('#supersize .active');
if ( currentslide.length == 0 ) currentslide = $('#supersize li:last');
var nextslide = currentslide.next().length ? currentslide.next() : $('#supersize li:first');
//nextslide.addClass('active');
//currentslide.removeClass('active');
//Set the fade in effect for the next image, show class has higher z-index
currentslide.addClass('last-active');
nextslide.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1500, function(){
currentslide.animate({opacity: 0.0}, 1500).removeClass('active last-active');
});
}
thanks!
this is the entire code of the function which the problem comes in,
this.getShop = function(){
$('.get-shop').click(function(){
var supersize = $('#supersize');
var shop = $('#shop');
var music = $('#music');
var offer = $('#offer');
var target_body = $('#content-shop');
var path = $(this).attr("href");
var pg_url = path.split('/').slice(-1);
var content_option = path.split('/').slice(-2, -1);
//alert(path.split('/').slice(-2, -1));
supersize.fadeOut('fast',function(){
shop.fadeOut('fast',function(){
offer.fadeOut('fast',function(){
music.fadeOut('fast',function(){
supersize.load( http_root+rp_layout+'supersize.php?pg_url='+pg_url, function(){
//$(document).unbind("resize",loadBackground1);
$(window).unbind("document", loadBackground);
loadBackground();
shop.load(http_root+rp_layout+'shop.php?pg_url='+pg_url, function(){
shop.fadeIn();
scrollbarImg_content();
offer.load(http_root+rp_layout+'offer.php?pg_url='+pg_url, function(){
offer.fadeIn();
music.load(http_root+rp_layout+'music.php?pg_url='+pg_url, function(){
music.fadeIn();
});
})
});
});
});
})
})
});
return false;
});
}
this is part of the html which calls the getShop() function,
<ul>
<li><a href="html/asia-chic" class="get-shop">Asia Chic</a></li>
<li><a href="html/the-fish-market" class="get-shop">The Fish Market</a></li>
<li><a href="html/souk" class="get-shop">Souk</a></li>
<li><a href="html/rocco-y-lola" class="get-shop">Rocco y Lola</a></li>
<li><a href="html/zucca" class="get-shop">Zucca</a></li>
</ul>
<div id="supersize">
<ul class="slide">
<li><a href="#"><img src="http://localhost/eatsuttonharbour_2010_MVC/views/uploads/images/extra/bg_ac.jpg"></a></li>
<li><a href="#"><img src="http://localhost/eatsuttonharbour_2010_MVC/views/uploads/images/extra/hp_ac.jpg"></a></li>
</ul>
</div>
sorry it has lots of codes!
Ah I see what you want. You want to cancel the following code of the plugin:
$(window).bind("resize", function(){
$('#supersize').resizenow();
});
In order to do that I would change the plugin such that it uses a namespaced event. Sounds difficult, it isn’t:
$(window).bind("resize.supersized", function(){
$('#supersize').resizenow();
});
The .supersized doesn’t actually do anything, but gives a name to the event so it can be easily unbound later:
$('.get-image').click(function(){
$(window).unbind("resize.supersized");
loadBackground();
return false;
});
More info on event namespaces can be found here: http://api.jquery.com/unbind/
Under the heading “Using namespaces”
sorry, I think I should explain the problem with the link below,
http://nano-visions.net/dump/html
but it is fine when you first load the page, the problem occurs when I load the all the content through ajax.
you will see the background images are acting strange when you click on the links at the right top, for instance if you click on ‘Asia Chic’, the images when black on and off…
thanks!
Try this:
$('.get-image').click(function(){
$("#supersize").resizenow();
return false;
});
thanks! great thing to know about the namespace. Tried it and manage to cancel the plugin event. but the problem still persists. I think the problem is not coming from the plugin which I dont understand at all!
please have a look at the link below you may find out what the bug actually is?
http://nano-visions.net/dump/html
thanks,
L
tried it. but only a black background (I set the body colour to black in css) instead of the image…
Okay, then the problem is probably the interval.
Add the line in bold:
(function($){
//Resize image on ready or resize
[B]$.fn.supersized.timer;[/B]
$.fn.supersized = function() {
// etc etc
Then change this in the plugin (add the bold part):
if (options.slideshow == 1){
[B]$.fn.supersized.timer=[/B]setInterval("theslideshow()", options.slideinterval);
}
Now add the following function to the plugin (again in bold)
(function($){
//Resize image on ready or resize
$.fn.supersized = function() {
// blah blah blah
};
[B] $.fn.stopSupersized = function() {
clearTimeout($.fn.supersized.timer);
}
[/B]
And now, in the $(‘.get-image’).click() call $(“#supersize”).stopSupersized() before you call loadBackground.
Hope that works
thank you! it now works perfectly! 
however I have to comment out this line otherwise it will have errors,
//$.fn.supersized.timer;
firebugs says…
$.fn.supersized is undefined
[Break on this error] $.fn.supersized.timer;
supersized.1.0.js (line 10)
$.fn.supersized is undefined
[Break on this error] slideinterval: 5000
but it works great if that line is commented out 
you have a look if u like,
http://nano-visions.net/dump/html
thanks so much. It is out of my brain to figure out where the problem was. even though I am still not quite sure why it was caused by the interval… 
its so great to get sorted though! lol 
a big thanks!
Well the interval is the thing that is responsible for swapping out background images (fade out one, fade in another). When the script initializes this interval is started and changes the background every 5000 milliseconds. When you call the function again another interval is initialized that also does this, so now there are two timers. Since these timers are not in sync (don’t act at the same time) you get the funky effects you saw, which becomes even worse once more timers are started. Does that make sense?
You’re welcome
yes it does! now I understand!
thanks so much!