Author |
Message |
dad7732
RavenNuke(tm) Development Team

Joined: Mar 18, 2007
Posts: 1242
|
Posted:
Sat Mar 07, 2009 12:38 pm |
|
Ok, it's done and working in "Messages". Thinking cap says that you have to call the lightbox js and stylesheet. Sooo ... I simply called each one at the beginning of the messages dialog.
Cheers, hope this helps someone else.
If a link is ok to post here: http://www.candygarcia.com .. click on the 3 dogs photo.  |
|
|
|
 |
nuken
RavenNuke(tm) Development Team

Joined: Mar 11, 2007
Posts: 2024
Location: North Carolina
|
Posted:
Sat Mar 07, 2009 12:49 pm |
|
|
|
 |
dad7732

|
Posted:
Sat Mar 07, 2009 1:07 pm |
|
Good luck, my brain having been in overdrive conditions with this has exhausted this old curmudgeon but at least I did what I set out to do. The addition to FCK would be quite nice.
Cheers |
|
|
|
 |
nuken

|
Posted:
Sat Mar 07, 2009 3:08 pm |
|
Wow... The mod worked in the FCK editor. I will have a download on my site as soon as I test it some more and put all of it in a simple upload pack. This mod allows you to upload the small image and the large image that you want to link to. Very simple and neat addition. You can see it in action at trickedoutnews.com in the first news article. |
|
|
|
 |
dad7732

|
Posted:
Sat Mar 07, 2009 3:24 pm |
|
Yah, anything to make this easier is a blessing, thanks. |
|
|
|
 |
nuken

|
Posted:
Sat Mar 07, 2009 3:27 pm |
|
It uses the same mod I sent you plus the changes to FCKeditor. I have a couple of xhtml compliance issues to work out and then I'll release it. |
|
|
|
 |
dad7732

|
Posted:
Sat Mar 07, 2009 3:35 pm |
|
Sounds good as I have problems with original thought, following a cookbook I can do ...
Cheers |
|
|
|
 |
Palbin
Site Admin

Joined: Mar 30, 2006
Posts: 2583
Location: Pittsburgh, Pennsylvania
|
Posted:
Sat Mar 07, 2009 5:22 pm |
|
What JS library does this use? |
_________________ "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." — Brian W. Kernighan. |
|
|
 |
dad7732

|
Posted:
Sat Mar 07, 2009 5:55 pm |
|
Palbin wrote: | What JS library does this use? |
I believe it is jquery but "nuken" can answer that better. |
|
|
|
 |
nuken

|
Posted:
Sat Mar 07, 2009 6:08 pm |
|
|
|
 |
nuken

|
Posted:
Sat Mar 07, 2009 6:14 pm |
|
It was using prototype and scriptaculous |
|
|
|
 |
dad7732

|
Posted:
Sat Mar 07, 2009 6:33 pm |
|
Just so long as the FCKEditor mod works.  |
|
|
|
 |
kguske
Site Admin

Joined: Jun 04, 2004
Posts: 6437
|
Posted:
Sat Mar 07, 2009 9:47 pm |
|
alien73, the main page is working now, so I can see more of greybox's capabilites - nice! I especially like the website gallery. I'm surprised others haven't done that, but maybe it's possible and just not advertised.
Do you know if the jQuery version has the same capabilities as the AJS version? |
_________________ I search, therefore I exist...
Only registered users can see links on this board! Get registered or login! |
|
|
 |
dad7732

|
Posted:
Sun Mar 08, 2009 4:17 am |
|
The effects are the same per application, just the code and modifications to existing code that's different from what I see. The one that nuken and myself are using seems to be the easiest. However, he's going to use a different mod now because of the lighter codebase. |
|
|
|
 |
dad7732

|
Posted:
Sun Mar 08, 2009 7:14 am |
|
Tried the FCKEditor mod and doesn't work for me. I edited the correct files with the correct additions, etc. and the intended LightBox target option doesn't appear anywhere ... dunno, will wait for Nuken's package.
Obviously missed "something" but no clue as to the "something".
Cheers |
|
|
|
 |
