We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2632
    • 18 Posts
    hi every one

    it being day since i started to integrate color box and maxi gallery but i have being fruitless so i come before to ask for you help
    i download maxi gallery and install it in my mod x and worked perfectly but the problem is how can you integrate (colorbox) http://colorpowered.com/colorbox/ to maxi gallery

    am really trying to do something like this http://www.oakshamlet.com/photo-gallery.html?start=2
      • 2632
      • 18 Posts
      hello every one it me once again still struck in the mad need your help like never before
      is there a plugins for colorbox in modx huh???????????
        • 16610
        • 634 Posts
        This is for ThickBox but replacing "class=thickbox" with "class=colorbox" it’s should work with ColorBox:
        http://wiki.modxcms.com/index.php/MaxiGallery#ThickBox_.28jQuery.29_with_MaxiGallery

        And of course you will need to add jQuery and ColorBox files in to your template.
          Mikko Lammi, Owner at Maagit
          • 2632
          • 18 Posts
          here come a the trouble
          okay this is how my template looks like

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
          <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
          <base href="[(site_url)]" />
          <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
          <link title="Trend" rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/default/fashion-modx-clear.css" />
          <link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/default/modx.css" />
          <link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/default/print.css" media="print" />
          <link title="ZiX" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/zi-modx-1.css" />
          <link title="ZiX Background" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/zi-modx-2.css" />
          <link title="Trend (Alternate)" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/default.css" />
          <link title="Light" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/light_green.css" />
          <link title="Light Green" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/light.css" />
          <link title="Dark" rel="alternate stylesheet" type="text/css" href="[(base_url)]assets/templates/default/dark.css" />
          <script src="[(base_url)]assets/templates/default/styleswitcher.js" type="text/javascript"></script>
          <title>[(site_name)] | [*pagetitle*]</title>
          <script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
          <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
          <link type="text/css" media="screen" rel="stylesheet" href="colorbox/css/colorbox.css" />
          		<!--[if IE]>
          		<link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" />
          		<![endif]-->
          		<script type="text/javascript" src="colorbox/js/jquery.min.js"></script>
          		<script type="text/javascript" src="colorbox/js/jquery.colorbox.js"></script>
          		
                 </head>
          
          
          <body>
          </div></div>
          <div id="wrap">
            <div id="header">
              <div id="title">
                <h1><a href="[~[(site_start)]~]">[(site_name)]</a></h1>
                <p id="slogan">{{slogan}}</p>
              </div>
              <h2 class="hide">Main menu</h2>
              <div id="mainmenu">[!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topnav`!]</div>
              <div class="clear"></div>
            </div>
            <div id="contentfull">
              <h2>[*longtitle*]</h2>
              [*#content*] </div>
            <div id="footer">
              <p> {{footer}}</p>
              <p>MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved
                from [^s^].</p>
            </div>
          </div>
          </body>
          </html>


          the maxi gallery call is this

          [!MaxiGallery?  &tpl=`PictureTpl` &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1` !]



          i created ths chunk picturetpl

          <li>
              <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="colorbox" rel="gallery">
                  <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>
              [+maxigallery.picture.title:isnot=``:then=`
                  <p style="width: [+maxigallery.picture_width_thumb+]px;">
                      [+maxigallery.picture.title:htmlent+]
                  </p>
              `+]
          </li>



          where is the problems??
            • 7923
            • 4,213 Posts
            First thing first.. please always wrap your code in the code tags in your posts (fixed it).

            Second, I notice few problems straight away. Where have you stored the colorbox resources? You are linking them from:

            colorbox/css/colorbox.css
            colorbox-ie.css
            colorbox/js/jquery.min.js
            colorbox/js/jquery.colorbox.js

            Are those paths correct?

            Then you have prototype, scriptaculous and jquery all in the same page. That causes some problems too. If you really need prototype and scriptaculous too, you will need to run jquery in "no conflict" mode. Google for more info.

            Then the custom template that you have created is a galleryPictureTpl and should be used in MaxiGallery call like &galleryPictureTpl=`PictureTpl`

            Also make sure that the cases are correct in chunck name etc..

            When you report your errors, always post all javascript errors from your browser js console too.. and try to pay more attention when you implement such things. The template parameters etc are described in MaxiGallery wiki article, read it.


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