• Registered: 2007-10-02
  • Posts: 18

Topic: Visual LightBox

Hello all.
I recently installed the Visual LightBox sofware to save som time. That did not happend...
This software generates lightbox photoalbun fast and easy. Allso for online use.
However, I ham having a hell of a time making it work for BunBB. My only hope is that someone else bought the same software and figured out what I am unable to. Contacted their suport but so far nothing.

The problem is as follows:
When I upload this for a site for itselfe (strait HTML and not PunBB) it works. Incorporated with PunBB the transparent png background turns white and the whole thing is far from smooth.

Here´s a link to what i meen:
www.gufs.eterya.com/gallery_1.php

So if anyone can help me with this I´d be most greatful

Sincerely
RexRon

2 Reply by MattF (edited by MattF 2009-07-23 03:32)

  • MattF
  • Senior Member
  • Offline
  • From: South Yorkshire, England
  • Registered: 2007-03-15
  • Posts: 1,956

Re: Visual LightBox

Have you looked at your page source on the gallery page? I've no idea how you've contained the gallery, code wise, but you can only have one head and body in a page, not two. Place the lightbox js links in header.php and get rid of the rest of that cruft from your gallery pages.

MattF's Website

  • Registered: 2007-10-02
  • Posts: 18

Re: Visual LightBox

Thanks for the reply.

Heres the gallery page:

<?php
 
define('PUN_ROOT', './');
require PUN_ROOT.'include/common.php';

?>
<div class="block">
    <h2><span>Galleri 1</span></h2>
    <div class="box">
        <div class="inbox_2">
<!--==================-->
<!--Start Page Content-->
<html>
    <head>
        
                <!-- Start VisualLightBox.com HEAD section -->
                <link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
        <script src="engine/js/prototype.js" type="text/javascript"></script>
        <script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="engine/js/lightbox.js" type="text/javascript"></script>

        <style>
            .gallery {
                zoom:1;
                width:auto;                
            }
            .gallery a {
                display:block;
                float:left;
                margin:5px;
                opacity:0.87;
                text-align:center;
            }
            .gallery a:hover {
                opacity:1;
            }
            .gallery a img {
                border:none;
                display:block;
            }
            .gallery a#vlightbox{display:none}
        </style>
        <!-- End VisualLightBox.com HEAD section -->
    </head>
    <body bgcolor=#d9d6c3 >
    
    <!-- Start VisualLightBox.com BODY section -->    
    <div class="gallery">
        <a href="./data/images/amalilucia2008010.jpg" rel="lightbox[sample]" title="amali lucia 2008 010"><img src="./data/thumbnails/amalilucia2008010.png" /></a>
    <a href="./data/images/amalilucia2008015.jpg" rel="lightbox[sample]" title="amali lucia 2008 015"><img src="./data/thumbnails/amalilucia2008015.png" /></a>
    <a href="./data/images/amalilucia2008016.jpg" rel="lightbox[sample]" title="amali lucia 2008 016"><img src="./data/thumbnails/amalilucia2008016.png" /></a>
    <a href="./data/images/amalilucia2008036.jpg" rel="lightbox[sample]" title="amali lucia 2008 036"><img src="./data/thumbnails/amalilucia2008036.png" /></a>
    <a href="./data/images/amalilucia2008001.jpg" rel="lightbox[sample]" title="amali lucia 2008 001"><img src="./data/thumbnails/amalilucia2008001.png" /></a>
    <a href="./data/images/amalilucia2008007.jpg" rel="lightbox[sample]" title="amali lucia 2008 007"><img src="./data/thumbnails/amalilucia2008007.png" /></a>
    <a href="./data/images/amalilucia2008008.jpg" rel="lightbox[sample]" title="amali lucia 2008 008"><img src="./data/thumbnails/amalilucia2008008.png" /></a>
    <a href="./data/images/amalilucia2008009.jpg" rel="lightbox[sample]" title="amali lucia 2008 009"><img src="./data/thumbnails/amalilucia2008009.png" /></a>

    <!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
    <a id="vlightbox" href="http://visuallightbox.com/">Photo Album Maker by VisualLightbox.com</a>
    </div>
    <!-- End VisualLightBox.com BODY section -->
    </body>
</html>
<!-- End Page Content -->
<!--==================-->
        </div>
    </div>
</div>
<?php
require PUN_ROOT.'footer.php';

Here´s the link to the gallery: www.gufs.eterya.com/gallery_1.php

4 Reply by MattF

  • MattF
  • Senior Member
  • Offline
  • From: South Yorkshire, England
  • Registered: 2007-03-15
  • Posts: 1,956

Re: Visual LightBox

Put these lines in header.php, where they should be:

<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
<script src="engine/js/prototype.js" type="text/javascript"></script>
<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="engine/js/lightbox.js" type="text/javascript"></script>

and try the code below.

<?php
 
define('PUN_ROOT', './');
require PUN_ROOT.'include/common.php';

?>
<div class="block">
    <h2><span>Galleri 1</span></h2>
    <div class="box">
        <div class="inbox_2">
        <style>
            .gallery {
                zoom:1;
                width:auto;                
            }
            .gallery a {
                display:block;
                float:left;
                margin:5px;
                opacity:0.87;
                text-align:center;
            }
            .gallery a:hover {
                opacity:1;
            }
            .gallery a img {
                border:none;
                display:block;
            }
            .gallery a#vlightbox{display:none}
        </style>
       <div class="gallery">
        <a href="./data/images/amalilucia2008010.jpg" rel="lightbox[sample]" title="amali lucia 2008 010"><img src="./data/thumbnails/amalilucia2008010.png" /></a>
    <a href="./data/images/amalilucia2008015.jpg" rel="lightbox[sample]" title="amali lucia 2008 015"><img src="./data/thumbnails/amalilucia2008015.png" /></a>
    <a href="./data/images/amalilucia2008016.jpg" rel="lightbox[sample]" title="amali lucia 2008 016"><img src="./data/thumbnails/amalilucia2008016.png" /></a>
    <a href="./data/images/amalilucia2008036.jpg" rel="lightbox[sample]" title="amali lucia 2008 036"><img src="./data/thumbnails/amalilucia2008036.png" /></a>
    <a href="./data/images/amalilucia2008001.jpg" rel="lightbox[sample]" title="amali lucia 2008 001"><img src="./data/thumbnails/amalilucia2008001.png" /></a>
    <a href="./data/images/amalilucia2008007.jpg" rel="lightbox[sample]" title="amali lucia 2008 007"><img src="./data/thumbnails/amalilucia2008007.png" /></a>
    <a href="./data/images/amalilucia2008008.jpg" rel="lightbox[sample]" title="amali lucia 2008 008"><img src="./data/thumbnails/amalilucia2008008.png" /></a>
    <a href="./data/images/amalilucia2008009.jpg" rel="lightbox[sample]" title="amali lucia 2008 009"><img src="./data/thumbnails/amalilucia2008009.png" /></a>

    </div>
      </div>
    </div>
</div>
<?php
require PUN_ROOT.'footer.php';

MattF's Website

5 Reply by rexron (edited by rexron 2009-07-23 08:16)

  • Registered: 2007-10-02
  • Posts: 18

Re: Visual LightBox

Thanks for your reply.

I tryed your suggestion but got the same result...
Not sure if I put in the right place though.

6 Reply by MattF

  • MattF
  • Senior Member
  • Offline
  • From: South Yorkshire, England
  • Registered: 2007-03-15
  • Posts: 1,956

Re: Visual LightBox

Seems to be working fine on that link you posted: http://www.gufs.eterya.com/gallery_1.php

Clear your cache and check again.

MattF's Website

  • Registered: 2007-10-02
  • Posts: 18

Re: Visual LightBox

Yes. But the shaded frame around the pictures in the lightbox is suposed to be a trancparent png. The transparency is just not happening. Allso the animation is not as smooth as it should be.

Check out this link to see the difference:http://eterya.com/gallery/index.html

8 Reply by MattF

  • MattF
  • Senior Member
  • Offline
  • From: South Yorkshire, England
  • Registered: 2007-03-15
  • Posts: 1,956

Re: Visual LightBox

The scripts are now working as they should. It's up to you to alter the config settings and CSS until you get things setup, working and looking how you want.

MattF's Website

  • Registered: 2007-10-02
  • Posts: 18

Re: Visual LightBox

MattF wrote:

The scripts are now working as they should. It's up to you to alter the config settings and CSS until you get things setup, working and looking how you want.

Yes it works outside the PunBB. I really don´t know how or what to alter in the config file to make this work. The Visuallightbox has it´s own folder with the scripts an CSS-file. Do you think that pasting the CSS code into the base.css could have any effect on this?

The irony is that I bought the software to save time roll

  • Registered: 2009-10-17
  • Posts: 1

Re: Visual LightBox

Hello,

I was curious if someone could help me unlock visual lightbox and video lightbox?  I have purchased the business editions, so I have the key codes.  When I go into gallery - and click the link to enable watermark it simply redirects me back to the visual lightbox or video lightbox homepage.  I don't understand where I am supposed to enter my key codes in to unlock this.  support@visuallightbox has been absolutely horrible in getting back to me.

If anyone can help it would be appreciated. Thanks~