Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html> 
<head> 
<style type="text/css">
<!--
  #mbOverlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #838A9A;
  cursor: pointer;
}
​
#mbOverlay.mbOverlayFF {
  background: transparent url(http://iaian7.com/images/mediabox/80.png) repeat;
}
​
#mbOverlay.mbOverlayIE {
  position: absolute;
}
​
#mbCenter {
  position: absolute;
  z-index: 9999;
  left: 50%;
  overflow: hidden;
  background-color: #000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
  -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
}
​
#mbCenter.mbLoading {
  background: #000 url(http://iaian7.com/images/mediabox/BlackLoading.gif) no-repeat center;
​
/*  This style is applied only during animation.  */
/*  For example, the following turns off shadows,  */
/*  helping browser performance on slow systems.  */
/*  To leave shadows on, just remove these lines:  */
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
​
#mbImage {
  position: relative;
  left: 0;
  top: 0;
​
/*  Begin styles for inline content, if no style is given  */
  font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  text-align: left;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 10px;
}
​
#mbCenter a, #mbCenter a:link, #mbCenter a:visited {
  color: #ddd;
}
​
#mbCenter a:hover, #mbCenter a:active {
  color: #fff;
}
​
/*  End inline content styles  */
​
#mbBottom {
  min-height: 20px;
  font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-size: 12px;
  color: #999;
  text-align: left;
  padding: 0 10px 10px;
}
​
#mbTitle {
  display: inline;
  color: #fff;
  font-weight: bold;
  line-height: 20px;
  font-size: 12px;
}
​
#mbNumber {
  display: inline;
  color: #999;
  line-height: 14px;
  font-size: 10px;
  margin: auto 10px;
}
​
#mbCaption {
  display: block;
  color: #999;
  line-height: 14px;
  font-size: 10px;
}
​
#mbPrevLink, #mbNextLink, #mbCloseLink {
  display: block;
  float: right;
  height: 20px;
  width: 46px;
  background: transparent url(http://iaian7.com/images/mediabox/BlackClose.gif) no-repeat center;
  margin: 0;
  outline: none;
}
​
#mbPrevLink {
  width: 69px;
  background: transparent url(http://iaian7.com/images/mediabox/BlackPrevious.gif) no-repeat center;
}
​
#mbNextLink {
  width: 41px;
  background: transparent url(http://iaian7.com/images/mediabox/BlackNext.gif) no-repeat center;
}
​
#mbCloseLink {
  width: 46px;
  background: transparent url(http://iaian7.com/images/mediabox/BlackClose.gif) no-repeat center;
}
​
/*  Error message styling  */
​
#mbError {
  position: relative;
  font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  border: 10px solid #700;
  padding: 10px 10px 10px;
  margin: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
​
#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
  color: #d00;
  font-weight: bold;
  text-decoration: underline;
}
-->
</style>
<script src="http://iaian7.com/js/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="http://iaian7.com/js/mediaboxAdv-1.2.0-min.js" type="text/javascript"></script>
</head> 
<body> 
<p><span style="float: none; " class="an7_imgdir"><a href="http://iaian7.com/media/mediabox/concrete.jpg"  title="Concrete::taken in eastern Michigan" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/concrete.jpg" alt="Concrete" /></a><a href="http://iaian7.com/media/mediabox/nature1.jpg"  title="Autumn 1" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/nature1.jpg" alt="Nature1" /></a><a href="http://iaian7.com/media/mediabox/nature2.jpg"  title="Autumn 2" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/nature2.jpg" alt="Nature2" /></a><a href="http://iaian7.com/media/mediabox/nature3.jpg"  title="Autumn 3" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/nature3.jpg" alt="Nature3" /></a><a href="http://iaian7.com/media/mediabox/trainyard.jpg"  title="Trainyard::taken near Marion, Indiana" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/trainyard.jpg" alt="Concrete" /></a><a href="http://iaian7.com/media/mediabox/window.jpg"  title="Image set::Window - taken in &lt;a href=&quot;http://www.cityofwabash.com/&quot; title=&quot;cityofwabash.com&quot; target=&quot;_blank&quot;&gt;Wabash, Indiana&lt;/a&gt;" class="an7_thumb"><img src="http://iaian7.com/media/mediabox/thumbs/window.jpg" alt="window" /></a></span></p> 
 
<script  type="text/javascript"> 
var x=document.getElementsByTagName("a");
var y=('.jpg','.gif','.png','.flv','.swf','youtube.com/watch');
var regexku=/^.+(((twit)|(tweet)|(com\/video.+)|(flickr.com.+)|(tube.com.+))|((gif)|(jpe?g)|(png)|(flv)|(swf)|(mp3)|(mp4))$)/;
 
for(i=0;i<x.length;i++)
 {
a=x[i].getAttribute('href');
if (a.match(regexku) != null)
   {
   x.item(i).setAttribute("rel","lightbox");
   }
 }
</script> 
 
</body> 
</html>
 
var x=xmlDoc.getElementsByTagName("a");
var y=('.jpg','.gif','.png','.flv','.swf','youtube.com/watch');
var regexku=/^.+(((twit)|(tweet)|(com\/video.+)|(flickr.com.+)|(tube.com.+))|((gif)|(jpe?g)|(png)|(flv)|(swf)|(mp3)|(mp4))$)/;
 
for(i=0;i<x.length;i++)
 {
a=x[i].getAttribute('href');
if (a.match(regexku) != null)
   {
   x.item(i).setAttribute("rel","lightbox");
   }
 }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers