Lightbox

Display content in popup modal dialogs with darkened background.

CSS/JS files (add code to <HEAD> section):


<!-- DC LightBox CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/prettyPhoto/css/prettyPhoto.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC LightBox JS -->
<script type="text/javascript" src="dreamcodes/prettyPhoto/js/jquery.prettyPhoto.js"></script>

<!-- DC LightBox Settings -->
<script type="text/javascript">
$(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({
		social_tools: false,
	});
});
</script>

          

Display Larger Image(s)

Image Caption #1 Image Caption #2

View code:


<!-- DC LightBox:Image Start -->
<!-- rel="prettyPhoto[1]" indicates image belongs to gallery 1, increment this number to separate images. -->
<a href="http://pimg.co/p/800x600" rel="prettyPhoto[1]" title="Add description here (optional)"><img src="http://pimg.co/p/192x132" alt="Image Caption #1 (optional)" border="0" class="img_border_radius" /></a>
<a href="http://pimg.co/p/800x600/333333" rel="prettyPhoto[1]" title="Add description here (optional)"><img src="http://pimg.co/p/192x132/333333" alt="Image Caption #2 (optional)" border="0" class="img_border_radius" /></a>
<!-- DC LightBox:Image End -->

Display External Content (using IFRAME)

+ View News.com Website
+ View DreamTemplate Website (set 100% width)

View code:


<!-- DC LightBox:IFRAME Start -->
<a href="http://www.news.com?iframe=true&width=750&height=400" rel="prettyPhoto[iframes]" title="Add description here (optional)">View News.com Website</a>
<a href="http://www.dreamtemplate.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Add description here (optional)">View DreamTemplate Website</a> (set 100% width)
<!-- DC LightBox:IFRAME End -->

Display Inline Content (content within DIV layers)

View Inline Content

View code:


<!-- DC LightBox:Inline Start -->
	<a href="#inline-1" rel="prettyPhoto[inline]">View Inline Content</a>
	<div id="inline-1" style="display:none;">
		<h3>This content is placed in a local <DIV> layer.</h3>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>
<!-- DC LightBox:Inline End -->

Display YouTube Content

  View YouTube Video Clip

View code:


<!-- DC LightBox:YouTube Start -->
<a href="http://www.youtube.com/watch?v=FG0fTKAqZ5g" rel="prettyPhoto" title="Add caption here (optional)">View YouTube Video Clip</a>
<!-- DC LightBox:YouTube End -->

Display Vimeo Content

  View Vimeo Video Clip

View code:


<!-- DC LightBox:Vimeo Start -->
<a href="http://vimeo.com/4749536" rel="prettyPhoto" title="Add description here (optional)">View Vimeo Video Clip</a>
<!-- DC LightBox:Vimeo End -->

Display Adobe PDF Content

Add caption here (optional)   View Adobe PDF File

View code:


<!-- DC LightBox:PDF Start -->
<a href="http://docs.google.com/viewer?url=http://pimg.co/sc-samples/sample.pdf&embedded=true?iframe=true&width=650&height=350" rel="prettyPhoto[iframes]" title="Add description here (optional)">View Adobe PDF File</a>
<!-- DC LightBox:PDF End -->

Display Adobe Flash Content

  View Flash Content

View code:


<!-- DC LightBox:Flash Start -->
  <a href="http://pimg.co/sc-samples/flash-test.swf?width=600&height=300" rel="prettyPhoto[flash]" title="Add caption here (optional)">View Flash Content</a>
<!-- DC LightBox:Flash Start -->

Display QuickTime Content

Add caption here (optional)   View QuickTime Clip

View code:


<!-- DC LightBox:QuickTime Start -->
<a href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360" rel="prettyPhoto" title="Add description here (optional)">View QuickTime Clip</a>
<!-- DC LightBox:QuickTime End -->



© TemplateAccess