ChromeBox 2 Beta

How to install

Just include the following files into the head of your webpage:

<link rel="stylesheet" href="css/chromebox.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/chromebox.min.js"></script>

If you want to implement the iPhone functioinalities include the following code as well

<script type="text/javascript" src="js/chromebox.iphone.js">

Images

Single Image

	<a href="images/7.jpg" title="Image 7" class="lightbox">
		<img src="images/7.jpg" width="200px" alt="">
	</a>
	<a href="images/8.jpg" title="Image 8" class="lightbox">
		<img src="images/8.jpg" width="200px" alt="">
	</a>

<script>
$(function(){
	$('.lightbox').chromebox();
})
</script>

Image Gallery

Try the left, right and Esc buttons! ;)

<a href="images/1.jpg" class="lightbox" rel="gallery"><img src="images/1.jpg" width="200px"/></a>
<a href="images/2.jpg" class="lightbox" rel="gallery"><img src="images/2.jpg" width="200px"/></a><br>
<a href="images/3.jpg" class="lightbox" rel="gallery"><img src="images/3.jpg" width="200px"/></a>
<a href="images/4.jpg" class="lightbox" rel="gallery"><img src="images/4.jpg" width="200px"/></a><br>
<a href="images/5.jpg" class="lightbox" rel="gallery"><img src="images/5.jpg" width="200px"/></a>
<a href="images/6.jpg" class="lightbox" rel="gallery"><img src="images/6.jpg" width="200px"/></a><br>
<a href="images/12.jpg" class="lightbox" rel="gallery"><img src="images/12.jpg" width="200px"/></a>
<a href="images/11.jpg" class="lightbox" rel="gallery"><img src="images/11.jpg" width="200px"/></a><br>

<script>
$(function(){
	$('[rel="gallery"]').chromebox();
})
</script>

Content

Inline

<a href="#content_div" class="lightbox" style="font-size:30px">Click me</a>
<div id="content_div" style="display:none;">
<ont size="20px">Hello</font><br>
<img src="images/4.jpg" width="350px" alt=""><br>
I'm <b>#content_div</b> and I was hidden. =]<br>
© 2011
</div>

<script>
$(function(){
	$('.lightbox').chromebox();
})
</script>

Alert

Alert Message 1

Click me

<a href="#" onclick="return false;" class="chromebox_alert">Click me</a>

<script>
$(function(){
$('.chromebox_alert').click(function(e){
	$.chromebox("Do you want to continue?",{
	buttons : [ 'Yes', 'No' ]
	},function(result){
		if (result == 'Yes'){
			$.chromebox.close();
		}else{
			alert('You clicked No');
		}
	});
})
})
</script>

Alert Message 2

Click me

<a href="#"  onclick="return false;" class="chromebox_alert">Click me</a>

<script>
$(function(){
$('.chromebox_alert2').click(function(e){
	alert("Hello, I'm simple alert function");
})
})
</script>

Videos

<a href="http://www.youtube.com/watch?v=tDq3fNew1rU" class="lightbox" title="Sean Paul - Got 2 Luv U Ft. Alexis Jordan">Sean Paul - Got 2 Luv U Ft. Alexis Jordan [Official Music Video] </a>

<a href="http://vimeo.com/23599940" class="lightbox" title="Jennifer Lopez - I'm into you (feat. Lil Wayne)">Jennifer Lopez - I'm into you (feat. Lil Wayne)

<a href="http://www.screenr.com/ZATs"class="lightbox" title="Screenr Sample Video">Screenr Video

<script>
$(function(){
	$('.lightbox').chromebox();
})
</script>

Ajax

Ajax Request

<a href="/ajax/index.html" style="font-size:25px" class="lightbox">Load Ajax File</a><br>
<a href="ajax/index2.html" style="font-size:25px" class="lightbox ajax">Broken Link</a>

<script>
$(function(){
	$('.lightbox').chromebox();
})
</script>

Iframe

Single iframe

<a href="http://www.codecanyon.net" class="lightbox">Codecanyon.net</a><br>
<a href="http://activeden.net" class="lightbox" width="100%" height="550px">Activeden.net</a><br>
<a href="http://www.themeforest.net" class="lightbox" width="50%" height="450px">Themeforest.net</a>

<script>
$(function(){
	$('.lightbox').chromebox();
})
</script>

Chromebox 2- jQuery Lightbox