jQuery Colorbox - Version 1.1

Version Description

fixes critical bug which would break rendering the blog. Sorry, was not aware that the plugin would be listed before I tagged the files as 1.0 in subversion...

Release Info

Developer	techotronic
Plugin	jQuery Colorbox
Version	1.1
Comparing to
See all releases

Version 1.1

Files changed (49) hide show

jquery-colorbox.php +222 -0
js/jquery.colorbox-min.js +2 -0
localization/jquery-colorbox-de_DE.mo +0 -0
localization/jquery-colorbox-de_DE.po +85 -0
localization/jquery-colorbox-en_EN.mo +0 -0
localization/jquery-colorbox-en_EN.po +69 -0
readme.txt +56 -0
themes/theme1/colorbox.css +62 -0
themes/theme1/images/border.png +0 -0
themes/theme1/images/controls.png +0 -0
themes/theme1/images/internet_explorer/borderBottomCenter.png +0 -0
themes/theme1/images/internet_explorer/borderBottomLeft.png +0 -0
themes/theme1/images/internet_explorer/borderBottomRight.png +0 -0
themes/theme1/images/internet_explorer/borderMiddleLeft.png +0 -0
themes/theme1/images/internet_explorer/borderMiddleRight.png +0 -0
themes/theme1/images/internet_explorer/borderTopCenter.png +0 -0
themes/theme1/images/internet_explorer/borderTopLeft.png +0 -0
themes/theme1/images/internet_explorer/borderTopRight.png +0 -0
themes/theme1/images/loading.gif +0 -0
themes/theme1/images/loading_background.png +0 -0
themes/theme1/images/overlay.png +0 -0
themes/theme1/index.html +86 -0
themes/theme2/colorbox.css +41 -0
themes/theme2/images/controls.png +0 -0
themes/theme2/images/loading.gif +0 -0
themes/theme2/index.html +86 -0
themes/theme3/colorbox.css +36 -0
themes/theme3/images/controls.png +0 -0
themes/theme3/images/loading.gif +0 -0
themes/theme3/index.html +86 -0
themes/theme4/colorbox.css +59 -0
themes/theme4/images/border1.png +0 -0
themes/theme4/images/border2.png +0 -0
themes/theme4/images/internet_explorer/borderBottomCenter.png +0 -0
themes/theme4/images/internet_explorer/borderBottomLeft.png +0 -0
themes/theme4/images/internet_explorer/borderBottomRight.png +0 -0
themes/theme4/images/internet_explorer/borderMiddleLeft.png +0 -0
themes/theme4/images/internet_explorer/borderMiddleRight.png +0 -0
themes/theme4/images/internet_explorer/borderTopCenter.png +0 -0
themes/theme4/images/internet_explorer/borderTopLeft.png +0 -0
themes/theme4/images/internet_explorer/borderTopRight.png +0 -0
themes/theme4/images/loading.gif +0 -0
themes/theme4/index.html +86 -0
themes/theme5/colorbox.css +50 -0
themes/theme5/images/border.png +0 -0
themes/theme5/images/controls.png +0 -0
themes/theme5/images/loading.gif +0 -0
themes/theme5/images/loading_background.png +0 -0
themes/theme5/index.html +86 -0

jquery-colorbox.php ADDED Viewed

	@@ -0,0 +1,222 @@


