Comments

1. Michael Pehl says:

   July 28, 2010 at 8:10 am

   Thanks for this tut, mate Did a RT

   Reply
2. Tim says:

   December 24, 2010 at 10:42 pm

   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.

   Reply
   • shoogledesigns says:

     December 25, 2010 at 9:08 pm

     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…

     Reply
3. Ben says:

   February 2, 2011 at 5:12 pm

   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

   Reply
4. Ben says:

   February 2, 2011 at 5:15 pm

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

   Reply
5. Ben says:

   February 2, 2011 at 5:50 pm

   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?

   Reply
6. Ben says:

   February 2, 2011 at 5:51 pm

   these also are being loaded

   Reply
7. Ben says:

   February 2, 2011 at 5:53 pm

   well the codes are being chunked

   Reply
8. shoogledesigns says:

   February 3, 2011 at 1:32 pm

   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

   Reply
9. gugu says:

   April 25, 2013 at 11:59 am

   How can we show it only once per visitor ?
   Now it show on all pages …

   Thanks very nice modal window …

   Reply
   • shoogledesigns says:

     May 15, 2013 at 8:19 am

     Hi Gugu,
     you’re gona have to work this around cookies I guess. I didn’t (and still don’t) want to cover this area.

     Reply