We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4430
    • 6 Posts
    Hi all

    Have installed the latest beta of MaxiGallery. This is my page at the moment -

    http://www.inhouseholidays.com.au/staging/index.php?q=55

    It’s the closest I’ve come to what I’m after, but I need help on some things...

    1) How could I change the enlarged image from fixed / absolute to relative positioning ie when I resize the window, i want it to move horizontally with the rest of the layout.

    2) How do I change the positioning of the enlarged image (I want it to sit to the left of the large grey block). I’m assuming the image is within #lightboxImage, but when I’ve tried to move it the positioning varies quite dramatically between browsers (ie Firefox and Safari). Should I be changing something else?

    3) Is it possible to set solely a max height on the resizing (ie all images will resize to ’x’ height, while retaining the original image proportions), rather than resizing whichever is larger out of the width or height (ie so my thumbnails line up in height)

    4) Is it possible to load the first enlarged image in the gallery upon page load?

    5) Is it possible to automatically close the open image once another thumbnail is clicked upon (ie rather than needing to close the current one, then click a thumb to open another)

    Apologies if any of this has been covered before, I’ve searched but didn’t turn anything up.

    Any input would be appreciated - thanks smiley
      • 7923
      • 4,213 Posts
      These are more of issues with the ligthbox v2 that maxigallery uses and not the snippet itself.. I can’t help you in many of the things and you would probably get better help over huddletogether forums... (and I’m replacing the ligthbox v2 with slimbox in next release btw..) but here goes something:

      Quote from: c.brown at Nov 15, 2006, 09:47 AM

      1) How could I change the enlarged image from fixed / absolute to relative positioning ie when I resize the window, i want it to move horizontally with the rest of the layout.
      You would need to do some javascript to do this.. I don’t know if it’s very easily doable.

      Quote from: c.brown at Nov 15, 2006, 09:47 AM

      2) How do I change the positioning of the enlarged image (I want it to sit to the left of the large grey block). I’m assuming the image is within #lightboxImage, but when I’ve tried to move it the positioning varies quite dramatically between browsers (ie Firefox and Safari). Should I be changing something else?
      I think that the image position is calculated at the center of the screen in lightbox.js, so you’d need to modify that.

      Quote from: c.brown at Nov 15, 2006, 09:47 AM

      3) Is it possible to set solely a max height on the resizing (ie all images will resize to ’x’ height, while retaining the original image proportions), rather than resizing whichever is larger out of the width or height (ie so my thumbnails line up in height)
      Not possible yet, sorry.

      Quote from: c.brown at Nov 15, 2006, 09:47 AM

      4) Is it possible to load the first enlarged image in the gallery upon page load?
      You could do body onload javascript function that opens the first picture in a lightbox automatically.

      Quote from: c.brown at Nov 15, 2006, 09:47 AM

      5) Is it possible to automatically close the open image once another thumbnail is clicked upon (ie rather than needing to close the current one, then click a thumb to open another)
      No, lightbox overlays the whole screen and user can’t click through the overlay. Some modifying is also needed to achieve this.

      BUT... If I get this correctly, you would want to display the image beside the gray area when user clicks a thumbnail, yes? You could do it easily like this:

      Place a div beside that gray area that is the size of the pictures that you want to show in there and has a id "picHolder". Then do your own galley picture template chunk "mgGalleryPicture" with following content:
      <a href="#" onClick="showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]');return false;">
      
      <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
      	
      </a>


      Then do a js chunk "mgJs" (or external .js file) with following content:
      <script type="text/javascript">
      function showPic(url) {
      	var picHolder = document.getElementById('picHolder');
      	picHolder.style.backgroundImage="url("+url+")";
      }
      </script>


      Then in your snippet call, use &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs` parameters. It should work like you want..


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 4430
        • 6 Posts
        Thanks so much for your help, your example worked great!

        Just one last thing with the body onload...

        What do I need to write to retrieve the first image in each directory? (within MaxiGallery itself)

        ie <body onload="showPic(’[(base_url)]assets/galleries/[*id*]/???’);return false;">
          • 7923
          • 4,213 Posts
          Replace the question marks in your example above with the filename of the first picture (unless you are retrieving the pictures from another gallery using &view_gallery parameter.. in that case [*id*] won’t work, you would need to replace it with the id of the document that holds the gallery pics).

          So something like:

          <body onload="showPic(’[(base_url)]assets/galleries/[*id*]/06mainl.JPG’);return false;">

          Would get the first picture. If you want it to be automated, you could do a snippet that queries maxigallery database table and looks for the filename of the first picture.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 4430
            • 6 Posts
            thanks doze

            yeah i had set up a snippet to query the database, i was just wondering if there was something in-built in maxigallery that could retrieve the first file.
              • 4430
              • 6 Posts
              I have a new problem regarding ditto and multiple snippets per page, seems the same as the problem Soda was having on this page http://modxcms.com/forums/index.php/topic,8832.15.html

              I’ve tried to follow the instructions listed there but I’m still having troubles

              Using BETA 2, this is what I’ve got -

              http://203.55.198.7/~inhouseholidays.com.au/index.php?q=67

              mgOuterTpl (chunk)
              [+maxigallery.managebutton+]
              <div class="image_thumb_whats_new">
              [+maxigallery.pictures+]
              </div>

              Template (chunk)
              <div id="overview">
              [[Ditto? &tpl=`WhatsNewTemplate` &startID=`68`]]
              </div>

              WhatsNewTemplate (chunk)
              <div class="header1">[+title+]</div>
              <div class="whats_new_content">
              [[MaxiGallery? &view_gallery=`[+id+]` &pics_per_page=`2` &galleryOuterTpl=`mgOuterTpl`]]
              [+summary+]
              </div>

              The Beta 2 script itself is working fine (as a single snippet) on another page, but multiple snippets are causing troubles. When I click on Managing Pictures, it’s taking me to the article page and not the gallery management (on the old beta of MaxiGallery, it would display the gallery management but only display images for the first gallery. I was also getting the same parse errors as Soda - not sure if these are still occuring on the new one as I can’t access the gallery management on this page anymore).

              Any help would be super appreciated smiley
              • I may be wrong about this, but here’s my take on it.

                The "Managing Pictures" button expects to be managing pictures for a gallery on the current page, unless you specify which gallery it’s supposed to be managing if you have it configured to use a different page for gallery management.

                It looks like you are viewing a gallery belonging to a different document; why not disable the Manage Pictures button from this document, and only manage from the actual document with the gallery?
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                  • 7923
                  • 4,213 Posts
                  No, the manage pictures button should manage pictures from the gallery that is set to view_gallery parameter. I had similar thing workin on my local enviroment and it worked fine. Try viewing the source of the page where ditto lists the galleries and look where the form is linking to that has the manage pictures button, it should link to each corresponding gallery. Also, you don’t have that document set to be cached, right? And you could try the latest beta 2 rev that is on the resource repository, I don’t remember that in what release I fixed those errors (but I think that they should be in the Beta 2)..


                    "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                    • 4430
                    • 6 Posts
                    am extremely short on time for this project so just followed your advice sottwell, its working fine thanks.