We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 17895
    • 209 Posts
    Hi all, and thanks for everything you did...

    I would like to have a page with a lot of images on it, and the text on the left and the right (as usual... see, for example, http://www.giancarlobagnulo.com/jujitsu/index.html)... but I would like to have the images that can be clicked and maximized, exactly like the templates forum here.

    What I should use? Is MaxiGallery suitable for this? how?
      Daniele "MadMage" Calisi
      • 7923
      • 4,213 Posts
      If you want the pictures to come from a maxigallery gallery, I guess it would be best to link to them by your self in the source and add lightbox scripts to the page so the bigger versions open in lightbox.

      But if you don’t need the pictures to be in some gallery, I think it would be best to use a snippet from these forums that uses phpThumb and lightbox v2 to achieve this. Do a search for it, I think it hasn’t been uploaded to the resource repository.


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 10746
        • 126 Posts
        Quote from: doze at Nov 19, 2006, 04:24 PM

        If you want the pictures to come from a maxigallery gallery, I guess it would be best to link to them by your self in the source and add lightbox scripts to the page so the bigger versions open in lightbox.

        Can you explain this process in more detail?

        Suppose I have created a gallery with some pictures in it... when you say "link to them by yourself" what exactly should I put in the link?

        Secondly, when you say "add lightbox scripts to the page" then what does this mean - how do you "add a script to a page"?

        Sorry if I am being dense, but I can’t even figure out where to start on this one..

        Cheers

        Gordon
          • 7923
          • 4,213 Posts
          Quote from: gfroyle at Nov 21, 2006, 11:07 AM

          Suppose I have created a gallery with some pictures in it... when you say "link to them by yourself" what exactly should I put in the link?
          Just check that what the link to the image is and put it to your document source manually, like:
          <a href="assets/galleries/69/somepicture.jpg" rel="lightbox"><img src="tn_somepicture.jpg" /></a>
          Quote from: gfroyle at Nov 21, 2006, 11:07 AM

          Secondly, when you say "add lightbox scripts to the page" then what does this mean - how do you "add a script to a page"?
          Do a snippet that does:
          $language = isset($language) ? $language : "en";
          $lightboxv2_css_link = '<link rel="stylesheet" href="' . $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/css/lightbox.css" type="text/css" media="screen" />';
          $lightboxv2_script_link1 = $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/js/lightbox_setup.js'; 
          $lightboxv2_settings = 'assets/snippets/maxigallery/lightboxv2/js/lightbox_lang_'.$language.'.js';
          if(file_exists($modx->config['base_path'].$lightboxv2_settings)){
          	$lightboxv2_script_link2 = $modx->config['base_url'] . $lightboxv2_settings;
          }else{
          	$lightboxv2_script_link2 = $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/js/lightbox_lang_en.js';
          }
          $lightboxv2_script_link3 = $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/js/prototype.js';
          $lightboxv2_script_link4 = $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/js/scriptaculous.js?load=effects';
          $lightboxv2_script_link5 = $modx->config['base_url'] . 'assets/snippets/maxigallery/lightboxv2/js/lightbox.js';
          	
          $modx->regClientCSS($lightboxv2_css_link);
          $modx->regClientStartupScript($lightboxv2_script_link1);
          $modx->regClientStartupScript($lightboxv2_script_link2);
          $modx->regClientStartupScript($lightboxv2_script_link3);
          $modx->regClientStartupScript($lightboxv2_script_link4);
          $modx->regClientStartupScript($lightboxv2_script_link5);
          

          Then call it on the document using [[YourSnippetName? &language=`fr`]] (that language parameter is optional, default is english, language files have to be in maxigallery). Or if you want slimbox to be used to show the "lightbox", look for the code from maxigallery class file regClientScripts function.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 10746
            • 126 Posts
            Quote from: doze at Nov 21, 2006, 08:18 PM

            Just check that what the link to the image is and put it to your document source manually, like:
            <a href="assets/galleries/69/somepicture.jpg" rel="lightbox"><img src="tn_somepicture.jpg" /></a>

            I had to replace src="tn_somepicture.jpg" with src="assets/galleries/69/tn_somepicture.jpg" but otherwise it worked beautifully... I can incorporate a bunch of thumbnails into the text, and then just have one copy of the snippet and they can all be maximised on clicking...

            But HOW it works is a mystery to me.... obviously not crucial, but if you have time I’d really appreciate knowing (just in outline) how the thing works... what does the snippet do when the page is being normally viewed? And what sequence of events is initiated when the user clicks on the picture.. (I have reasonably knowledge of basic HTML, but this sort of cleverness is beyond me..)

            Thanks

            Gordon
              • 7923
              • 4,213 Posts
              It just uses the pictures from maxigallery and that ligthbox v2 javascript code to display them.

              The snippet code above includes those lightbox v2 javascript files from maxigallery directory to your document source.

              The link is just a normal link, the thumbnail image from maxigallery is linked to the bigger image. What does the magic is the rel="lightbox" attribute in the link. When your page loads, that lightbox javascript gets fired up and it looks for all links in the html source to see if they have a rel="lightbox" attribute. If they do, it will attach an onclick listener to the link and when you click it, it will open the linked image in that fancy animated div container. That’s about it in general, nothing special..


                "He can have a lollipop any time he wants to. That's what it means to be a programmer."