On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi,

    Is there an easy way to make Easy2Gallery display picture and thumbnails on the same page?

    For Maxigallery, it is possible by placing two calls and using javasript to display the picture of the clicked thumbnail on the same page.
    http://wiki.modxcms.com/index.php/MaxiGallery#Picture_and_thumbnails_on_same_page

    I cannot use MaxiGallery this time because I'm already using it to load backgrounds.

    So, I wonder if I should place two calls to Easy2Gallery and add some javascript, exactly like the technique for MaxiGallery, or if there is an easier way to do it.

    Currently, I use this very simple snippet call: [!easy2? &gid=11 !]
    It outputs the thumbnails from gallery #11, but the clicked picture is displayed on a black layout by this script from the module "show.easy2gallery.php".

    Thanks.

    This question has been answered by Jul. See the first response.

    • discuss.answer
      Hi,

      I wrote some Javascript code to achieve this.
      It required jQuery. Was tested with jQuery 1.2.6 but should also work with other versions of jQuery.$

      In your document or template, at the desired location for the main picture and thumbnails:
      <img id="mainPicture" src="" alt="" />
          [!easy2? &gid=`[*id_galerie*]` !]


      At the bottom of your document, just before the </body> tag, add:
        <script type="text/javascript">
          jQuery(document).ready(function(){
            
          // Set main picture from path of thumbnail
           function SetMainPicture (src) {
              var ext = src.slice(src.lastIndexOf('.'));
              src = src.replace("_thumbnails/", "");
              var parts = src.split("_"); 
              src = parts.splice(0,parts.length-3).join("_");
              src= src+ext;
              jQuery("#mainPicture").attr('src',src);
              return;
            }
        
            // Initialize main picture
            jQuery("div.boxcontent:first").each(function () {
              var thumb = jQuery(this).find("img");
              var src = thumb.attr("src");
              SetMainPicture(src);
            });
              
            // Load the picture corresponding to the clicked thumbnail
              jQuery("div.boxcontent","div.thumb").click( function() {
                var thumb = jQuery(this).find("img");
                var src = thumb.attr("src");
                SetMainPicture(src);
              })
         
            });
         
        </script>