I need to have a gallery on my site, not of products but just general photos from events etc.

I purchased one particular gallery module but it just didn’t seem to operate very well.

So I have tried to create a gallery page by making a category called ‘Gallery’. Then in the category description I have used the ‘Source’ option from within Administration and my fairly basic HTML knowledge to add the necessary javascript links and lightbox.css link and then HTML code for a table based gallery.

<script type="text/javascript" src="gallery-js/jquery.js"></script>
<script type="text/javascript" src="gallery-js/lightbox.js"></script>

<p>
  <link href="gallery-css/lightbox.css" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    $(function() {
      $('#gallery a').lightBox();
    });
    </script></p>
<div id="gallery">
  <table border="0" cellspacing="30" width="250">
    <tbody>
      <tr>
        <td>
          <a href="gallery-images/sample-01.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-01.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-02.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-02.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-03.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-03.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-04.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-04.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-05.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-05.jpg" width="100" /></a></td>
      </tr>
      <tr>
        <td>
          <a href="gallery-images/sample-06.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-06.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-07.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-07.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-08.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-08.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-09.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-09.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-10.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-10.jpg" width="100" /></a></td>
      </tr>
      <tr>
        <td>
          <a href="gallery-images/sample-11.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-11.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-12.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-12.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-13.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-13.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-14.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-14.jpg" width="100" /></a></td>
        <td>
          <a href="gallery-images/sample-15.jpg" title="Image Title"> <img height="100" src="gallery-images/sample-15.jpg" width="100" /></a></td>
      </tr>
    </tbody>
  </table>
</div>

This is actually working fine except for one slight problem, the ‘Close’ button and “Image Loading” icon. After searching online it looks like there have been lots of issues with these two icons not showing and it is normally down to either the icons not being in the locations written in the lightbox.js file or there being a difference in file name such as an upper/lower case change.

I’ve checked all this and can not see anything obviously wrong. Also I have used this code before on non-OpenCart sites successfully.

So…

1) Is it considered “bad form” or wrong in any way to use the category description area to add HTML code like I have done?

2) Can anyone help with the ‘Close’ button and “Image Loading” icon not showing?

Here is the page on my site http://mallodesigns.com/index.php?route=product/category&path=66_65

Thanks

• This reply was modified 4402 days ago by  mallo82.
• This reply was modified 4402 days ago by  mallo82.
• This reply was modified 4402 days ago by  mallo82.