SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you just want to center it, rather than make it full size, you could try this:

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

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

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

    index.htm

    Code:
     <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

    Code:
    #iframe {
      display: block;
      margin: 0 auto;
    }
    -Thanks
    Zohaib

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Are you able to post a link to your page?

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Page is internal.

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


    - Thanks
    Zohaib.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

    - Thanks
    Zohaib.


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
  •