SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    0 Post(s)
    0 Thread(s)

    Colorbox outside page in iframe not center align


    I am using colorbox to show google map using iframe option.

    But map is not center align and I do not find option to make it center align in colorbox js files.

    I need solution to make it center align.

    Following is the example to call map.

    <!DOCTYPE html>
    		<meta charset='utf-8'/>
    		<title>ColorBox Examples</title>
    			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
    			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
    			h2{font-size:13px; margin:15px 0 0 0;}
    		<link rel="stylesheet" href="colorbox.css" />
    		<script src=""></script>
    		<script src="../jquery.colorbox.js"></script>
    				//Examples of how to assign the ColorBox event to elements
    				$(".group2").colorbox({rel:'group2', transition:"fade"});
    				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    				$(".group4").colorbox({rel:'group4', slideshow:true});
    				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
    				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    				$(".inline").colorbox({inline:true, width:"50%"});
    					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
    					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
    					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
    					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
    					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    				//Example of preserving a JavaScript event for inline calls.
    					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
    					return false;
    		<h1>ColorBox Demonstration</h1>
    		   <p><a class='iframe'  href="">Outside Webpage (Iframe)</a></p>
    		<p><a class='inline' href="#inline_content">Inline HTML</a></p>
    All required files for colorbox can be downloded from colorbox website.

    Attached Images Attached Images

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts