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.
All required files for colorbox can be downloded from colorbox website.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>
http://www.jacklmoore.com/colorbox
-Thanks
Zohaib
Reply With Quote
Bookmarks