Colorbox outside page in iframe not center align

JavaScript
1

Hi,

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>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>ColorBox Examples</title>
		<style>
			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;}
		</style>
		<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script src="../jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".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%"});
				$(".callbacks").colorbox({
					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").click(function(){
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
	</head>
	<body>
		<h1>ColorBox Demonstration</h1>
		   <p><a class='iframe'  href="https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple">Outside Webpage (Iframe)</a></p>
		<p><a class='inline' href="#inline_content">Inline HTML</a></p>
		
	</body>
</html>

All required files for colorbox can be downloded from colorbox website.

http://www.jacklmoore.com/colorbox

-Thanks
Zohaib

2

If you just want to center it, rather than make it full size, you could try this:

iframe {
  display: block;
  margin: 0 auto;
}
3

hi,

where to add this I tried in colorbox.css and anchor style but not working

index.htm


 <p><a class='iframe' id="iframe" style="display:block;margin:0 auto;" href="https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple">Outside Webpage (Iframe)</a></p>

colorbox.css

#iframe {
  display: block;
  margin: 0 auto;
}

-Thanks
Zohaib

4

Are you able to post a link to your page?

5

Page is internal.

I will upload all files with example in zip format in next post.

  • Thanks
    Zohaib.
6

Hi,

I am looking for way to get width and height automatic so that no need to specify.

This will solve problem of center align and space from right, left and bottom of page or image in iframe colorbox option.

$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
  • Thanks
    Zohaib.