Author |
Message |
pdfx
Regular


Joined: Mar 13, 2008
Posts: 68
|
Posted:
Mon Sep 08, 2008 2:03 am |
|
Hello all
Has anyone used a lightbox within a Module? If so, to what success have you had?
I want to have a few buttons that when clicked a new window within nuke opens and shows the info. One is a graphic, one is a url and one is a video.
I have found various lightboxes, just tried a couple and cant get them to work.
P |
|
|
|
 |
Guardian2003
Site Admin

Joined: Aug 28, 2003
Posts: 6799
Location: Ha Noi, Viet Nam
|
Posted:
Mon Sep 08, 2008 3:07 am |
|
I used moodalbox a while ago on my site to open up news item when the 'read more' link was clicked.
You just need to make sure that you call the js files in header.php (or after the header include for the module index file. Most of the modal type boxes also require the content to be placed in CSS tag for them to work correctly. |
|
|
|
 |
pdfx

|
Posted:
Mon Sep 08, 2008 10:48 am |
|
ok guardian,
Thanks for the response.
I have added the call js files already, the second point you added about the css tag i was unsure of?
I basically have a module that calls a html page into an iframe. (I have resons for this) In this html page I want to add some graphic buttons that call larger graphics, external html, thats why i chose lightbox, i can get graphics to work fine sing this method, but the original lightbox script only handles images. I have tried various other lightboxes and cannot get tthem to work.
P |
|
|
|
 |
Guardian2003

|
Posted:
Mon Sep 08, 2008 1:25 pm |
|
If you are trying to get the lightbox or something similar to work from inside the iframe, I don't think that is going to work because the JS needs to be in the <HEAD> element and the iframe won't have one. You might have to re-think your approach of using the iframe but I'll try and do some digging to see what I can find. |
|
|
|
 |
pdfx

|
Posted:
Mon Sep 08, 2008 10:51 pm |
|
ok, i knew what I wrote might be confusing.
The iframe calls my own html page that has all the correct coding added for the lightbox. The original Lightbox which only handles images works fine in this set up.
But i wanted to have the lightbox handle html content which the original lightbox does not, thus why i tried other variation lightboxes that handle html and forms within them, they dont work.
P |
|
|
|
 |
Guardian2003

|
Posted:
Tue Sep 09, 2008 2:32 am |
|
I don't think you can use lightbox with html content as the trigger is on an image tag. If I remember correctly it's the REL attribute so you would do something like Code:
< img src ="something.gif"" rel="lightbox" ....
|
You cannot use the rel attribute with text so you would need to use something else.
You really need to be using one of the AJAX frameworks like jQuery or moodal.
Have a look at this
http://livepipe.net/control/window
I know they use the word 'lightbox' in their description but they use it in the context of "lightbox type effect". |
|
|
|
 |
pdfx

|
Posted:
Thu Sep 11, 2008 5:09 am |
|
thanks mate,
That looks like what I am looking for will look into it more
P |
|
|
|
 |
Guardian2003

|
Posted:
Thu Sep 11, 2008 7:30 am |
|
|
|
 |
testy1
Involved


Joined: Apr 06, 2008
Posts: 484
|
Posted:
Fri Sep 12, 2008 2:18 am |
|
I previously had one using mootools which worked exceptionaly well.
you will also need the following
slimbox javascript here http://code.google.com/p/slimbox/downloads/detail?name=slimbox-1.64.zip
mootools framework here http://www.mootools.net/downloads/mootools-1.2-core-nc.js
upload these files to the structure shown below.....
Open: includes/javascript.php
Add:
Code:
echo '<script type="text/javascript" src="includes/moo/mootools-1.2.js"></script>';
echo '<script type="text/javascript" src="includes/moo/slimbox.js"></script>';
echo '<link rel="stylesheet" href="includes/moo/slimbox.css" type="text/css" media="screen" />';
|
and here is an e.g. for the block for testing.
Code:
$content = '<div align="center"><h4>Click The Image Below</h4><a href="images/test.jpg" rel="lightbox" title="My Slimbox"><img src="images/test.jpg" width="180" height="180" border="0" alt="Slimbox" /></a></div>';
|
|
|
|
|
 |
kguske
Site Admin

Joined: Jun 04, 2004
Posts: 6437
|
Posted:
Sat Sep 13, 2008 4:56 am |
|
As we are moving to jquery in RN 2.3, I'd have to plug that JS library / framework. There are Only registered users can see links on this board! Get registered or login! lightbox plugins for jquery listed on the plugin site, and probably many more that aren't listed there. |
_________________ I search, therefore I exist...
Only registered users can see links on this board! Get registered or login! |
|
|
 |
testy1

|
Posted:
Sat Sep 13, 2008 5:47 am |
|
the 2 jquery ones i tried are a little slower and not quite as smooth but agreed, thats why i dont use it anymore, but im still going through the jquery ones as well, thats one thing with jquery there are a lot more plugins for it |
|
|
|
 |
kguske

|
Posted:
Sat Sep 13, 2008 6:52 am |
|
That's a good problem to have - too many to choose from. Much better than not enough (or some missing). I'd have to see a comparison, but it seems strange that one method would be significantly slower than another. Then again, I haven't played with it much. |
|
|
|
 |
testy1

|
Posted:
Sat Sep 13, 2008 6:20 pm |
|
yes as far as problems go it not bad at all lol |
|
|
|
 |
kguske

|
Posted:
Sun Sep 14, 2008 8:12 pm |
|
I wanted to use a lightbox to display video on one of the commercial sites I support, and found a nice tool. But, it's creative commons license and doesn't use jQuery. I used the Only registered users can see links on this board! Get registered or login! to find 2 that have a less restrictive license and use jQuery. Performance and visual appearance are fine on both.
Note that you can filter by library and features...
Also, note that this cool matrix uses jQuery (why am I not surprised?). |
|
|
|
 |
kguske

|
Posted:
Sun Sep 14, 2008 8:19 pm |
|
Oops. The original one I found **does** work with jQuery (and, to be fair, it has versions to work with other libraries, too). But I still like the license flexibility offered by the other choices (again, the benefits of having many options to choose from!). |
|
|
|
 |
testy1

|
Posted:
Sun Sep 14, 2008 9:22 pm |
|
It is a bit off topic, but ive never looked into creative commons, if its a simple answer, why is it restrictive or do you have a link for an explanation |
|
|
|
 |
kguske

|
Posted:
Sun Sep 14, 2008 9:31 pm |
|
Haven't really looked into creative commons, but in this case, the author claimed it required a paid license for use on a commercial site. I usually look for licenses that don't require payment, and not because I don't contribute. |
|
|
|
 |
testy1

|
Posted:
Sun Sep 14, 2008 10:35 pm |
|
Just checking it out, there is all types of licenses....stay away I think, I shall keep reading  |
|
|
|
 |
|