By: shoogledesigns

shoogledesigns — Thu, 03 Feb 2011 13:32:28 +0000

Hi Ben,

thanks for your comments.
Apart from the round corners (didnt bother to look at that side for IE), everything works.
Ive tested it myself in IE8 and it’s all looking ok to me.

rgds,
shoogle designs

By: Ben

Ben — Wed, 02 Feb 2011 17:53:00 +0000

well the codes are being chunked

By: Ben

Ben — Wed, 02 Feb 2011 17:51:30 +0000

these also are being loaded

By: Ben

Ben — Wed, 02 Feb 2011 17:50:20 +0000

The black overlay effect has disappeared? Am loading these js on my page:

$(document).ready(function(){

$(“img.a, img.c, img.e, img.g”).hover(
function() {
$(this).stop().animate({“opacity”: “0″}, “slow”);
},
function() {
$(this).stop().animate({“opacity”: “1″}, “slow”);
});

});

curvyCorners.addEvent(window, ‘load’, initCorners);

function initCorners() {
var settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true
}

/*
Usage:

curvyCorners(settingsObj, selectorStr);
curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);

selectorStr ::= complexSelector [, complexSelector]…
complexSelector ::= singleSelector[ singleSelector]
singleSelector ::= idType | classType
idType ::= #id
classType ::= [tagName].className
tagName ::= div|p|form|blockquote|frameset // others may work
className : .name
selector examples:
#mydiv p.rounded
#mypara
.rounded
*/
curvyCorners(settings, “#accordion-1″);
}

$(function() {
/*
fancybox init on each cloud-zoom element
*/
$(“#content .cloud-zoom”).fancybox({
‘transitionIn’ : ‘elastic’,
‘transitionOut’ : ‘none’,
‘speedIn’ : 400,
‘speedOut’ : 200,
‘overlayShow’ : true,
‘overlayColor’ : ‘#000′,
‘cyclic’ : true,
‘easingIn’ : ‘easeInOutExpo’
});

/*
because the cloud zoom plugin draws a mousetrap
div on top of the image, the fancybox click needs
to be changed. What we do here is to trigger the click
the fancybox expects, when we click the mousetrap div.
We know the mousetrap div is inserted after
the we want to click:
*/
$(“#content .mousetrap”).live(‘click’,function(){
$(this).prev().trigger(‘click’);
});

/*
the content element;
each list item / group with several images
*/
var $content = $(‘#content’),
$thumb_list = $content.find(‘#thumb > ul’);
/*
we need to set the width of each ul (sum of the children width);
we are also defining the click events on the right and left arrows
of each item.
*/
$thumb_list.each(function(){
var $this_list = $(this),
total_w = 0,
loaded = 0,
//preload all the images first
$images = $this_list.find(‘img’),
total_images= $images.length;
$images.each(function(){
var $img = $(this);
$(”).load(function(){
++loaded;
if (loaded == total_images){
$this_list.data(‘current’,0).children().each(function(){
total_w += $(this).width();
});
$this_list.css(‘width’, total_w + ‘px’);

//next / prev events

$this_list.parent()
.siblings(‘.next’)
.bind(‘click’,function(e){
var current = $this_list.data(‘current’);
if(current == $this_list.children().length -1) return false;
var next = ++current,
ml = -next * $this_list.children(‘:first’).width();

$this_list.data(‘current’,next)
.stop()
.animate({
‘marginLeft’ : ml + ‘px’
},400);
e.preventDefault();
})
.end()
.siblings(‘.prev’)
.bind(‘click’,function(e){
var current = $this_list.data(‘current’);
if(current == 0) return false;
var prev = –current,
ml = -prev * $this_list.children(‘:first’).width();

$this_list.data(‘current’,prev)
.stop()
.animate({
‘marginLeft’ : ml + ‘px’
},400);
e.preventDefault();
});
}
}).attr(‘src’,$img.attr(‘src’));
});
});
});

The script works well (except for background overlay) in Firefox and IE7 but not in IE8?

Any idea to correct this?

By: Ben

Ben — Wed, 02 Feb 2011 17:15:17 +0000

well huh, I download your script from another website and the close button is generated by js. I guess they modified your code!!!

By: Ben

Ben — Wed, 02 Feb 2011 17:12:36 +0000

Hey man

This is certainly very fantastic. But, always the “but” , the window is a bit jerky in IE7 and 8! Is there a way to fix the rounded corners for IE7 and 8?

I was very excited bu this script but I was horrified when I looked at in the horrible IE, huh.

Can you fix it pls? The close button image also seems to be missing in IE!

Ben

By: shoogledesigns

shoogledesigns — Sat, 25 Dec 2010 21:08:06 +0000

Hi Tim,

first of all, thanks for the compliment.

here’s some plugin that may be simpler for you to use/configure.
http://www.ericmmartin.com/projects/simplemodal-demos/

first example is the one you’re looking for…

By: Tim

Tim — Fri, 24 Dec 2010 22:42:07 +0000

Great tutorial!

How can I alter the code to make this pop up be activated in a link and onclick action in the page?

Thanks.

By: Michael Pehl

Michael Pehl — Wed, 28 Jul 2010 08:10:15 +0000

Thanks for this tut, mate Did a RT

Comments on: Display a special message to your visitors with an easy-to-code jQuery modal window

By: shoogledesigns

By: Ben

By: Ben

By: Ben

By: Ben

By: Ben

By: shoogledesigns

By: Tim

By: Michael Pehl