JQueryプラグインColorbox

jquery01

 JQuery Colorbox配布サイト

 

JQuery ColorboxのIFrameタイプの設置方法。

 

files-1

 

IFrameタイプ

<link rel="stylesheet" href="./css/colorbox.css" />
<script type="text/javascript" src="./js/jquery.colorbox.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".nexts").colorbox({iframe:true, innerWidth:760, innerHeight:450"});
	});
</script>

 

 

レスポンシブに対応する

maxWidth  maxHeight が設定可能なので、
Responsive対応にするには、maxWidthを追加してやる。

 

<link rel="stylesheet" href="./css/colorbox.css" />
<script type="text/javascript" src="./js/jquery.colorbox.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".next").colorbox({iframe:true, innerWidth:760, innerHeight:450,maxWidth:"94%"});
	});
</script>

<a class="next ui yellow button" href="next.html" title="生成する">生成する</a>