1	+ <?php
2	+ /**
3	+ * @package Techotronic
4	+ * @subpackage jQuery Colorbox
5	+ *
6	+ * Plugin Name: jQuery Colorbox
7	+ * Plugin URI: http://www.techotronic.de/index.php/plugins/jquery-colorbox/
8	+ * Description: Used to overlay images on the current page. Images in one post are grouped automatically.
9	+ * Version: 1.1
10	+ * Author: Arne Franken
11	+ * Author URI: http://www.techotronic.de
12	+ */
13	+ ?>
14	+ <?php
15	+ class jQueryColorbox {
16	+ var $colorboxThemes = array();
17	+ var $colorboxSettings = array();
18	+ var $colorboxDefaultSettings = array();
19	+
20	+ /**
21	+ * Plugin initialization
22	+ */
23	+ function jQueryColorbox() {
24	+ if ( !function_exists('plugins_url') )
25	+ return;
26	+
27	+ // it seems that there is no way to find the plugin dir relative to the WP_PLUGIN_DIR through the Wordpress API...
28	+ load_plugin_textdomain( 'jquery-colorbox', false, '/jquery-colorbox/localization/' );
29	+
30	+ add_action( 'wp_head', array(&$this, 'buildWordpressHeader') );
31	+ add_action( 'admin_menu', array(&$this, 'registerSettingsPage') );
32	+ add_action( 'admin_init', array(&$this, 'registerSettings') );
33	+
34	+ if ( !is_admin() ) {
35	+ wp_enqueue_script( 'colorbox', plugins_url( 'js/jquery.colorbox-min.js', __FILE__ ), array( 'jquery' ), '1.3.5' );
36	+
37	+ wp_register_style( 'colorbox-theme1', plugins_url( 'themes/theme1/colorbox.css', __FILE__ ), array(), '1.3.5', 'screen' );
38	+ wp_register_style( 'colorbox-theme2', plugins_url( 'themes/theme2/colorbox.css', __FILE__ ), array(), '1.3.5', 'screen' );
39	+ wp_register_style( 'colorbox-theme3', plugins_url( 'themes/theme3/colorbox.css', __FILE__ ), array(), '1.3.5', 'screen' );
40	+ wp_register_style( 'colorbox-theme4', plugins_url( 'themes/theme4/colorbox.css', __FILE__ ), array(), '1.3.5', 'screen' );
41	+ wp_register_style( 'colorbox-theme5', plugins_url( 'themes/theme5/colorbox.css', __FILE__ ), array(), '1.3.5', 'screen' );
42	+ }
43	+
44	+ // Create list of themes and their human readable names
45	+ $this->colorboxThemes = (array) apply_filters( 'jquery-colorbox_themes', array(
46	+ 'theme1' => __( 'Theme #1', 'jquery-colorbox' ),
47	+ 'theme2' => __( 'Theme #2', 'jquery-colorbox' ),
48	+ 'theme3' => __( 'Theme #3', 'jquery-colorbox' ),
49	+ 'theme4' => __( 'Theme #4', 'jquery-colorbox' ),
50	+ 'theme5' => __( 'Theme #5', 'jquery-colorbox' ),
51	+ ) );
52	+
53	+ // Create array of default settings (you can use the filter to modify these)
54	+ $colorboxDefaultTheme = key( $this->colorboxThemes );
55	+ $this->colorboxDefaultSettings = array(
56	+ 'colorboxTheme' => $colorboxDefaultTheme,
57	+ 'isAutoColorBox' => False
58	+ );
59	+
60	+ // Create the settings array by merging the user's settings and the defaults
61	+ $usersettings = (array) get_option('jquery-colorbox_settings');
62	+ $this->colorboxSettings = wp_parse_args( $usersettings, $this->colorboxDefaultSettings );
63	+
64	+ // Enqueue the theme in wordpress
65	+ if ( empty($this->colorboxThemes[$this->colorboxSettings['colorboxTheme']]) )
66	+ $this->colorboxSettings['colorboxTheme'] = $this->colorboxDefaultSettings['colorboxTheme'];
67	+ wp_enqueue_style( 'colorbox-' . $this->colorboxSettings['colorboxTheme'] );
68	+ }//jQueryColorbox()
69	+
70	+ /**
71	+ * Register the settings page in wordpress
72	+ */
73	+ function registerSettingsPage() {
74	+ static $plugin_basename;
75	+ if ( current_user_can('manage_options') ) {
76	+ $plugin_basename = plugin_basename(__FILE__);
77	+ add_filter( 'plugin_action_links_' . $plugin_basename, array(&$this, 'addPluginActionLinks') );
78	+ add_options_page( __('jQuery Colorbox', 'jquery-colorbox'), __('jQuery Colorbox', 'jquery-colorbox'), 'manage_options', $plugin_basename, array(&$this, 'renderSettingsPage') );
79	+ }
80	+ }//registerSettingsPage()
81	+
82	+ /**
83	+ * Add settings link to plugin management page
84	+ *
85	+ * @param original action_links
86	+ * @return action_links with link to settings page
87	+ */
88	+ function addPluginActionLinks($action_links) {
89	+ static $plugin_basename;
90	+ if ( !$plugin_basename ) $plugin_basename = plugin_basename(__FILE__);
91	+ $settings_link = '<a href="options-general.php?page='.$plugin_basename.'">' . __('Settings', 'jquery-colorbox') . '</a>';
92	+ array_unshift( $action_links, $settings_link );
93	+
94	+ return $action_links;
95	+ }//addPluginActionLinks()
96	+
97	+ /**
98	+ * Register the plugins settings
99	+ */
100	+ function registerSettings() {
101	+ register_setting( 'jquery-colorbox_settings', 'jquery-colorbox_settings', array(&$this, 'validateSettings') );
102	+ }//registerSettings()
103	+
104	+ /**
105	+ * Insert JavaScript for Colorbox into WP Header
106	+ *
107	+ * @return rewritten content or excerpt
108	+ */
109	+ function buildWordpressHeader() {
110	+ ?>
111	+ <!-- jQuery Colorbox \| by Arne Franken, http://www.techotronic.de/ -->
112	+ <script type="text/javascript">
113	+ // <![CDATA[
114	+ jQuery(document).ready(function($){
115	+ //gets all "a" elements that have a nested "img"
116	+ $("a:has(img)").each(function(index, obj){
117	+ //in this context, the first child is always an image if fundamental Wordpress functions are used
118	+ $nestedElement = $(obj).children(0);
119	+ $groupId = $nestedElement.attr("class").match('colorbox-[0-9]+').toString();
120	+ if($nestedElement.is("img")){
121	+ //and calls colorbox function on each img.
122	+ //elements with the same groupId in the class attribute are grouped
123	+ //the title of the img is used as the title for the colorbox.
124	+ $(obj).colorbox({rel:$groupId, maxWidth:"95%", maxHeight:"95%", title:$nestedElement.attr("title")});
125	+ };
126	+ });
127	+ });
128	+ // ]]>
129	+ </script>
130	+ <?php
131	+ //write "colorbox-postID" to "img"-tags class attribute.
132	+ //TODO: get rid of this. Slightly better than rewriting links by adding a "rel" attribute, but still ugly.
133	+ //TODO: why doesn't Wordpress provide a filter for img or a tags during output?
134	+ add_filter('the_content', 'addColorboxGroupIdToImages');
135	+ add_filter('the_excerpt', 'addColorboxGroupIdToImages');
136	+ } //buildWordpressHeader()
137	+
138	+ /**
139	+ * Render Settings page
140	+ */
141	+ function renderSettingsPage() {
142	+ ?>
143	+ <div class="wrap">
144	+ <?php screen_icon(); ?>
145	+ <h2><?php _e( 'jQuery Colorbox Settings', 'jquery-colorbox' ); ?></h2>
146	+
147	+ <form method="post" action="options.php">
148	+
149	+ <?php settings_fields('jquery-colorbox_settings'); ?>
150	+
151	+ <p><?php _e( 'Select the theme you want to use on your blog.', 'jquery-colorbox' ); ?></p>
152	+
153	+ <table class="form-table">
154	+ <tr valign="top">
155	+ <th scope="row"><label for="jquery-colorbox-theme"><?php _e('Theme', 'jquery-colorbox'); ?></label></th>
156	+ <td>
157	+ <select name="jquery-colorbox_settings[colorboxTheme]" id="jquery-colorbox-theme" class="postform">
158	+ <?php
159	+ foreach ( $this->colorboxThemes as $theme => $name ) {
160	+ echo ' <option value="' . esc_attr($theme) . '"';
161	+ selected( $this->colorboxSettings['colorboxTheme'], $theme );
162	+ echo '>' . htmlspecialchars($name) . "</option>\n";
163	+ }
164	+ ?>
165	+ </select>
166	+ </td>
167	+ </tr>
168	+ </table>
169	+
170	+ <p><?php printf( __('If you would like to make a small (or large) contribution towards future development please consider making a <a href="%1$s" title="%2$s">%2$s</a>.', 'jquery-colorbox'), 'http://www.techotronic.de/index.php/donate/', __('donation','jquery-colorbox') ) ?></p>
171	+
172	+ <p class="submit">
173	+ <input type="submit" name="jquery-colorbox-submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
174	+ </p>
175	+
176	+ </form>
177	+ </div>
178	+
179	+ <?php
180	+ }//renderSettingsPage()
181	+
182	+ /**
183	+ * Validate the settings sent from the settings page
184	+ *
185	+ * @param $colorboxSettings settings to be validated
186	+ * @return valid settings
187	+ */
188	+ function validateSettings( $colorboxSettings ) {
189	+ if ( empty($colorboxSettings['colorboxTheme']) \|\| empty($this->colorboxThemes[$colorboxSettings['colorboxTheme']]) )
190	+ $colorboxSettings['colorboxTheme'] = $this->colorboxDefaultSettings['colorboxTheme'];
191	+
192	+ return $colorboxSettings;
193	+ }// validateSettings()
194	+
195	+ }// class jQueryColorbox()
196	+ ?><?php
197	+ /**
198	+ * initialize plugin
199	+ */
200	+ function jQueryColorbox() {
201	+ global $jQueryColorbox;
202	+ $jQueryColorbox = new jQueryColorbox();
203	+ }//jQueryColorbox()
204	+ add_action( 'init', 'jQueryColorbox', 7 );
205	+
206	+ /**
207	+ * ugly way to group images for Colorbox.
208	+ *
209	+ * function is called for every page or post rendering.
210	+ *
211	+ * @param the_content or the_excerpt
212	+ * @return replaced content or excerpt
213	+ */
214	+ //TODO: get rid of this...
215	+ function addColorboxGroupIdToImages ($content) {
216	+ global $post;
217	+ $pattern = "/<img(.?)class=('\|\")([A-Za-z0-9 \/_\.\~\:-]?)('\|\")([^\>]*?)>/i";
218	+ $replacement = '<img$1class=$2$3 colorbox-'.$post->ID.'$4$5>';
219	+ $content = preg_replace($pattern, $replacement, $content);
220	+ return $content;
221	+ }//addRefToLinks()
222	+ ?>

