WP jQuery Lightbox - Version 1.0

Version Description

Release.

Release Info

Developer	ulfben
Plugin	WP jQuery Lightbox
Version	1.0
Comparing to
See all releases

Version 1.0

Files changed (12) hide show

css/lightbox.css +141 -0
images/blank.gif +0 -0
images/close.gif +0 -0
images/closelabel.gif +0 -0
images/loading.gif +0 -0
images/next.gif +0 -0
images/nextlabel.gif +0 -0
images/prev.gif +0 -0
images/prevlabel.gif +0 -0
jquery.lightbox.js +449 -0
readme.txt +56 -0
wp-jquery-lightbox.php +134 -0

css/lightbox.css ADDED Viewed

	@@ -0,0 +1,141 @@


1	+ #lightbox{
2	+ position: absolute;
3	+ left: 0;
4	+ width: 100%;
5	+ z-index: 100;
6	+ text-align: center;
7	+ line-height: 0;
8	+ }
9	+
10	+ #jqlb_loading{
11	+ height:32px;
12	+ background-image:url('../images/loading.gif');
13	+ background-repeat:no-repeat;
14	+ background-position:center center;
15	+ }
16	+ #jqlb_closelabel{
17	+ height:22px;
18	+ background-image:url('../images/closelabel.gif');
19	+ background-repeat:no-repeat;
20	+ background-position:center center;
21	+ }
22	+
23	+ #lightbox a img{ border: none; }
24	+
25	+ #outerImageContainer{
26	+ position: relative;
27	+ background-color: #fff;
28	+ width: 250px;
29	+ height: 250px;
30	+ margin: 0 auto;
31	+ }
32	+
33	+ #imageContainer{
34	+ padding: 10px;
35	+ }
36	+
37	+ #loading{
38	+ position: absolute;
39	+ top: 40%;
40	+ left: 0%;
41	+ height: 25%;
42	+ width: 100%;
43	+ text-align: center;
44	+ line-height: 0;
45	+ }
46	+ #hoverNav{
47	+ position: absolute;
48	+ top: 0;
49	+ left: 0;
50	+ height: 100%;
51	+ width: 100%;
52	+ z-index: 10;
53	+ }
54	+ #imageContainer>#hoverNav{ left: 0;}
55	+ #hoverNav a{ outline: none;}
56	+
57	+ #prevLink, #nextLink{
58	+ width: 49%;
59	+ height: 100%;
60	+ background: transparent url('../images/blank.gif') no-repeat; /* Trick IE into showing hover */
61	+ display: block;
62	+ }
63	+ #prevLink { left: 0; float: left;}
64	+ #nextLink { right: 0; float: right;}
65	+ #prevLink:hover, #prevLink:visited:hover { background: url('../images/prev.gif') left 50% no-repeat; }
66	+ #nextLink:hover, #nextLink:visited:hover { background: url('../images/next.gif') right 50% no-repeat; }
67	+
68	+ /* START : next / previous text links */
69	+ #nextLinkText, #prevLinkText{
70	+ color: #FF9834;
71	+ font-weight:bold;
72	+ text-decoration: none;
73	+ }
74	+ #nextLinkText{
75	+ padding-left: 20px;
76	+ }
77	+ #prevLinkText{
78	+ padding-right: 20px;
79	+ }
80	+ /* END : next / previous text links */
81	+ /* START : added padding when navbar is on top */
82	+
83	+ .ontop #imageData {
84	+ padding-top: 5px;
85	+ }
86	+
87	+ /* END : added padding when navbar is on top */
88	+
89	+ #imageDataContainer{
90	+ font: 10px Verdana, Helvetica, sans-serif;
91	+ background-color: #fff;
92	+ margin: 0 auto;
93	+ line-height: 1.4em;
94	+ }
95	+
96	+ #imageData{
97	+ padding:0 10px;
98	+ }
99	+ #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
100	+ #imageData #caption{ font-weight: bold; }
101	+ #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
102	+ #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
103	+ #imageData #helpDisplay {clear: left; float: left; display: block; }
104	+
105	+ #overlay{
106	+ position: absolute;
107	+ top: 0;
108	+ left: 0;
109	+ z-index: 90;
110	+ width: 100%;
111	+ height: 500px;
112	+ background-color: #000;
113	+ filter:alpha(opacity=60);
114	+ -moz-opacity: 0.6;
115	+ opacity: 0.6;
116	+ display: none;
117	+ }
118	+
119	+
120	+ .clearfix:after {
121	+ content: ".";
122	+ display: block;
123	+ height: 0;
124	+ clear: both;
125	+ visibility: hidden;
126	+ }
127	+
128	+ * html>body .clearfix {
129	+ display: inline-block;
130	+ width: 100%;
131	+ }
132	+
133	+ * html .clearfix {
134	+ /* Hides from IE-mac \*/
135	+ height: 1%;
136	+ /* End hide from IE-mac */
137	+ }
138	+
139	+ #lightboxIframe {
140	+ display: none;
141	+ }