nuken

|
Posted:
Sun Mar 08, 2009 10:14 am |
|
Ok got the mod ready for download. It's a pretty simple install. After you download it, upload the contents of the HTML folder to your server keeping the file structure intact. Then you have 2 edits to make, one the the javascript.php and one in your themes style.css. It does not use jquery yet, I will continue working on it to use jquery for the next release. It is XHTML 1.0 and CSS level 2.1 valid. Here is an image of what the mod looks like in the WYSIWYG editor.
When you click on the image properties tab in the editor, you upload and use your thumb image you want displayed in the content, click on the link tab and upload and use the larger image you want to display in the Lightbox. You will need to select the lightbox target from the drop down menu. It allows up to 3 images to be displayed with the lightbox with a next tab. For a single image, select Lightbox (not in group). Have fun and give some feed back if you can. Issues can be put in my forums and I will answer them asap. An example and download can be found at http://trickedoutnews.com. The example is in the news on the front page. |
|
|
|
 |
dad7732

|
Posted:
Sun Mar 08, 2009 10:50 am |
|
Awesome, will d'load and try it later when home. Thanks for ALL your efforts, much appreciated and will post back here with success.  |
|
|
|
 |
nuken

|
Posted:
Sun Mar 08, 2009 10:53 am |
|
Cool. You should still be able to use it in the forums as before. It is using the latest Lightbox version 2.04. |
|
|
|
 |
dad7732

|
Posted:
Sun Mar 08, 2009 12:10 pm |
|
As long as the rel="lightbox" works in the forums as before it should still work. Had to add the extra tag attributes in the allowed tags dialog after which a standard href link worked just fine. I have a gardener client where the forum is the major part of the site and users post flower/plant, etc images. Will look nice with the dark background and the images standing out. |
|
|
|
 |
eldorado
Involved


Joined: Sep 10, 2008
Posts: 424
Location: France,Translator
|
Posted:
Sun Mar 08, 2009 12:12 pm |
|
Very very nice nuken. Makes my site look pro now  |
|
|
|
 |
dad7732

|
Posted:
Sun Mar 08, 2009 5:47 pm |
|
Works just fine as intended. Just have to remember which is the thumb and which is the large image. If you choose the large image first the top 1/4 of the page is black ...
Cheers and thanks !!!! |
|
|
|
 |
nuken

|
Posted:
Mon Mar 09, 2009 9:40 pm |
|
Anyone that installed this before Monday March 9, I have an improved CSS file that keeps IE from saying "done but with errors on page" at the bottom. This is also CSS level 2.1 compliant. Just replace the lightbox addon css in your themes style.css that you added during the install. The download has been corrected on my site.
Code:#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url("data:image/gif;base64,AAAA"); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
|
|
|
|
|
 |
dad7732

|
Posted:
Tue Mar 10, 2009 7:43 am |
|
Neat ... I was wondering why I was getting that error at work where our gov't office only allows IE (for security reasons - isn't that a HOOT!! ) ... Just tested it in FF using the extension IE Tab and no more error ..
Cheers |
Last edited by dad7732 on Tue Mar 10, 2009 8:55 am; edited 1 time in total |
|
|
 |
dad7732

|
Posted:
Tue Mar 10, 2009 8:54 am |
|
Next issue ....
Using the same Lightbox files, etc. how to do a link to an html file or website such as google in the lightbox instead of an image.
Quote: | <a href="http://www.google.com" rel="lightbox">Google</a> doesn't work, the loading animation just keeps spinning |
Online forms, etc. is what I have in mind as well as a Google search box in the LightBox.
Cheers |
|
|
|
 |
nuken

|
Posted:
Tue Mar 10, 2009 10:24 am |
|
I do not believe Lightbox has support for anything other then images. You can check their forum and see. Only registered users can see links on this board! Get registered or login!
Most of the jquery light boxes I've been testing do not either. That may be something I look for in the next release is a jquery lightbox that supports iframes or objects. |
|
|
|
 |
|