Answered Picture and thumbnails on same page

- 697 Posts
Jul Reply #1, 10 years, 4 months ago

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

697 Posts

Jul Reply #2, 10 years, 4 months ago

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>