images/blank.gif ADDED Viewed

Binary file

images/close.gif ADDED Viewed

Binary file

images/closelabel.gif ADDED Viewed

Binary file

images/loading.gif ADDED Viewed

Binary file

images/next.gif ADDED Viewed

Binary file

images/nextlabel.gif ADDED Viewed

Binary file

images/prev.gif ADDED Viewed

Binary file

images/prevlabel.gif ADDED Viewed

Binary file

jquery.lightbox.js ADDED Viewed

	@@ -0,0 +1,449 @@


1	+ /**
2	+ * jQuery Lightbox
3	+ * Version 0.5 - 11/29/2007
4	+ * @author Warren Krewenki
5	+ *
6	+ * This package is distributed under the BSD license.
7	+ * For full license information, see LICENSE.TXT
8	+ *
9	+ * Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
10	+ * Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.
11	+ *
12	+ * This file was lightly modified by Ulf Benjaminsson (http://www.ulfben.com) for use in the WP jQuery Lightbox-
13	+ * plugin. Modifications include:
14	+ * 0. using no-conflict mode (for good measure)
15	+ * 1. improved the resizing code
16	+ * 2. using rel attribute instead of class
17	+ * 3. auto-lightboxing all links after page load
18	+ * 4. using WordPress API to localize script (with safe fallbacks)
19	+ * 5. replaced explicit IMG-urls with divs, styled through the CSS.
20	+ *
21	+ **/
22	+ (function(jQuery){
23	+ jQuery.fn.lightbox = function(options){
24	+ // build main options
25	+ var opts = jQuery.extend({}, jQuery.fn.lightbox.defaults, options);
26	+
27	+ return this.each(function(){
28	+ jQuery(this).click(function(){
29	+ // initalize the lightbox
30	+ initialize();
31	+ start(this);
32	+ return false;
33	+ });
34	+ });
35	+
36	+ /**
37	+ * initalize()
38	+ *
39	+ * @return void
40	+ * @author Warren Krewenki
41	+ */
42	+
43	+ function initialize() {
44	+ jQuery('#overlay').remove();
45	+ jQuery('#lightbox').remove();
46	+ opts.inprogress = false;
47	+
48	+ // if jsonData, build the imageArray from data provided in JSON format
49	+ if(opts.jsonData && opts.jsonData.length > 0) {
50	+ var parser = opts.jsonDataParser ? opts.jsonDataParser : jQuery.fn.lightbox.parseJsonData;
51	+ opts.imageArray = [];
52	+ opts.imageArray = parser(opts.jsonData);
53	+ }
54	+
55	+ var outerImage = '<div id="outerImageContainer"><div id="imageContainer"><iframe id="lightboxIframe" /><img id="lightboxImage"><div id="hoverNav"><a href="javascript://" title="' + opts.strings.prevLinkTitle + '" id="prevLink"></a><a href="javascript://" id="nextLink" title="' + opts.strings.nextLinkTitle + '"></a></div><div id="loading"><a href="javascript://" id="loadingLink"><div id="jqlb_loading"></div></a></div></div></div>';
56	+ var imageData = '<div id="imageDataContainer" class="clearfix"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav">';
57	+
58	+ if (opts.displayHelp)
59	+ imageData += '<span id="helpDisplay">' + opts.strings.help + '</span>';
60	+
61	+ imageData += '<a href="javascript://" id="bottomNavClose" title="' + opts.strings.closeTitle + '"><div id="jqlb_closelabel"></div></a></div></div></div>';
62	+
63	+ var string;
64	+
65	+ if (opts.navbarOnTop) {
66	+ string = '<div id="overlay"></div><div id="lightbox">' + imageData + outerImage + '</div>';
67	+ jQuery("body").append(string);
68	+ jQuery("#imageDataContainer").addClass('ontop');
69	+ } else {
70	+ string = '<div id="overlay"></div><div id="lightbox">' + outerImage + imageData + '</div>';
71	+ jQuery("body").append(string);
72	+ }
73	+
74	+ jQuery("#overlay").click(function(){ end(); }).hide();
75	+ jQuery("#lightbox").click(function(){ end();}).hide();
76	+ jQuery("#loadingLink").click(function(){ end(); return false;});
77	+ jQuery("#bottomNavClose").click(function(){ end(); return false; });
78	+ jQuery('#outerImageContainer').width(opts.widthCurrent).height(opts.heightCurrent);
79	+ jQuery('#imageDataContainer').width(opts.widthCurrent);
80	+
81	+ if (!opts.imageClickClose) {
82	+ jQuery("#lightboxImage").click(function(){ return false; });
83	+ jQuery("#hoverNav").click(function(){ return false; });
84	+ }
85	+ };
86	+
87	+ function getPageSize() {
88	+ var jqueryPageSize = new Array(jQuery(document).width(),jQuery(document).height(), jQuery(window).width(), jQuery(window).height());
89	+ return jqueryPageSize;
90	+ };
91	+
92	+ function getPageScroll() {
93	+ var xScroll, yScroll;
94	+
95	+ if (self.pageYOffset) {
96	+ yScroll = self.pageYOffset;
97	+ xScroll = self.pageXOffset;
98	+ } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
99	+ yScroll = document.documentElement.scrollTop;
100	+ xScroll = document.documentElement.scrollLeft;
101	+ } else if (document.body) {// all other Explorers
102	+ yScroll = document.body.scrollTop;
103	+ xScroll = document.body.scrollLeft;
104	+ }
105	+
106	+ var arrayPageScroll = new Array(xScroll,yScroll);
107	+ return arrayPageScroll;
108	+ };
109	+
110	+ function pause(ms) {
111	+ var date = new Date();
112	+ var curDate = null;
113	+ do{curDate = new Date();}
114	+ while(curDate - date < ms);
115	+ };
116	+
117	+ function start(imageLink) {
118	+ jQuery("select, embed, object").hide();
119	+ var arrayPageSize = getPageSize();
120	+ jQuery("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : opts.overlayOpacity}).fadeIn(400);
121	+ imageNum = 0;
122	+
123	+ // if data is not provided by jsonData parameter
124	+ if(!opts.jsonData) {
125	+ opts.imageArray = [];
126	+ // if image is NOT part of a set..
127	+ if(!imageLink.rel \|\| (imageLink.rel == '')){
128	+ // add single image to Lightbox.imageArray
129	+ opts.imageArray.push(new Array(imageLink.href, opts.displayTitle ? imageLink.title : ''));
130	+ } else {
131	+ // if image is part of a set..
132	+ jQuery("a").each(function(){
133	+ if(this.href && (this.rel == imageLink.rel)){
134	+ opts.imageArray.push(new Array(this.href, opts.displayTitle ? this.title : ''));
135	+ }
136	+ });
137	+ }
138	+ }
139	+
140	+ if(opts.imageArray.length > 1) {
141	+ for(i = 0; i < opts.imageArray.length; i++){
142	+ for(j = opts.imageArray.length-1; j>i; j--){
143	+ if(opts.imageArray[i][0] == opts.imageArray[j][0]){
144	+ opts.imageArray.splice(j,1);
145	+ }
146	+ }
147	+ }
148	+ while(opts.imageArray[imageNum][0] != imageLink.href) { imageNum++;}
149	+ }
150	+
151	+ // calculate top and left offset for the lightbox
152	+ var arrayPageScroll = getPageScroll();
153	+ var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
154	+ var lightboxLeft = arrayPageScroll[0];
155	+ jQuery('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
156	+
157	+
158	+ if (!opts.slideNavBar)
159	+ jQuery('#imageData').hide();
160	+
161	+ changeImage(imageNum);
162	+ };
163	+
164	+ function changeImage(imageNum) {
165	+ if(opts.inprogress == false){
166	+ opts.inprogress = true;
167	+ opts.activeImage = imageNum; // update global var
168	+
169	+ // hide elements during transition
170	+ jQuery('#loading').show();
171	+ jQuery('#lightboxImage').hide();
172	+ jQuery('#hoverNav').hide();
173	+ jQuery('#prevLink').hide();
174	+ jQuery('#nextLink').hide();
175	+
176	+ if (opts.slideNavBar) { // delay preloading image until navbar will slide up
177	+ // jQuery('#imageDataContainer').slideUp(opts.navBarSlideSpeed, jQuery.fn.doChangeImage);
178	+ jQuery('#imageDataContainer').hide();
179	+ jQuery('#imageData').hide();
180	+ doChangeImage();
181	+ } else {
182	+ doChangeImage();
183	+ }
184	+ }
185	+ };
186	+
187	+ function doChangeImage() {
188	+ imgPreloader = new Image();
189	+ // once image is preloaded, resize image container
190	+ imgPreloader.onload=function(){
191	+ var newWidth = imgPreloader.width;
192	+ var newHeight = imgPreloader.height;
193	+ if (opts.fitToScreen) {
194	+ var arrayPageSize = getPageSize();
195	+ var maxWidth = arrayPageSize[2] - 3*opts.borderSize;//1 extra, to get some margins to the browser border.
196	+ var maxHeight = arrayPageSize[3] - 200;
197	+ var ratio = 1;
198	+ if(newHeight > maxHeight){
199	+ ratio = maxHeight/newHeight; //ex. 600/1024 = 0.58
200	+ }
201	+ newWidth = newWidth*ratio;
202	+ newHeight = newHeight*ratio;
203	+ ratio = 1;
204	+ if(newWidth > maxWidth){
205	+ ratio = maxWidth/newWidth; //ex. 800/1280 == 0.62
206	+ }
207	+ newWidth = newWidth*ratio;
208	+ newHeight = newHeight*ratio;
209	+ }
210	+ jQuery('#lightboxImage').attr('src', opts.imageArray[opts.activeImage][0])
211	+ .width(newWidth).height(newHeight);
212	+ resizeImageContainer(newWidth, newHeight);
213	+ };
214	+
215	+ imgPreloader.src = opts.imageArray[opts.activeImage][0];
216	+ };
217	+
218	+ function end() {
219	+ disableKeyboardNav();
220	+ jQuery('#lightbox').hide();
221	+ jQuery('#overlay').fadeOut(250);
222	+ jQuery('select, object, embed').show();
223	+ };
224	+
225	+ function preloadNeighborImages(){
226	+ if(opts.loopImages && opts.imageArray.length > 1) {
227	+ preloadNextImage = new Image();
228	+ preloadNextImage.src = opts.imageArray[(opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1][0]
229	+
230	+ preloadPrevImage = new Image();
231	+ preloadPrevImage.src = opts.imageArray[(opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1][0]
232	+ } else {
233	+ if((opts.imageArray.length - 1) > opts.activeImage){
234	+ preloadNextImage = new Image();
235	+ preloadNextImage.src = opts.imageArray[opts.activeImage + 1][0];
236	+ }
237	+ if(opts.activeImage > 0){
238	+ preloadPrevImage = new Image();
239	+ preloadPrevImage.src = opts.imageArray[opts.activeImage - 1][0];
240	+ }
241	+ }
242	+ };
243	+
244	+ function resizeImageContainer(imgWidth, imgHeight) {
245	+ // get current width and height
246	+ opts.widthCurrent = jQuery("#outerImageContainer").outerWidth();
247	+ opts.heightCurrent = jQuery("#outerImageContainer").outerHeight();
248	+
249	+ // get new width and height
250	+ var widthNew = Math.max(350, imgWidth + (opts.borderSize * 2));
251	+ var heightNew = (imgHeight + (opts.borderSize * 2));
252	+
253	+ // scalars based on change from old to new
254	+ opts.xScale = ( widthNew / opts.widthCurrent) * 100;
255	+ opts.yScale = ( heightNew / opts.heightCurrent) * 100;
256	+
257	+ // calculate size difference between new and old image, and resize if necessary
258	+ wDiff = opts.widthCurrent - widthNew;
259	+ hDiff = opts.heightCurrent - heightNew;
260	+
261	+ jQuery('#imageDataContainer').animate({width: widthNew},opts.resizeSpeed,'linear');
262	+ jQuery('#outerImageContainer').animate({width: widthNew},opts.resizeSpeed,'linear',function(){
263	+ jQuery('#outerImageContainer').animate({height: heightNew},opts.resizeSpeed,'linear',function(){
264	+ showImage();
265	+ });
266	+ });
267	+
268	+ // if new and old image are same size and no scaling transition is necessary,
269	+ // do a quick pause to prevent image flicker.
270	+ if((hDiff == 0) && (wDiff == 0)){
271	+ if (jQuery.browser.msie){ pause(250); } else { pause(100);}
272	+ }
273	+
274	+ jQuery('#prevLink').height(imgHeight);
275	+ jQuery('#nextLink').height(imgHeight);
276	+ };
277	+
278	+ function showImage() {
279	+ jQuery('#loading').hide();
280	+ jQuery('#lightboxImage').fadeIn(400);
281	+ updateDetails();
282	+ preloadNeighborImages();
283	+
284	+ opts.inprogress = false;
285	+ };
286	+
287	+ function updateDetails() {
288	+ jQuery('#numberDisplay').html('');
289	+ if(opts.imageArray[opts.activeImage][1]){
290	+ jQuery('#caption').html(opts.imageArray[opts.activeImage][1]).show();
291	+ }
292	+ // if image is part of set display 'Image x of x'
293	+ if(opts.imageArray.length > 1){
294	+ var nav_html;
295	+
296	+ nav_html = opts.strings.image + (opts.activeImage + 1) + opts.strings.of + opts.imageArray.length;
297	+
298	+ if (!opts.disableNavbarLinks) {
299	+ // display previous / next text links
300	+ if ((opts.activeImage) > 0 \|\| opts.loopImages) {
301	+ nav_html = '<a title="' + opts.strings.prevLinkTitle + '" href="#" id="prevLinkText">' + opts.strings.prevLinkText + "</a>" + nav_html;
302	+ }
303	+
304	+ if (((opts.activeImage + 1) < opts.imageArray.length) \|\| opts.loopImages) {
305	+ nav_html += '<a title="' + opts.strings.nextLinkTitle + '" href="#" id="nextLinkText">' + opts.strings.nextLinkText + "</a>";
306	+ }
307	+ }
308	+
309	+ jQuery('#numberDisplay').html(nav_html).show();
310	+ }
311	+
312	+ if (opts.slideNavBar) {
313	+ jQuery("#imageData").slideDown(opts.navBarSlideSpeed);
314	+ } else {
315	+ jQuery("#imageData").show();
316	+ }
317	+
318	+ var arrayPageSize = getPageSize();
319	+ jQuery('#overlay').height(arrayPageSize[1]);
320	+ updateNav();
321	+ };
322	+
323	+ function updateNav() {
324	+ if(opts.imageArray.length > 1){
325	+ jQuery('#hoverNav').show();
326	+
327	+ // if loopImages is true, always show next and prev image buttons
328	+ if(opts.loopImages) {
329	+ jQuery('#prevLink,#prevLinkText').show().click(function(){
330	+ changeImage((opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1); return false;
331	+ });
332	+
333	+ jQuery('#nextLink,#nextLinkText').show().click(function(){
334	+ changeImage((opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1); return false;
335	+ });
336	+
337	+ } else {
338	+ // if not first image in set, display prev image button
339	+ if(opts.activeImage != 0){
340	+ jQuery('#prevLink,#prevLinkText').show().click(function(){
341	+ changeImage(opts.activeImage - 1); return false;
342	+ });
343	+ }
344	+
345	+ // if not last image in set, display next image button
346	+ if(opts.activeImage != (opts.imageArray.length - 1)){
347	+ jQuery('#nextLink,#nextLinkText').show().click(function(){
348	+
349	+ changeImage(opts.activeImage +1); return false;
350	+ });
351	+ }
352	+ }
353	+
354	+ enableKeyboardNav();
355	+ }
356	+ };
357	+
358	+ function keyboardAction(e) {
359	+ var o = e.data.opts
360	+ var keycode = e.keyCode;
361	+ var escapeKey = 27;
362	+
363	+ var key = String.fromCharCode(keycode).toLowerCase();
364	+
365	+ if((key == 'x') \|\| (key == 'o') \|\| (key == 'c') \|\| (keycode == escapeKey)){ // close lightbox
366	+ end();
367	+ } else if((key == 'p') \|\| (keycode == 37)){ // display previous image
368	+ if(o.loopImages) {
369	+ disableKeyboardNav();
370	+ changeImage((o.activeImage == 0) ? (o.imageArray.length - 1) : o.activeImage - 1);
371	+ }
372	+ else if(o.activeImage != 0){
373	+ disableKeyboardNav();
374	+ changeImage(o.activeImage - 1);
375	+ }
376	+ } else if((key == 'n') \|\| (keycode == 39)){ // display next image
377	+ if (opts.loopImages) {
378	+ disableKeyboardNav();
379	+ changeImage((o.activeImage == (o.imageArray.length - 1)) ? 0 : o.activeImage + 1);
380	+ }
381	+ else if(o.activeImage != (o.imageArray.length - 1)){
382	+ disableKeyboardNav();
383	+ changeImage(o.activeImage + 1);
384	+ }
385	+ }
386	+ };
387	+
388	+ function enableKeyboardNav() {
389	+ jQuery(document).bind('keydown', {opts: opts}, keyboardAction);
390	+ };
391	+
392	+ function disableKeyboardNav() {
393	+ jQuery(document).unbind('keydown');
394	+ };
395	+
396	+ };
397	+
398	+ jQuery.fn.lightbox.parseJsonData = function(data) {
399	+ var imageArray = [];
400	+
401	+ jQuery.each(data, function(){
402	+ imageArray.push(new Array(this.url, this.title));
403	+ });
404	+
405	+ return imageArray;
406	+ };
407	+ jQuery.fn.lightbox.defaults = {
408	+ overlayOpacity : 0.8,
409	+ borderSize : 10,
410	+ imageArray : new Array,
411	+ activeImage : null,
412	+ inprogress : false, //this is an internal state variable. don't touch.
413	+ resizeSpeed : 250,
414	+ widthCurrent: 250,
415	+ heightCurrent: 250,
416	+ xScale : 1,
417	+ yScale : 1,
418	+ displayTitle: true,
419	+ navbarOnTop: false,
420	+ slideNavBar: false, // slide nav bar up/down between image resizing transitions
421	+ navBarSlideSpeed: 250,
422	+ displayHelp: false,
423	+ strings : {
424	+ help: ' \u2190 / P - previous image\u00a0\u00a0\u00a0\u00a0\u2192 / N - next image\u00a0\u00a0\u00a0\u00a0ESC / X - close image gallery',
425	+ prevLinkTitle: 'previous image',
426	+ nextLinkTitle: 'next image',
427	+ prevLinkText: '« Previous',
428	+ nextLinkText: 'Next »',
429	+ closeTitle: 'close image gallery',
430	+ image: 'Image ',
431	+ of: ' of '
432	+ },
433	+ fitToScreen: false, // resize images if they are bigger than window
434	+ disableNavbarLinks: true,
435	+ loopImages: true,
436	+ imageClickClose: true,
437	+ jsonData: null,
438	+ jsonDataParser: null
439	+ };
440	+
441	+ })(jQuery);
442	+
443	+ jQuery(document).ready(function(){
444	+ jQuery('a[rel^="lightbox"]').lightbox({
445	+ fitToScreen: (typeof JQLBSettings == 'object' && JQLBSettings.fitToScreen == '1') ? true : false,
446	+ resizeSpeed: (typeof JQLBSettings == 'object' && JQLBSettings.resizeSpeed > 0) ? JQLBSettings.resizeSpeed : 250,
447	+ imageClickClose: true
448	+ });
449	+ });

readme.txt ADDED Viewed

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


1	+ === WP jQuery Lightbox ===
2	+ Contributors: ulfben
3	+ Donate link: http://amzn.com/w/2QB6SQ5XX2U0N
4	+ Tags: lightbox, jquery, nodal, image, display, ulfben
5	+ Requires at least: 2.9.2
6	+ Tested up to: 2.9.2
7	+ Stable tag: 1.0
8	+
9	+ A drop in replacement for Lightbox 2 and similar plugins, shedding the bulk of Prototype and Scriptaculous.
10	+
11	+ == Description ==
12	+
13	+ This plugin lets you keep [the awesome Lightbox 2](http://www.huddletogether.com/projects/lightbox2/)-functionality, but sheds the bulk of the Prototype Framework and Scriptaculous Effects Library.
14	+
15	+ Warren Krewenki [ported Lightbox over to jQuery](http://warren.mesozen.com/jquery-lightbox/) and this plugin is mostly a wrapper to his work.
16	+ It provides an admin panel for configuration, (optional) auto-boxing of your image links and support for WordPress galleries.
17	+
18	+ You can configure the animation speed and disable image resizing (if you don't want the plugin to fit images to smaller monitors).
19	+
20	+ See the plugin in action here: [http://game.hgo.se/blog/motion-capture/](http://game.hgo.se/blog/motion-capture/)
21	+
22	+ == Installation ==
23	+
24	+ 1. Upload the `wp-jquery-lightbox`-folder to the `/wp-content/plugins/` directory
25	+ 1. Activate the plugin through the 'Plugins' menu in WordPress
26	+ 1. Check out the jQuery Lightbox-panel in your admin interface for usage details and configuration.
27	+
28	+ = How to Use: =
29	+ 1. You can use WordPress image galleries and have them grouped and auto-lightboxed: `[gallery link="file"]`
30	+ 1. You can add a `rel="lightbox"` attribute to any link tag to activate the lightbox. For example:
31	+
32	+ `<a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>`
33	+
34	+ 1. If you have a set of related images that you would like to group, follow step one but additionally include a group name in the rel attribute. For example:
35	+
36	+ `<a href="image-1.jpg" rel="roadtrip[roadtrip]">image #1</a>`
37	+
38	+ `<a href="image-2.jpg" rel="roadtrip[roadtrip]">image #2</a>`
39	+
40	+ `<a href="image-3.jpg" rel="roadtrip[roadtrip]">image #3</a>`
41	+
42	+ Optional: Use the title attribute if you want to show a caption.
43	+
44	+ You can navigate the images with your keyboard: Arrows, P(revious)/N(ext) and X/C/ESC for close.
45	+
46	+ No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
47	+
48	+ == Changelog ==
49	+
50	+ = 1.0 =
51	+ * Release.
52	+
53	+ == Upgrade Notice ==
54	+
55	+ = 1.0 =
56	+ First release.

wp-jquery-lightbox.php ADDED Viewed

	@@ -0,0 +1,134 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: wp-jquery-lightbox
4	+ Plugin URI: http://wordpress.org/extend/plugins/wp-jquery-lightbox/
5	+ Description: A drop in replacement for LightBox-2 and similar plugins. Uses jQuery to save you from the JS-library mess in your header. :)
6	+ Version: 1.0
7	+ Author: Ulf Benjaminsson
8	+ Author URI: http://www.ulfben.com
9	+ */
10	+ if(!defined('WP_CONTENT_URL')){
11	+ define('WP_CONTENT_URL', get_option('siteurl').'/wp-content');
12	+ }
13	+ if(!defined('WP_PLUGIN_URL')){
14	+ define('WP_PLUGIN_URL', WP_CONTENT_URL.'/plugins');
15	+ }
16	+ define('JQLB_URL', WP_PLUGIN_URL.'/wp-jquery-lightbox/');
17	+ define('JQLB_SCRIPT_URL', JQLB_URL.'jquery.lightbox.js');
18	+ define('JQLB_STYLE_URL', JQLB_URL.'css/lightbox.css');
19	+ add_action('admin_menu', 'jqlb_register_menu_item');
20	+ add_action('wp_print_styles', 'jqlb_css');
21	+ add_action('wp_print_scripts', 'jqlb_js');
22	+ add_filter("plugin_action_links_$plugin", 'jqlb_add_plugin_actions' );
23	+ add_filter('the_content', 'jqlb_autoexpand_rel_wlightbox', 99);
24	+ add_filter('the_excerpt', 'jqlb_autoexpand_rel_wlightbox', 99);
25	+ function jqlb_add_plugin_actions( $links ) { // Add a link to this plugin's settings page
26	+ $settings_link = '<a href="/wp-admin/options-general.php?page=jquery-lightbox-options">Settings</a>';
27	+ array_unshift( $links, $settings_link );
28	+ return $links;
29	+ }
30	+ function jqlb_register_menu_item() {
31	+ register_setting( 'jqlb-settings-group', 'jqlb_automate');
32	+ register_setting( 'jqlb-settings-group', 'jqlb_resize_on_demand');
33	+ register_setting( 'jqlb-settings-group', 'jqlb_resize_speed', 'jqlb_pos_intval');
34	+ add_option('jqlb_automate', 1); //default is to auto-lightbox.
35	+ add_option('jqlb_resize_on_demand', 1); //default is to resize
36	+ add_option('jqlb_resize_speed', 250);
37	+ add_options_page('jQuery Lightbox Options', 'jQuery Lightbox', 10, 'jquery-lightbox-options', 'jqlb_options_panel');
38	+ }
39	+ function jqlb_css(){
40	+ if(is_admin() \|\| is_feed()){return;}
41	+ wp_enqueue_style('jquery.lightbox.css', JQLB_STYLE_URL, false, '0.5');
42	+ }
43	+ function jqlb_js() {
44	+ if(is_admin() \|\| is_feed()){return;}
45	+ wp_deregister_script('jquery');
46	+ wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
47	+ wp_enqueue_script('jquery', '', array(), '1.4.2', true);
48	+ wp_enqueue_script('wp-jquery-lightbox', JQLB_SCRIPT_URL, Array('jquery'), '0.5', true);
49	+ wp_localize_script('wp-jquery-lightbox', 'JQLBSettings', array(
50	+ 'fitToScreen' => get_option('jqlb_resize_on_demand'),
51	+ 'resizeSpeed' => get_option('jqlb_resize_speed')
52	+ ));
53	+ }
54	+ /* automatically insert rel="lightbox[nameofpost]" to every image with no manual work.
55	+ if there are already rel="lightbox[something]" attributes, they are not clobbered.
56	+ Michael Tyson, you are a regular expressions god! - http://atastypixel.com */
57	+ function jqlb_autoexpand_rel_wlightbox($content) {
58	+ if(get_option('jqlb_automate') == 1){
59	+ global $post;
60	+ $pattern = "/(<a(?![^>]?rel=['\"]lightbox.)[^>]?href=['\"][^'\"]+?\.(?:bmp\|gif\|jpg\|jpeg\|png)['\"][^\>])>/i";
61	+ $replacement = '$1 rel="lightbox['.$post->ID.']">';
62	+ $content = preg_replace($pattern, $replacement, $content);
63	+ }
64	+ return '<!-- wp-jquery-lightbox, a WordPress plugin by ulfben --> ' . $content;
65	+ }
66	+ function jqlb_pos_intval($v){
67	+ return abs(intval($v));
68	+ }
69	+ function jqlb_options_panel(){
70	+ if(function_exists('current_user_can') && !current_user_can('manage_options')){
71	+ die(__('Cheatin’ uh?'));
72	+ } ?>
73	+ <div class="wrap">
74	+ <h2>jQuery Lightbox</h2>
75	+ <form method="post" action="options.php">
76	+ <table>
77	+ <?php settings_fields('jqlb-settings-group'); ?>
78	+ <tr valign="baseline">
79	+ <th scope="row"><?php _e('Auto-lightbox image links', 'jqlb') ?></th>
80	+ <td>
81	+ <?php $check = get_option('jqlb_automate') ? ' checked="yes" ' : ''; ?>
82	+ <input type="checkbox" name="jqlb_automate" value="1" <?php echo $check; ?>/>
83	+ <p><small><?php _e('Let the plugin add necessary html to image links', 'jqlb') ?></small></p>
84	+ </td>
85	+ </tr>
86	+ <tr valign="baseline">
87	+ <th scope="row"><?php _e('Shrink large images to fit smaller screens', 'jqlb') ?></th>
88	+ <td>
89	+ <?php $check = get_option('jqlb_resize_on_demand') ? ' checked="yes" ' : ''; ?>
90	+ <input type="checkbox" name="jqlb_resize_on_demand" value="1" <?php echo $check; ?> />
91	+ <p><small><?php _e('Note: <u>Excessively large images</u> waste bandwidth!', 'jqlb') ?></small></p>
92	+ </td>
93	+ </tr>
94	+ <tr valign="baseline">
95	+ <th scope="row"><?php _e('Animation speed (in milliseconds)', 'jqlb') ?></th>
96	+ <td>
97	+ <input type="text" name="jqlb_resize_speed" value="<?php echo intval(get_option('jqlb_resize_speed')) ?>" />
98	+ </td>
99	+ </tr>
100	+ </table>
101	+ <p class="submit">
102	+ <input type="submit" name="Submit" value="<?php _e('Save Changes', 'jqlb') ?>" />
103	+ </p>
104	+ </form>
105	+ <h2>How to Use:</h2>
106	+ <ol>
107	+ <li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
108	+ <pre><code> <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a></code></pre>
109	+ <em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption.
110	+ </li>
111	+ <li>If you have a set of related images that you would like to group, follow step one but additionally include a group name in the rel attribute. For example:
112	+ <pre><code> <a href="images/image-1.jpg" rel="roadtrip[roadtrip]">image #1</a>
113	+ <a href="images/image-2.jpg" rel="roadtrip[roadtrip]">image #2</a>
114	+ <a href="images/image-3.jpg" rel="roadtrip[roadtrip]">image #3</a></code></pre>
115	+ No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
116	+ <li>You can safely use WordPress image galleries and have them grouped and auto-lightboxed: <code>[gallery link="file"]</code></li>
117	+ </ol>
118	+
119	+ <h2>Credits</h2><ul style="list-style-type: circle;margin-left: 24px;">
120	+ <li>wp-jquery-lightbox was created by <a href="http://www.ulfben.com">Ulf Benjaminsson</a> (who <a href="http://amzn.com/w/2QB6SQ5XX2U0N">appreciates books</a>). :)</li>
121	+ <li>wp-jquery-lightbox borrowed code from <a href="http://stimuli.ca/lightbox/">LightBox-2 by Rupert Morris</a></li>
122	+ <li>wp-jquery-lightbox uses a slightly modified (see below) <a href="http://github.com/krewenki/jquery-lightbox/">jQuery Lightbox</a> by <a href="http://warren.mesozen.com/jquery-lightbox/">Warren Krewenki</a></li>
123	+ <li><a href="http://github.com/krewenki/jquery-lightbox/">jQuery Lightbox</a> is based on <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox 2 by Lokesh Dhakar</a></li>
124	+ </ul>
125	+
126	+ <h2>Notes to self:</h2><p style="margin-left: 24px;">
127	+ I've changed the behaviour of jQuery Lightbox to rely on <code>rel="lightbox"</code> instead of <code>class="lightbox"</code>, since rel is what all the previous *box-scripts used.<br />
128	+ I rewrote the jQuery Lightbox resizing code, to take into account <strong>both</strong> height and width and never destroy aspect ratio.<br />
129	+ I replaced the <code>fileLoadingImage</code>-setting with a <code>jqlb_loading</code>-div, feeding an image from CSS instead of parameterizing the javascript.<br />
130	+ I did the same thing with <code>fileBottomNavCloseImage</code> (replaced with <code>jqlb_closelabel</code>-div)<br />
131	+ I borrowed the regular expression from LightBox-2, to automatically insert rel="lightbox[post_id]" without clobbering manual inputs.<br />
132	+ </p>
133	+ </div>
134	+ <?php } ?>