SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colorbox outside page in iframe not center align

    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.

    Code:
    <!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
    Attached Images Attached Images


Tags for this Thread

Bookmarks

Posting Permissions

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