Ribbon + Lightbox Display Problem

I needed the ribbon size to be less than 10, so I followed the instructions on how to edit the size. I only changed the description in the admin folder, and the number in the gallery.js file.

Now, when the ribbon tries to display, it shows up as vertical icons stacked on top of each other, and there is no javascript action on it. The error that shows up at the bottom of the window is as follows:

Webpage error details:

Message: Object doesn't support this property or method
Line: 1
Char: 1
Code: 0
URI: gallery.js

The URL for the page in question is:
tournaments.php

If I change back to the original ribbon theme that uses 10 icons, it works fine, just spreads my page too wide.

I have changed the number of icons on another site using the previous version of PowerGallery with success.

Did I do something, or is this a bug?

Hi Dennis,

What and where did you 'change description' in the admin folder?

For some reason the paths to the required files are all missing the 'photoGallery/' part of the path.

Your code for the gallery part (as written to the page html) looks like this:

<style type="text/css" media="all">
	@import url("css/slimbox/slimbox.css");
  @import url("css/common.css");
	@import url("css/dark.css");
  </style>
    <script type="text/javascript" src="js/mootools-core.js"></script>
  <script type="text/javascript" src="js/mootools-more.js"></script>
      <script type="text/javascript" src="js/slimbox.js"></script>
    <script type="text/javascript" src="js/gallery.js"></script>

whereas it should be showing the full relative path to the required files like:

<style type="text/css" media="all">
	@import url("photoGallery/css/slimbox/slimbox.css");
  @import url("photoGallery/css/common.css");
	@import url("photoGallery/css/dark.css");
  </style>
    <script type="text/javascript" src="photoGallery/js/mootools-core.js"></script>
  <script type="text/javascript" src="photoGallery/js/mootools-more.js"></script>
      <script type="text/javascript" src="photoGallery/js/slimbox.js"></script>
    <script type="text/javascript" src="photoGallery/js/gallery.js"></script>

Go to the Admin area of your gallery, select a gallery and then click on the 'Add to Site' menu item.

The code that it produces for you to include in your page should look something like this:

<?php
$pg_id = '1';
$pg_theme = 'dark';
include('/full/server/path/to/4riversusbc.com/photoGallery/galleries/ribbon_fullsize_lightbox/index.php');
?>

with the 'photoGallery' directory as part of the path. If it isn't, then you will need to check your set-up procedure. [I can't see how changing 10 to 5 in the javascript file could be responsible?]

In the meantime, to get your tournaments.php page working, you could try opening it in Dreamweaver and adding the 'photoGallery' directory to the include path.

That's very interesting.

I certainly didn't change anything to do with the location of the .js files to make the galleries work--but it got me thinking.

I went back to the admin page, and tried to Preview the selected gallery. It doesn't work there either--at least there are no javascript functions available.

I wonder if it had anything to do with the upload of the redefined folder? Could the index.php file be calling for the javascript the wrong way based on folder location?

I looked at the index.php page, and here is the code that's there for the lines you showed above:

<?php } ?>
  <style type="text/css" media="all">
	@import url("<?php echo $pg_config['../Copy of ribbon_lightbox/path']; ?>css/slimbox/slimbox.css");
  @import url("<?php echo $pg_config['../Copy of ribbon_lightbox/html_prefix']; ?>css/common.css");
	@import url("<?php echo $pg_config['../Copy of ribbon_lightbox/html_prefix']; ?>css/<?php echo $pg_theme; ?>.css");
  </style>
  <?php if(empty($js_mootools)) { ?>
  <script type="text/javascript" src="<?php echo $pg_config['../Copy of ribbon_lightbox/path']; ?>js/mootools-core.js"></script>
  <script type="text/javascript" src="<?php echo $pg_config['../Copy of ribbon_lightbox/path']; ?>js/mootools-more.js"></script>
  <?php $js_mootools = true; } ?>
  <?php if(empty($js_slimbox)) { ?>
  <script type="text/javascript" src="<?php echo $pg_config['../Copy of ribbon_lightbox/path']; ?>js/slimbox.js"></script>
  <?php $js_slimbox = true; } ?>
  <script type="text/javascript" src="<?php echo $pg_config['../Copy of ribbon_lightbox/html_prefix']; ?>js/gallery.js"></script>

The "Copy of ribbon_lightbox" looks like a result of duplicating the original ribbon_lightbox folder as per the instructions. I renamed it using the same instructions.

Neilo:

Just on a whim, once I saw the problem with the path statements on the index.php page of the new folder, I decided to go in and just change the number of icons in the gallery.js page of the original, and use that one in the path.

Now everything works fine.

It appears there might be a problem in the duplication of the folder and the code that is inserted in the index page--or I did something wrong when I did it. I tried twice, and got the same thing.

Hi Dennis,

I have just tried duplicating a couple of the gallrey types in the galleries folder, once duplicating in DW files panel, and once outside of DW (in case DW was updating paths).

In each case the galleries duplicated fine, with the per/gallery-type index.php maintaining the proper structure in all cases.

<?php if(empty($js_mootools)) { ?>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-core.js"></script>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-more.js"></script>
<?php $js_mootools = true; } ?>
<?php if(empty($js_slimbox)) { ?>
<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/slimbox.js"></script>
<?php $js_slimbox = true; } ?>
<script type="text/javascript" src="<?php echo $pg_config['html_prefix']; ?>js/gallery.js"></script>

The <?php echo $pg_config['path']; ?> part in the index.php should remain as is, there is not need to update it. As neilo stated, you only need to copy the gallery folder and can leave those above lines of code as is. In your copy you can then update the gallery.js with your updates and any css as needed.