We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 26696
    • 23 Posts
    Is it possible to have a popup style gallery and and have links in the popup window to the previous/next picture?
      I am a freelance web designer. Find out more about me on byskyedition.com
      • 7923
      • 4,213 Posts
      Yes.

      Make a document for the popup (and a template for it) in MODx and put the same MaxiGallery snippet call in that document, but add &is_target=`1` to the snippet parameters. Then do a chunk "mgJs" with this content:

      <script type="text/javascript">
      function openWindow(URL) {
      	day = new Date();
      	id = day.getTime();
      	var left = Math.floor( (screen.width - width) / 2);
      	var top = Math.floor( (screen.height - height) / 2);
      	eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=600,left = '" + left + "',top = '" + top + "'');");
      }
      </script>
      


      Change the width and height attributes above to the size you want the popup to be. Then do a "mgPictureTpl" chunk with this content:
      <div>
      	<a href="javascript:void(0);" onClick="javascript:openWindow('[+maxigallery.picture_link_url+]')">
      	 	<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>
      	<p style="width: [+maxigallery.picture_width_thumb+]px;">
      		[+maxigallery.picture.title:htmlent+]
      	</p>
      </div>
      


      Then in the snippet call that shows the thumbnails, use &js=`mgJs` &galleryPictureTpl=`mgPictureTpl` &picture_target=`id_of_the_popup_document`

      That should be it.. the pictures should open in a popup. Then style the pictureTpl in maxigallery to be what you want.


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 26696
        • 23 Posts
        Did as you said but when I click the thumbnail nothing happens. Should I specify &display=`embedded` and &embedtype? Changing the "mgJs" code you posted with the popup.js code opened a popup window but with no picture in it.
          I am a freelance web designer. Find out more about me on byskyedition.com
          • 7923
          • 4,213 Posts
          No, you don’t have to specify the display type as you do custom templates. Can you give a link to the page so I can see what’s wrong. Probably there is some javascript error.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 26696
            • 23 Posts
            The website is developed locally yet so I can’t give you a link. Anyway, I managed to open the popup window with a Jquery plugin and I excluded &js=`mgJs` from the call.
            Now all I have to do is customize the plugins to suit my necessities.
            Thanks for your help!
              I am a freelance web designer. Find out more about me on byskyedition.com
              • 7923
              • 4,213 Posts
              No problems, great that you got it working! Have a happy time MODxxing wink


                "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                • 26696
                • 23 Posts
                One more thing. I want to change the template used in the popup by maxigallery (not the document template). I’ve made a custom pictureTpl but no change. Any idea what should i do?
                  I am a freelance web designer. Find out more about me on byskyedition.com
                  • 7923
                  • 4,213 Posts
                  You do a chunk for your template and use &pictureTpl=`chunkname` in your snippet call. Or you can do it in a file and use &pictureTpl=`@FILE:path/to/template/mypicturetpl.html`. Make sure that snippet is running uncached etc.


                    "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                    • 26696
                    • 23 Posts
                    That was exactly what I’ve did. Now it’s working, maybe it was just a typo. Thx again.
                      I am a freelance web designer. Find out more about me on byskyedition.com