Call south 020 8050 8915 Call north 01772 915005
News

ColorBox Polaroid Theme

by James Duffell

ColorBox is a cracking little jQuery lightbox plugin which is extremely adaptable and lightweight. Customisation is one of its strong points, so I took it upon myself to tinker with one of the default themes to create something a little more unique and simple for myself – a Colorbox Polaroid theme.

ColorBox Polaroid Theme

Using this theme is really simple and rather safe, so you can easily switch back if you wish to.

Installation

  • Ensure that you’re not connecting to an existing ColorBox style sheet
  • Open your style sheet a simply paste the following code where suits

It’s worth noting that theme doesn’t reference any files so you don’t need to worry about the relationship between your style sheet and the location of any files.


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left; background: #ffffff;}
#cboxContent{position:relative; background: #ffffff;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#000000;}
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background: #ffffff;}
#cboxTopCenter{height:25px; background: #ffffff;}
#cboxTopRight{width:25px; height:25px; background: #ffffff;}
#cboxBottomLeft{width:25px; height:25px; background: #ffffff;}
#cboxBottomCenter{height:25px; background: #ffffff;}
#cboxBottomRight{width:25px; height:25px; background: #ffffff;}
#cboxMiddleLeft{width:25px; background: #ffffff;}
#cboxMiddleRight{width:25px; background: #ffffff;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:50px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; line-height: 25px; width:100%;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:#fff;}
#cboxClose{position:absolute; bottom:0; right:0; display:block;}