js/jquery.colorbox-min.js ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ /* ColorBox v1.3.5 - a full featured, light-weight, customizable lightbox based on jQuery 1.3 */
2	+ (function(c){function r(b,d){d=d==="x"?m.width():m.height();return typeof b==="string"?Math.round(b.match(/%/)?d/100parseInt(b,10):parseInt(b,10)):b}function N(b){b=c.isFunction(b)?b.call(i):b;return a.photo\|\|b.match(/\.(gif\|png\|jpg\|jpeg\|bmp)(?:\?([^#]))?(?:#(\.))?$/i)}function Y(){for(var b in a)if(c.isFunction(a[b])&&b.substring(0,2)!=="on")a[b]=a[b].call(i)}function Z(b){i=b;a=c(i).data(q);Y();var d=a.rel\|\|i.rel;if(d&&d!=="nofollow"){h=c(".cboxElement").filter(function(){return(c(this).data(q).rel\|\| this.rel)===d});j=h.index(i);if(j<0){h=h.add(i);j=h.length-1}}else{h=c(i);j=0}if(!C){D=C=n;O=i;O.blur();c().bind("keydown.cbox_close",function(e){if(e.keyCode===27){e.preventDefault();f.close()}}).bind("keydown.cbox_arrows",function(e){if(h.length>1)if(e.keyCode===37){e.preventDefault();E.click()}else if(e.keyCode===39){e.preventDefault();F.click()}});a.overlayClose&&s.css({cursor:"pointer"}).one("click",f.close);c.event.trigger(aa);a.onOpen&&a.onOpen.call(i);s.css({opacity:a.opacity}).show();a.w= r(a.initialWidth,"x");a.h=r(a.initialHeight,"y");f.position(0);P&&m.bind("resize.cboxie6 scroll.cboxie6",function(){s.css({width:m.width(),height:m.height(),top:m.scrollTop(),left:m.scrollLeft()})}).trigger("scroll.cboxie6")}Q.add(E).add(F).add(t).add(H).hide();R.html(a.close).show();f.slideshow();f.load()}var q="colorbox",x="hover",n=true,f,y=!c.support.opacity,P=y&&!window.XMLHttpRequest,aa="cbox_open",I="cbox_load",S="cbox_complete",T="resize.cbox_resize",s,k,u,p,U,V,W,X,h,m,l,J,K,L,H,Q,t,F,E, R,z,A,v,w,i,O,j,a,C,D,$={transition:"elastic",speed:350,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:"400",initialHeight:"400",maxWidth:false,maxHeight:false,scalePhotos:n,scrolling:n,inline:false,html:false,iframe:false,photo:false,href:false,title:false,rel:false,opacity:0.9,preloading:n,current:"image {current} of {total}",previous:"previous",next:"next",close:"close",open:false,overlayClose:n,slideshow:false,slideshowAuto:n,slideshowSpeed:2500,slideshowStart:"start slideshow", slideshowStop:"stop slideshow",onOpen:false,onLoad:false,onComplete:false,onCleanup:false,onClosed:false};f=c.fn.colorbox=function(b,d){var e=this;if(!e.length)if(e.selector===""){e=c(e);b.open=n}else return this;e.each(function(){var g=c.extend({},c(this).data(q)?c(this).data(q):$,b);c(this).data(q,g).addClass("cboxElement");if(d)c(this).data(q).onComplete=d});b&&b.open&&Z(e);return this};f.init=function(){function b(d){return c('<div id="cbox'+d+'"/>')}m=c(window);k=c('<div id="colorbox"/>');s= b("Overlay").hide();u=b("Wrapper");p=b("Content").append(l=b("LoadedContent").css({width:0,height:0}),K=b("LoadingOverlay"),L=b("LoadingGraphic"),H=b("Title"),Q=b("Current"),t=b("Slideshow"),F=b("Next"),E=b("Previous"),R=b("Close"));u.append(c("<div/>").append(b("TopLeft"),U=b("TopCenter"),b("TopRight")),c("<div/>").append(V=b("MiddleLeft"),p,W=b("MiddleRight")),c("<div/>").append(b("BottomLeft"),X=b("BottomCenter"),b("BottomRight"))).children().children().css({"float":"left"});J=c("<div style='position:absolute; top:0; left:0; width:9999px; height:0;'/>"); c("body").prepend(s,k.append(u,J));if(y){k.addClass("cboxIE");P&&s.css("position","absolute")}p.children().addClass(x).mouseover(function(){c(this).addClass(x)}).mouseout(function(){c(this).removeClass(x)});z=U.height()+X.height()+p.outerHeight(n)-p.height();A=V.width()+W.width()+p.outerWidth(n)-p.width();v=l.outerHeight(n);w=l.outerWidth(n);k.css({"padding-bottom":z,"padding-right":A}).hide();F.click(f.next);E.click(f.prev);R.click(f.close);p.children().removeClass(x);c(".cboxElement").live("click", function(d){if(d.button!==0&&typeof d.button!=="undefined")return n;else{Z(this);return false}})};f.position=function(b,d){function e(B){U[0].style.width=X[0].style.width=p[0].style.width=B.style.width;L[0].style.height=K[0].style.height=p[0].style.height=V[0].style.height=W[0].style.height=B.style.height}var g=m.height();g=Math.max(g-a.h-v-z,0)/2+m.scrollTop();var o=Math.max(document.documentElement.clientWidth-a.w-w-A,0)/2+m.scrollLeft();b=k.width()===a.w+w&&k.height()===a.h+v?0:b;u[0].style.width= u[0].style.height="9999px";k.dequeue().animate({width:a.w+w,height:a.h+v,top:g,left:o},{duration:b,complete:function(){e(this);D=false;u[0].style.width=a.w+w+A+"px";u[0].style.height=a.h+v+z+"px";d&&d()},step:function(){e(this)}})};f.resize=function(b){function d(){a.w=a.w\|\|l.width();a.w=a.mw&&a.mw<a.w?a.mw:a.w;return a.w}function e(){a.h=a.h\|\|l.height();a.h=a.mh&&a.mh<a.h?a.mh:a.h;return a.h}function g(G){f.position(G,function(){if(C){if(y){B&&l.fadeIn(100);k[0].style.removeAttribute("filter")}if(a.iframe)l.append("<iframe id='cboxIframe'"+ (a.scrolling?" ":"scrolling='no'")+" name='iframe_"+(new Date).getTime()+"' frameborder=0 src='"+(a.href\|\|i.href)+"' "+(y?"allowtransparency='true'":"")+" />");l.show();H.html(a.title\|\|i.title);H.show();if(h.length>1){Q.html(a.current.replace(/\{current\}/,j+1).replace(/\{total\}/,h.length)).show();F.html(a.next).show();E.html(a.previous).show();a.slideshow&&t.show()}K.hide();L.hide();c.event.trigger(S);a.onComplete&&a.onComplete.call(i);a.transition==="fade"&&k.fadeTo(M,1,function(){y&&k[0].style.removeAttribute("filter")}); m.bind(T,function(){f.position(0)})}})}if(C){var o,B,M=a.transition==="none"?0:a.speed;m.unbind(T);if(b){l.remove();l=c('<div id="cboxLoadedContent"/>').html(b);l.hide().appendTo(J).css({width:d(),overflow:a.scrolling?"auto":"hidden"}).css({height:e()}).prependTo(p);c("#cboxPhoto").css({cssFloat:"none"});P&&c("select:not(#colorbox select)").filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one("cbox_cleanup",function(){this.style.visibility="inherit"});a.transition=== "fade"&&k.fadeTo(M,0,function(){g(0)})\|\|g(M);if(a.preloading&&h.length>1){b=j>0?h[j-1]:h[h.length-1];o=j<h.length-1?h[j+1]:h[0];o=c(o).data(q).href\|\|o.href;b=c(b).data(q).href\|\|b.href;N(o)&&c("<img />").attr("src",o);N(b)&&c("<img />").attr("src",b)}}else setTimeout(function(){var G=l.wrapInner("<div style='overflow:auto'></div>").children();a.h=G.height();l.css({height:a.h});G.replaceWith(G.children());f.position(M)},1)}};f.load=function(){var b,d,e,g=f.resize;D=n;i=h[j];a=c(i).data(q);Y();c.event.trigger(I); a.onLoad&&a.onLoad.call(i);a.h=a.height?r(a.height,"y")-v-z:a.innerHeight?r(a.innerHeight,"y"):false;a.w=a.width?r(a.width,"x")-w-A:a.innerWidth?r(a.innerWidth,"x"):false;a.mw=a.w;a.mh=a.h;if(a.maxWidth){a.mw=r(a.maxWidth,"x")-w-A;a.mw=a.w&&a.w<a.mw?a.w:a.mw}if(a.maxHeight){a.mh=r(a.maxHeight,"y")-v-z;a.mh=a.h&&a.h<a.mh?a.h:a.mh}b=a.href\|\|c(i).attr("href");K.show();L.show();if(a.inline){c('<div id="cboxInlineTemp" />').hide().insertBefore(c(b)[0]).bind(I+" cbox_cleanup",function(){c(this).replaceWith(l.children())}); g(c(b))}else if(a.iframe)g(" ");else if(a.html)g(a.html);else if(N(b)){d=new Image;d.onload=function(){var o;d.onload=null;d.id="cboxPhoto";c(d).css({margin:"auto",border:"none",display:"block",cssFloat:"left"});if(a.scalePhotos){e=function(){d.height-=d.heighto;d.width-=d.width*o};if(a.mw&&d.width>a.mw){o=(d.width-a.mw)/d.width;e()}if(a.mh&&d.height>a.mh){o=(d.height-a.mh)/d.height;e()}}if(a.h)d.style.marginTop=Math.max(a.h-d.height,0)/2+"px";g(d);h.length>1&&c(d).css({cursor:"pointer"}).click(f.next); if(y)d.style.msInterpolationMode="bicubic"};d.src=b}else c("<div />").appendTo(J).load(b,function(o,B){B==="success"?g(this):g(c("<p>Request unsuccessful.</p>"))})};f.next=function(){if(!D){j=j<h.length-1?j+1:0;f.load()}};f.prev=function(){if(!D){j=j>0?j-1:h.length-1;f.load()}};f.slideshow=function(){function b(){t.text(a.slideshowStop).bind(S,function(){e=setTimeout(f.next,a.slideshowSpeed)}).bind(I,function(){clearTimeout(e)}).one("click",function(){d();c(this).removeClass(x)});k.removeClass(g+ "off").addClass(g+"on")}var d,e,g="cboxSlideshow_";t.bind("cbox_closed",function(){t.unbind();clearTimeout(e);k.removeClass(g+"off "+g+"on")});d=function(){clearTimeout(e);t.text(a.slideshowStart).unbind(S+" "+I).one("click",function(){b();e=setTimeout(f.next,a.slideshowSpeed);c(this).removeClass(x)});k.removeClass(g+"on").addClass(g+"off")};if(a.slideshow&&h.length>1)a.slideshowAuto?b():d()};f.close=function(){c.event.trigger("cbox_cleanup");a.onCleanup&&a.onCleanup.call(i);C=false;c().unbind("keydown.cbox_close keydown.cbox_arrows"); m.unbind(T+" resize.cboxie6 scroll.cboxie6");s.css({cursor:"auto"}).fadeOut("fast");k.stop(n,false).fadeOut("fast",function(){l.remove();k.css({opacity:1});try{O.focus()}catch(b){}c.event.trigger("cbox_closed");a.onClosed&&a.onClosed.call(i)})};f.element=function(){return c(i)};f.settings=$;c(f.init)})(jQuery);

localization/jquery-colorbox-de_DE.mo ADDED Viewed

Binary file

localization/jquery-colorbox-de_DE.po ADDED Viewed

	@@ -0,0 +1,85 @@


1	+ msgid ""
2	+ msgstr ""
3	+ "Project-Id-Version: jQuery-Colorbox\n"
4	+ "Report-Msgid-Bugs-To: \n"
5	+ "POT-Creation-Date: 2009-12-28 01:23+0100\n"
6	+ "PO-Revision-Date: \n"
7	+ "Last-Translator: \n"
8	+ "Language-Team: \n"
9	+ "MIME-Version: 1.0\n"
10	+ "Content-Type: text/plain; charset=UTF-8\n"
11	+ "Content-Transfer-Encoding: 8bit\n"
12	+ "X-Poedit-Language: English\n"
13	+ "X-Poedit-KeywordsList: _e;__\n"
14	+ "X-Poedit-Basepath: ..\n"
15	+ "X-Poedit-SearchPath-0: .\n"
16	+
17	+ #: jquery-colorbox.php:46
18	+ msgid "Theme #1"
19	+ msgstr ""
20	+
21	+ #: jquery-colorbox.php:47
22	+ msgid "Theme #2"
23	+ msgstr ""
24	+
25	+ #: jquery-colorbox.php:48
26	+ msgid "Theme #3"
27	+ msgstr ""
28	+
29	+ #: jquery-colorbox.php:49
30	+ msgid "Theme #4"
31	+ msgstr ""
32	+
33	+ #: jquery-colorbox.php:50
34	+ msgid "Theme #5"
35	+ msgstr ""
36	+
37	+ #: jquery-colorbox.php:78
38	+ msgid "jQuery Colorbox"
39	+ msgstr ""
40	+
41	+ #: jquery-colorbox.php:91
42	+ msgid "Settings"
43	+ msgstr "Einstellungen"
44	+
45	+ #: jquery-colorbox.php:145
46	+ msgid "jQuery Colorbox Settings"
47	+ msgstr "jQuery Colorbox Einstellungen"
48	+
49	+ #: jquery-colorbox.php:151
50	+ msgid "Select the theme you want to use on your blog."
51	+ msgstr "Wähle das Theme aus, das Du auf Deinem Blog benutzen möchtest."
52	+
53	+ #: jquery-colorbox.php:155
54	+ msgid "Theme"
55	+ msgstr ""
56	+
57	+ #: jquery-colorbox.php:170
58	+ #, php-format
59	+ msgid "If you would like to make a small (or large) contribution towards future development please consider making a <a href=\"%1$s\" title=\"%2$s\">%2$s</a>."
60	+ msgstr "Wenn Du eine kleine (oder grosse) <a href=\"%1$s\" title=\"%2$s\">%2$s</a> für die Weiterentwicklung möchtest, kannst Du das per PayPal tun."
61	+
62	+ #: jquery-colorbox.php:170
63	+ msgid "donation"
64	+ msgstr "Spende"
65	+
66	+ #: jquery-colorbox.php:173
67	+ msgid "Save Changes"
68	+ msgstr "Änderungen speichern"
69	+
70	+ #~ msgid "Automate Colorbox:"
71	+ #~ msgstr "Colorbox automatisieren:"
72	+ #~ msgid ""
73	+ #~ "Automatically add rel='colorbox[post-ID]' to images in posts. All images "
74	+ #~ "in a post are grouped into a colorbox set."
75	+ #~ msgstr ""
76	+ #~ "Automatisch rel='colorbox[post-ID]' für Bilder in Beiträgen und "
77	+ #~ "Seite einfügen. Alle Bilder innerhalb eines Beitrags oder einer "
78	+ #~ "Seite werden automatisch in ein Set gruppiert."
79	+ #~ msgid "Enable Automatic"
80	+ #~ msgstr "Automatismus aktivieren"
81	+ #~ msgid "You can disable the colorbox effect from the Wordpress editor."
82	+ #~ msgstr "Du kannst den Colorbox Effekt im Wordpress Editor abschalten."
83	+ #~ msgid "Disable Colorbox"
84	+ #~ msgstr "Colorbox abschalten"
85	+

localization/jquery-colorbox-en_EN.mo ADDED Viewed

Binary file

localization/jquery-colorbox-en_EN.po ADDED Viewed

	@@ -0,0 +1,69 @@


1	+ msgid ""
2	+ msgstr ""
3	+ "Project-Id-Version: jQuery-Colorbox\n"
4	+ "Report-Msgid-Bugs-To: \n"
5	+ "POT-Creation-Date: 2009-12-28 01:23+0100\n"
6	+ "PO-Revision-Date: \n"
7	+ "Last-Translator: \n"
8	+ "Language-Team: \n"
9	+ "MIME-Version: 1.0\n"
10	+ "Content-Type: text/plain; charset=UTF-8\n"
11	+ "Content-Transfer-Encoding: 8bit\n"
12	+ "X-Poedit-Language: English\n"
13	+ "X-Poedit-KeywordsList: _e;__\n"
14	+ "X-Poedit-Basepath: ..\n"
15	+ "X-Poedit-SearchPath-0: .\n"
16	+
17	+ #: jquery-colorbox.php:46
18	+ msgid "Theme #1"
19	+ msgstr ""
20	+
21	+ #: jquery-colorbox.php:47
22	+ msgid "Theme #2"
23	+ msgstr ""
24	+
25	+ #: jquery-colorbox.php:48
26	+ msgid "Theme #3"
27	+ msgstr ""
28	+
29	+ #: jquery-colorbox.php:49
30	+ msgid "Theme #4"
31	+ msgstr ""
32	+
33	+ #: jquery-colorbox.php:50
34	+ msgid "Theme #5"
35	+ msgstr ""
36	+
37	+ #: jquery-colorbox.php:78
38	+ msgid "jQuery Colorbox"
39	+ msgstr ""
40	+
41	+ #: jquery-colorbox.php:91
42	+ msgid "Settings"
43	+ msgstr ""
44	+
45	+ #: jquery-colorbox.php:145
46	+ msgid "jQuery Colorbox Settings"
47	+ msgstr ""
48	+
49	+ #: jquery-colorbox.php:151
50	+ msgid "Select the theme you want to use on your blog."
51	+ msgstr ""
52	+
53	+ #: jquery-colorbox.php:155
54	+ msgid "Theme"
55	+ msgstr ""
56	+
57	+ #: jquery-colorbox.php:170
58	+ #, php-format
59	+ msgid "If you would like to make a small (or large) contribution towards future development please consider making a <a href=\"%1$s\" title=\"%2$s\">%2$s</a>."
60	+ msgstr ""
61	+
62	+ #: jquery-colorbox.php:170
63	+ msgid "donation"
64	+ msgstr ""
65	+
66	+ #: jquery-colorbox.php:173
67	+ msgid "Save Changes"
68	+ msgstr ""
69	+

readme.txt ADDED Viewed

	@@ -0,0 +1,56 @@


1	+ === Plugin Name ===
2	+ Contributors: techotronic
3	+ Donate link: http://www.techotronic.de/index.php/donate/
4	+ Tags: jquery, colorbox, lightbox, images, gallery, javascript, overlay
5	+ Requires at least: 2.8.5
6	+ Tested up to: 2.8.6
7	+ Stable tag: 1.1
8	+
9	+ Automatically adds Colorbox/Lightbox functionality to all images on the blog. Images are grouped by post.
10	+
11	+ == Description ==
12	+
13	+ Yet another Colorbox plugin for Wordpress.
14	+
15	+ All images on the blog are displayed in a layer when clicked. Images are grouped as galleries when linked in the same blogpost.
16	+
17	+ Includes <a href="http://colorpowered.com/colorbox/">ColorBox</a> 1.3.5 jQuery plugin from Jack Moore. Colorbox is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.
18	+ jQuery Colorbox uses the jQuery library bundled with Wordpress.
19	+
20	+ Localization
21	+
22	+ * English (en_EN)
23	+ * German (de_DE)
24	+
25	+ == Demo ==
26	+
27	+ Click on any image on [My Blog](http://www.techotronic.de/) to see jQuery Colorbox in action.
28	+
29	+ == Installation ==
30	+
31	+ ###Updgrading From A Previous Version###
32	+
33	+ To upgrade from a previous version of this plugin, delete the entire folder and files from the previous version of the plugin and then follow the installation instructions below.
34	+
35	+ ###Installing The Plugin###
36	+
37	+ Extract all files from the ZIP file, making sure to keep the file structure intact, and then upload it to `/wp-content/plugins/`. Then just visit your admin area and activate the plugin. That's it!
38	+
39	+ ###Configuring The Plugin###
40	+
41	+ Go to the settings page and choose one of the five themes bundled with the plugin.
42	+
43	+ See Also: ["Installing Plugins" article on the WP Codex](http://codex.wordpress.org/Managing_Plugins#Installing_Plugins)
44	+
45	+ == Frequently Asked Questions ==
46	+ * How does jQuery Colorbox group images?
47	+
48	+ When rendering content, a special colorbox-class is added to linked images. The class is then passed to colorbox.
49	+
50	+ == Changelog ==
51	+
52	+ = 1.1 =
53	+ * fixes critical bug which would break rendering the blog. Sorry, was not aware that the plugin would be listed before I tagged the files as 1.0 in subversion...
54	+
55	+ = 1.0 =
56	+ * Initial release.

themes/theme1/colorbox.css ADDED Viewed

	@@ -0,0 +1,62 @@


1	+ /*
2	+ ColorBox Core Style
3	+ The following rules are the styles that are consistant between themes.
4	+ Avoid changing this area to maintain compatability with future versions of ColorBox.
5	+ */
6	+ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
7	+ #cboxOverlay{position:fixed; width:100%; height:100%;}
8	+ #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9	+ #cboxContent{position:relative; overflow:hidden;}
10	+ #cboxLoadedContent{overflow:auto;}
11	+ #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
12	+ #cboxTitle{margin:0;}
13	+ #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
14	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
15	+
16	+ /*
17	+ Example user style
18	+ The following rules are ordered and tabbed in a way that represents the
19	+ order/nesting of the generated HTML, so that the structure easier to understand.
20	+ */
21	+ #cboxOverlay{background:url(images/overlay.png) 0 0 repeat;}
22	+ #colorbox{}
23	+ #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) -100px 0 no-repeat;}
24	+ #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) -129px 0 no-repeat;}
25	+ #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) -100px -29px no-repeat;}
26	+ #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) -129px -29px no-repeat;}
27	+ #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
28	+ #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
29	+ #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
30	+ #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
31	+ #cboxContent{background:#fff;}
32	+ #cboxLoadedContent{margin-bottom:28px;}
33	+ #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
34	+ #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
35	+ #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
36	+ #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
37	+ #cboxPrevious.hover{background-position:-75px -25px;}
38	+ #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
39	+ #cboxNext.hover{background-position:-50px -25px;}
40	+ #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
41	+ #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
42	+ #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
43	+ #cboxClose.hover{background-position:-25px -25px;}
44	+
45	+ /*
46	+ The following fixes png-transparency for IE6.
47	+ It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
48	+
49	+ Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
50	+ Colorbox preloads navigation hover classes to account for this.
51	+
52	+ !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
53	+ while regular CSS background images are relative to the CSS document.
54	+ */
55	+ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
56	+ .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
57	+ .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
58	+ .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
59	+ .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
60	+ .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
61	+ .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
62	+ .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

themes/theme1/images/border.png ADDED Viewed

Binary file

themes/theme1/images/controls.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderBottomCenter.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderBottomLeft.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderBottomRight.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderMiddleLeft.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderMiddleRight.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderTopCenter.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderTopLeft.png ADDED Viewed

Binary file

themes/theme1/images/internet_explorer/borderTopRight.png ADDED Viewed

Binary file

themes/theme1/images/loading.gif ADDED Viewed

Binary file

themes/theme1/images/loading_background.png ADDED Viewed

Binary file

themes/theme1/images/overlay.png ADDED Viewed

Binary file

themes/theme1/index.html ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	+ <html xmlns="http://www.w3.org/1999/xhtml">
3	+ <head>
4	+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5	+ <title>ColorBox Examples</title>
6	+ <style type="text/css">
7	+ body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
8	+ a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
9	+ h2{font-size:13px; margin:15px 0 0 0;}
10	+ </style>
11	+ <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
12	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13	+ <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
14	+ <script type="text/javascript">
15	+ $(document).ready(function(){
16	+ //Examples of how to assign the ColorBox event to elements
17	+ $("a[rel='example1']").colorbox();
18	+ $("a[rel='example2']").colorbox({transition:"fade"});
19	+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
20	+ $("a[rel='example4']").colorbox({slideshow:true});
21	+ $(".example5").colorbox();
22	+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
23	+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
24	+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
25	+ $(".example9").colorbox({
26	+ onOpen:function(){ alert('onOpen: colorbox is about to open'); },
27	+ onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
28	+ onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
29	+ onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
30	+ onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
31	+ });
32	+
33	+ //Example of preserving a JavaScript event for inline calls.
34	+ $("#click").click(function(){
35	+ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
36	+ return false;
37	+ });
38	+ });
39	+ </script>
40	+ </head>
41	+ <body>
42	+ <h1>ColorBox Demonstration</h1>
43	+ <h2>Elastic Transition</h2>
44	+ <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
45	+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
46	+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
47	+
48	+ <h2>Fade Transition</h2>
49	+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
50	+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
51	+ <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
52	+
53	+ <h2>No Transition + fixed width and height (75% of screen size)</h2>
54	+ <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
55	+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
56	+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
57	+
58	+ <h2>Slideshow</h2>
59	+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
60	+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
61	+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
62	+
63	+ <h2>Other Content Types</h2>
64	+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
65	+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
66	+ <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
67	+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
68	+ <p><a class='example8' href="#">Inline HTML</a></p>
69	+
70	+ <h2>Demonstration of using callbacks</h2>
71	+ <p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
72	+
73	+ <!-- This contains the hidden content for inline calls -->
74	+ <div style='display:none'>
75	+ <div id='inline_example1' style='padding:10px; background:#fff;'>
76	+ <p><strong>This content comes from a hidden element on this page.</strong></p>
77	+ <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
78	+ <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
79	+
80	+ <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
81	+ <p>Updating Content Example:<br />
82	+ <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
83	+ </div>
84	+ </div>
85	+ </body>
86	+ </html>

themes/theme2/colorbox.css ADDED Viewed

	@@ -0,0 +1,41 @@


1	+ /*
2	+ ColorBox Core Style
3	+ The following rules are the styles that are consistant between themes.
4	+ Avoid changing this area to maintain compatability with future versions of ColorBox.
5	+ */
6	+ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
7	+ #cboxOverlay{position:fixed; width:100%; height:100%;}
8	+ #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9	+ #cboxContent{position:relative; overflow:visible;}
10	+ #cboxLoadedContent{overflow:auto;}
11	+ #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
12	+ #cboxTitle{margin:0;}
13	+ #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
14	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
15	+
16	+ /*
17	+ ColorBox example user style
18	+ The following rules are ordered and tabbed in a way that represents the
19	+ order/nesting of the generated HTML, so that the structure easier to understand.
20	+ */
21	+ #cboxOverlay{background:#fff;}
22	+
23	+ #colorbox{}
24	+ #cboxContent{margin-top:32px;}
25	+ #cboxLoadedContent{background:#000; padding:1px;}
26	+ #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
27	+ #cboxLoadingOverlay{background:#000;}
28	+ #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
29	+ #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
30	+ #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) 0 0 no-repeat;}
31	+ #cboxPrevious{background-position:0px 0px; right:44px;}
32	+ #cboxPrevious.hover{background-position:0px -25px;}
33	+ #cboxNext{background-position:-25px 0px; right:22px;}
34	+ #cboxNext.hover{background-position:-25px -25px;}
35	+ #cboxClose{background-position:-50px 0px; right:0;}
36	+ #cboxClose.hover{background-position:-50px -25px;}
37	+ .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
38	+ .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
39	+ .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
40	+ .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
41	+ .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}

themes/theme2/images/controls.png ADDED Viewed

Binary file

themes/theme2/images/loading.gif ADDED Viewed

Binary file

themes/theme2/index.html ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	+ <html xmlns="http://www.w3.org/1999/xhtml">
3	+ <head>
4	+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5	+ <title>ColorBox Examples</title>
6	+ <style type="text/css">
7	+ body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
8	+ a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
9	+ h2{font-size:13px; margin:15px 0 0 0;}
10	+ </style>
11	+ <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
12	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13	+ <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
14	+ <script type="text/javascript">
15	+ $(document).ready(function(){
16	+ //Examples of how to assign the ColorBox event to elements
17	+ $("a[rel='example1']").colorbox();
18	+ $("a[rel='example2']").colorbox({transition:"fade"});
19	+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
20	+ $("a[rel='example4']").colorbox({slideshow:true});
21	+ $(".example5").colorbox();
22	+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
23	+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
24	+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
25	+ $(".example9").colorbox({
26	+ onOpen:function(){ alert('onOpen: colorbox is about to open'); },
27	+ onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
28	+ onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
29	+ onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
30	+ onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
31	+ });
32	+
33	+ //Example of preserving a JavaScript event for inline calls.
34	+ $("#click").click(function(){
35	+ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
36	+ return false;
37	+ });
38	+ });
39	+ </script>
40	+ </head>
41	+ <body>
42	+ <h1>ColorBox Demonstration</h1>
43	+ <h2>Elastic Transition</h2>
44	+ <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
45	+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
46	+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
47	+
48	+ <h2>Fade Transition</h2>
49	+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
50	+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
51	+ <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
52	+
53	+ <h2>No Transition + fixed width and height (75% of screen size)</h2>
54	+ <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
55	+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
56	+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
57	+
58	+ <h2>Slideshow</h2>
59	+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
60	+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
61	+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
62	+
63	+ <h2>Other Content Types</h2>
64	+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
65	+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
66	+ <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
67	+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
68	+ <p><a class='example8' href="#">Inline HTML</a></p>
69	+
70	+ <h2>Demonstration of using callbacks</h2>
71	+ <p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
72	+
73	+ <!-- This contains the hidden content for inline calls -->
74	+ <div style='display:none'>
75	+ <div id='inline_example1' style='padding:10px; background:#fff;'>
76	+ <p><strong>This content comes from a hidden element on this page.</strong></p>
77	+ <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
78	+ <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
79	+
80	+ <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
81	+ <p>Updating Content Example:<br />
82	+ <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
83	+ </div>
84	+ </div>
85	+ </body>
86	+ </html>

themes/theme3/colorbox.css ADDED Viewed

	@@ -0,0 +1,36 @@


1	+ /*
2	+ ColorBox Core Style
3	+ The following rules are the styles that are consistant between themes.
4	+ Avoid changing this area to maintain compatability with future versions of ColorBox.
5	+ */
6	+ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
7	+ #cboxOverlay{position:fixed; width:100%; height:100%;}
8	+ #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9	+ #cboxContent{position:relative;}
10	+ #cboxLoadedContent{overflow:auto;}
11	+ #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
12	+ #cboxTitle{margin:0;}
13	+ #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
14	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
15	+
16	+ /*
17	+ ColorBox example user style
18	+ The following rules are ordered and tabbed in a way that represents the
19	+ order/nesting of the generated HTML, so that the structure easier to understand.
20	+ */
21	+ #cboxOverlay{background:#000;}
22	+
23	+ #colorbox{}
24	+ #cboxContent{margin-top:20px;}
25	+ #cboxLoadedContent{background:#000; padding:5px;}
26	+ #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
27	+ #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
28	+ #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
29	+ #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
30	+ #cboxPrevious.hover{background-position:bottom left;}
31	+ #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
32	+ #cboxNext.hover{background-position:bottom right;}
33	+ #cboxLoadingOverlay{background:#000;}
34	+ #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
35	+ #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
36	+ #cboxClose.hover{background-position:bottom center;}

themes/theme3/images/controls.png ADDED Viewed

Binary file

themes/theme3/images/loading.gif ADDED Viewed

Binary file

themes/theme3/index.html ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	+ <html xmlns="http://www.w3.org/1999/xhtml">
3	+ <head>
4	+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5	+ <title>ColorBox Examples</title>
6	+ <style type="text/css">
7	+ body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
8	+ a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
9	+ h2{font-size:13px; margin:15px 0 0 0;}
10	+ </style>
11	+ <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
12	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13	+ <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
14	+ <script type="text/javascript">
15	+ $(document).ready(function(){
16	+ //Examples of how to assign the ColorBox event to elements
17	+ $("a[rel='example1']").colorbox();
18	+ $("a[rel='example2']").colorbox({transition:"fade"});
19	+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
20	+ $("a[rel='example4']").colorbox({slideshow:true});
21	+ $(".example5").colorbox();
22	+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
23	+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
24	+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
25	+ $(".example9").colorbox({
26	+ onOpen:function(){ alert('onOpen: colorbox is about to open'); },
27	+ onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
28	+ onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
29	+ onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
30	+ onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
31	+ });
32	+
33	+ //Example of preserving a JavaScript event for inline calls.
34	+ $("#click").click(function(){
35	+ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
36	+ return false;
37	+ });
38	+ });
39	+ </script>
40	+ </head>
41	+ <body>
42	+ <h1>ColorBox Demonstration</h1>
43	+ <h2>Elastic Transition</h2>
44	+ <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
45	+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
46	+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
47	+
48	+ <h2>Fade Transition</h2>
49	+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
50	+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
51	+ <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
52	+
53	+ <h2>No Transition + fixed width and height (75% of screen size)</h2>
54	+ <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
55	+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
56	+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
57	+
58	+ <h2>Slideshow</h2>
59	+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
60	+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
61	+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
62	+
63	+ <h2>Other Content Types</h2>
64	+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
65	+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
66	+ <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
67	+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
68	+ <p><a class='example8' href="#">Inline HTML</a></p>
69	+
70	+ <h2>Demonstration of using callbacks</h2>
71	+ <p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
72	+
73	+ <!-- This contains the hidden content for inline calls -->
74	+ <div style='display:none'>
75	+ <div id='inline_example1' style='padding:10px; background:#fff;'>
76	+ <p><strong>This content comes from a hidden element on this page.</strong></p>
77	+ <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
78	+ <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
79	+
80	+ <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
81	+ <p>Updating Content Example:<br />
82	+ <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
83	+ </div>
84	+ </div>
85	+ </body>
86	+ </html>

themes/theme4/colorbox.css ADDED Viewed

	@@ -0,0 +1,59 @@


1	+ /*
2	+ ColorBox Core Style
3	+ The following rules are the styles that are consistant between themes.
4	+ Avoid changing this area to maintain compatability with future versions of ColorBox.
5	+ */
6	+ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
7	+ #cboxOverlay{position:fixed; width:100%; height:100%;}
8	+ #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9	+ #cboxContent{position:relative; overflow:hidden;}
10	+ #cboxLoadedContent{overflow:auto;}
11	+ #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
12	+ #cboxTitle{margin:0;}
13	+ #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
14	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
15	+
16	+ /*
17	+ ColorBox example user style
18	+ The following rules are ordered and tabbed in a way that represents the
19	+ order/nesting of the generated HTML, so that the structure easier to understand.
20	+ */
21	+ #cboxOverlay{background:#fff;}
22	+
23	+ #colorBox{}
24	+ #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) 0 0 no-repeat;}
25	+ #cboxTopCenter{height:25px; background:url(images/border1.png) 0 -50px repeat-x;}
26	+ #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) -25px 0 no-repeat;}
27	+ #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) 0 -25px no-repeat;}
28	+ #cboxBottomCenter{height:25px; background:url(images/border1.png) 0 -75px repeat-x;}
29	+ #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) -25px -25px no-repeat;}
30	+ #cboxMiddleLeft{width:25px; background:url(images/border2.png) 0 0 repeat-y;}
31	+ #cboxMiddleRight{width:25px; background:url(images/border2.png) -25px 0 repeat-y;}
32	+ #cboxContent{background:#fff;}
33	+ #cboxLoadedContent{margin-bottom:20px;}
34	+ #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
35	+ #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
36	+ #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
37	+ #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
38	+ #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
39	+ #cboxLoadingOverlay{background:url(images/loading.gif) 5px 5px no-repeat #fff;}
40	+ #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
41	+
42	+ /*
43	+ The following fixes png-transparency for IE6.
44	+ It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
45	+
46	+ Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
47	+ Colorbox preloads navigation hover classes to account for this.
48	+
49	+ !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
50	+ while regular CSS background images are relative to the CSS document.
51	+ */
52	+ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
53	+ .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
54	+ .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
55	+ .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
56	+ .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
57	+ .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
58	+ .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
59	+ .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

themes/theme4/images/border1.png ADDED Viewed

Binary file

themes/theme4/images/border2.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderBottomCenter.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderBottomLeft.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderBottomRight.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderMiddleLeft.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderMiddleRight.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderTopCenter.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderTopLeft.png ADDED Viewed

Binary file

themes/theme4/images/internet_explorer/borderTopRight.png ADDED Viewed

Binary file

themes/theme4/images/loading.gif ADDED Viewed

Binary file

themes/theme4/index.html ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	+ <html xmlns="http://www.w3.org/1999/xhtml">
3	+ <head>
4	+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5	+ <title>ColorBox Examples</title>
6	+ <style type="text/css">
7	+ body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
8	+ a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
9	+ h2{font-size:13px; margin:15px 0 0 0;}
10	+ </style>
11	+ <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
12	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13	+ <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
14	+ <script type="text/javascript">
15	+ $(document).ready(function(){
16	+ //Examples of how to assign the ColorBox event to elements
17	+ $("a[rel='example1']").colorbox();
18	+ $("a[rel='example2']").colorbox({transition:"fade"});
19	+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
20	+ $("a[rel='example4']").colorbox({slideshow:true});
21	+ $(".example5").colorbox();
22	+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
23	+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
24	+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
25	+ $(".example9").colorbox({
26	+ onOpen:function(){ alert('onOpen: colorbox is about to open'); },
27	+ onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
28	+ onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
29	+ onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
30	+ onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
31	+ });
32	+
33	+ //Example of preserving a JavaScript event for inline calls.
34	+ $("#click").click(function(){
35	+ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
36	+ return false;
37	+ });
38	+ });
39	+ </script>
40	+ </head>
41	+ <body>
42	+ <h1>ColorBox Demonstration</h1>
43	+ <h2>Elastic Transition</h2>
44	+ <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
45	+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
46	+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
47	+
48	+ <h2>Fade Transition</h2>
49	+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
50	+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
51	+ <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
52	+
53	+ <h2>No Transition + fixed width and height (75% of screen size)</h2>
54	+ <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
55	+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
56	+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
57	+
58	+ <h2>Slideshow</h2>
59	+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
60	+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
61	+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
62	+
63	+ <h2>Other Content Types</h2>
64	+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
65	+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
66	+ <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
67	+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
68	+ <p><a class='example8' href="#">Inline HTML</a></p>
69	+
70	+ <h2>Demonstration of using callbacks</h2>
71	+ <p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
72	+
73	+ <!-- This contains the hidden content for inline calls -->
74	+ <div style='display:none'>
75	+ <div id='inline_example1' style='padding:10px; background:#fff;'>
76	+ <p><strong>This content comes from a hidden element on this page.</strong></p>
77	+ <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
78	+ <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
79	+
80	+ <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
81	+ <p>Updating Content Example:<br />
82	+ <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
83	+ </div>
84	+ </div>
85	+ </body>
86	+ </html>

themes/theme5/colorbox.css ADDED Viewed

	@@ -0,0 +1,50 @@


1	+ /*
2	+ ColorBox Core Style
3	+ The following rules are the styles that are consistant between themes.
4	+ Avoid changing this area to maintain compatability with future versions of ColorBox.
5	+ */
6	+ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
7	+ #cboxOverlay{position:fixed; width:100%; height:100%;}
8	+ #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9	+ #cboxContent{position:relative; overflow:visible;}
10	+ #cboxLoadedContent{overflow:auto;}
11	+ #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
12	+ #cboxTitle{margin:0;}
13	+ #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
14	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
15	+
16	+ /*
17	+ ColorBox example user style
18	+ The following rules are ordered and tabbed in a way that represents the
19	+ order/nesting of the generated HTML, so that the structure easier to understand.
20	+ */
21	+ #cboxOverlay{background:#000;}
22	+
23	+ #colorbox{}
24	+ #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) 0 0 no-repeat;}
25	+ #cboxTopCenter{height:14px; background:url(images/border.png) top left repeat-x;}
26	+ #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) -36px 0 no-repeat;}
27	+ #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;}
28	+ #cboxBottomCenter{height:43px; background:url(images/border.png) bottom left repeat-x;}
29	+ #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;}
30	+ #cboxMiddleLeft{width:14px; background:url(images/controls.png) -175px 0 repeat-y;}
31	+ #cboxMiddleRight{width:14px; background:url(images/controls.png) -211px 0 repeat-y;}
32	+ #cboxContent{background:#fff;}
33	+ #cboxLoadedContent{margin-bottom:5px;}
34	+ #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
35	+ #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
36	+ #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
37	+ #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
38	+
39	+ #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}
40	+ #cboxPrevious{left:0px; background-position: -51px -25px;}
41	+ #cboxPrevious.hover{background-position:-51px 0px;}
42	+ #cboxNext{left:27px; background-position:-75px -25px;}
43	+ #cboxNext.hover{background-position:-75px 0px;}
44	+ #cboxClose{right:0; background-position:-100px -25px;}
45	+ #cboxClose.hover{background-position:-100px 0px;}
46	+
47	+ .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
48	+ .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
49	+ .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
50	+ .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

themes/theme5/images/border.png ADDED Viewed

Binary file

themes/theme5/images/controls.png ADDED Viewed

Binary file

themes/theme5/images/loading.gif ADDED Viewed

Binary file

themes/theme5/images/loading_background.png ADDED Viewed

Binary file

themes/theme5/index.html ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	+ <html xmlns="http://www.w3.org/1999/xhtml">
3	+ <head>
4	+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5	+ <title>ColorBox Examples</title>
6	+ <style type="text/css">
7	+ body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
8	+ a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
9	+ h2{font-size:13px; margin:15px 0 0 0;}
10	+ </style>
11	+ <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
12	+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
13	+ <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
14	+ <script type="text/javascript">
15	+ $(document).ready(function(){
16	+ //Examples of how to assign the ColorBox event to elements
17	+ $("a[rel='example1']").colorbox();
18	+ $("a[rel='example2']").colorbox({transition:"fade"});
19	+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
20	+ $("a[rel='example4']").colorbox({slideshow:true});
21	+ $(".example5").colorbox();
22	+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
23	+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
24	+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
25	+ $(".example9").colorbox({
26	+ onOpen:function(){ alert('onOpen: colorbox is about to open'); },
27	+ onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
28	+ onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
29	+ onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
30	+ onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
31	+ });
32	+
33	+ //Example of preserving a JavaScript event for inline calls.
34	+ $("#click").click(function(){
35	+ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
36	+ return false;
37	+ });
38	+ });
39	+ </script>
40	+ </head>
41	+ <body>
42	+ <h1>ColorBox Demonstration</h1>
43	+ <h2>Elastic Transition</h2>
44	+ <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
45	+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
46	+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
47	+
48	+ <h2>Fade Transition</h2>
49	+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
50	+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
51	+ <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
52	+
53	+ <h2>No Transition + fixed width and height (75% of screen size)</h2>
54	+ <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
55	+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
56	+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
57	+
58	+ <h2>Slideshow</h2>
59	+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
60	+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
61	+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
62	+
63	+ <h2>Other Content Types</h2>
64	+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
65	+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
66	+ <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
67	+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
68	+ <p><a class='example8' href="#">Inline HTML</a></p>
69	+
70	+ <h2>Demonstration of using callbacks</h2>
71	+ <p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
72	+
73	+ <!-- This contains the hidden content for inline calls -->
74	+ <div style='display:none'>
75	+ <div id='inline_example1' style='padding:10px; background:#fff;'>
76	+ <p><strong>This content comes from a hidden element on this page.</strong></p>
77	+ <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
78	+ <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
79	+
80	+ <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
81	+ <p>Updating Content Example:<br />
82	+ <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
83	+ </div>
84	+ </div>
85	+ </body>
86	+ </html>