interesting and new image idea

[• absinthe]

Hi I am currently working on a lightbox script for my site
lightbox site: link

my site: link

How to Use:

Part 1 - Setup

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

[/code][/ul]
Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

[/code][/ul]
Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.


Part 2 - Activate

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts![/quote]

My question is not how I would go about putting the codes in but could a UBBC button be created to make lightbox images for my gallery.

-rocoyo

[• absinthe]

boomboombump

[• absinthe]

bumpbump powpow

[Trublu]

You might get more responses in the General Programming section of the forum, do you mind if I move this there?

[• absinthe]

shoot

[Jordan]

Here's something to get you started.

Global Header

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js">
<!--

var style = document.createElement("link");
      style.type = "text/css";
      style.rel = "stylesheet";
      style.href = "css/lightbox.css";
      style.media = "screen";
document.getElementsByTagName("head")[0].appendChild(style);

//-->
</script>

Global Footer

<script type="text/javascript">
<!--

(function() {
      switch(pb_action) {
            case "display": {
                  var td = document.getElementsByTagName("td");

                  for(var x = 6; x < td.length; x++) {
                        if(td[x].colSpan == "3" && td[x].vAlign == "top") {
                              td[x].innerHTML = td[x].innerHTML.replace(
                                    /\[lightbox=(.+?)\](.+?)\[\/lightbox\]/gi,
                                    '<a href="$2" rel="lightbox">$1</a>'
                              );
                        }
                  }

                  break;
            }
            case "post":
            case "modifypost":
            case "modifypreview": {
                  if(document.postForm) {
                        var buttonImage = "button.gif";

                        var img = document.createElement("img");
                              img.src = buttonImage;
                              img.border = 0;
                              img.alt = img.title = "Light Box";
                        var a = document.createElement("a");
                              a.href = "Javascript:add('[lightbox=Text]','[/lightbox]');";
                              a.appendChild(img);

                        document.postForm.color.parentNode.appendChild(a);
                  }

                  break;
            }
      }
})();

//-->
</script>

[• absinthe]

that code gave me an error when I hit post, but I modified I moved the javascript source before the script type.

Header:

[/quote][/ul]

Footer:

[/quote][/ul]

also the output is just a link to the image, hmmm

I essentially wish to do this:

[/quote][/ul]

with a ubbc tag.[/s]

yeah I don't think lightbox want's to work o.O

[Jordan]

You inserted the full path to your scripts like I expected you to, but you need to remove the red text because it's not only in the incorrect place, but it's rarely needed these days. You can read more about that here.

<script src="www.cityofligt.vacau.com/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="www.cityofligt.vacau.com/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="www.cityofligt.vacau.com/lightbox/js/lightbox.js" type="text/javascript">
<!--

var style = document.createElement("link");
    style.href = "www.cityofligt.vacau.com/lightbox/css/lightbox.css";
    style.type = "text/css";
    style.rel = "stylesheet";
    style.media = "screen";
document.getElementsByTagName("head")[0].appendChild(style);

//-->
</script>

As for the script not working, it's most likely due to a conflict with another code. Try placing it at the very top of your global footer.

[• absinthe]

I can never seem to get the script to work, i put in the headers and footers then when i posted it came up with an error when you posted in any board where the headers and footers applied.

then when i somehow fixed it, i do not remember how, instead of working in posts it brought up the lightbox loading page and when the image was ready it took me directly to the image source. x.x