We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 49945
    • 2 Posts
    So I've been trying to setup a gallery on the site I am working on, but I just can't get slimbox to work.

    This is my code in the header :
    <script type="text/javascript" src="jquery.js"></script>


    And this is how I display the pictures in my albums:
    <div class="Album">[[+gallery]]</div>
    [[!Gallery?  &slimboxLoadJQuery=`1` &toPlaceholder=`gallery` &thumbTpl=`rowTpl2` &thumbWidth=`200` &thumbHeight=`160` &thumbQuality=`80`]]
       <h2>[[*longtitle]]</h2>
        <div><h4>[[+gallery.description]]</h4></div>


    This is how my albums are displayed on the overview page:
    [[!GalleryAlbums? &rowTpl=`rowTpl` &toPlaceholder=`galleries` &prominentOnly=`0`  &limit=`0` &plugin=`slimbox`]]
    [[+galleries]]


    Here the link to my gallery overview:
    http://bsghartberg.esy.es/index.php?id=8

    Any ideas?
    thanks in advance!
      • 30585
      • 833 Posts
      An alternative is Colorbox, which ships with excellent styles and is also relatively lightweight.

      Just include Colorbox and JQuery (which you already have):
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="assets/js/jquery.colorbox-min.js"></script>
      

      Then load it:
      // Where .my-selector is the selector of your gallery items ( thumbTpl )
      $(".my-selector").colorbox();
      

      Don' forget the stylesheet:
      <link href="assets/css/colorbox.min.css" rel="stylesheet">

      As long as you add the .my-selector class to your gallery thumbTpl, Colorbox should work. Here's an example:
      <figure class="[[+cls]]">
          <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
                  &[[+imageGetParam]]=`[[+id]]`
                  &[[+albumRequestVar]]=`[[+album]]`
                  &[[+tagRequestVar]]=`[[+tag]]` ]]`]]" class="my-selector">
              <img class="img-responsive" src="[[+thumbnail]]" alt="[[+description]]" />
          </a>
      </figure>
      


      I hope this helps.

      PS: The Kontakt link of your website (footer) is broken. You have [[~36] instead of [[~36]]
        A MODx Fanatic
        • 49771
        • 16 Posts
        It looks like your desired output is rendering:

        Since I see repeats of your templated output.
         <a href="index.php?id=33&galAlbum=5" title="Motorradtour 2014">
          <img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=100&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F5%2Fcover.JPG&w=270&h=160&zc=1" alt="Motorradtour 2014">
         </a>


        However, you need to close off your html HEAD tag.
        Next you have the required jQuery Library, but you don't have the prettyphoto javascript file (Which I assume you need since you are calling the .prettyphoto method).

        And there might be a few things, but I would fix those issues first, and then we can figure out the rest.