MaxiGalley with a custom js slideshow

Hello, I am a newbie with no programming skills, and after having success with some examples in MODx using other snippets, I got stuck with ImageGallery.

What I need is to be able to upload as many images as I want to show in may page, and I found that TVs are not the optimal solution for this as it is required to upload multiple images.

My intention is to use an HTML template which includes a slideshow js. The images are going to be shown as follows:
(1 main slide with text + 3 galleries split into 9 images each .. all images from same imagefolder):


<!-- START GALLERY CONTENT -->
<div id="content-gallery">
<div id="gallery-text"><b>Name for Photos</b>&nbsp;&nbsp;- Add any text you like here etc...</div>
<div id="wrapper"><!-- This is wrapper for sliding content -->
<div id="example1"><!-- This is wrapper for slide items -->
<div id="first_text_slide"><!-- This is the first text slide -->
<div id="text_under">
<b>YOUR Photo Gallery - 27</b> Photos

<span>more text!!!</span>
</div>
</div><!-- End first text slide -->

<div class="item">
<ul>
<li><a HREF="images/gallery/imagesfolder/01.jpg" rel="example1" title="You can place title if you like"><img SRC="images/gallery/imagesfolder/01thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/02.jpg" rel="example1" title="You can place title if you like"><img SRC="images/gallery/imagesfolder/02thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/03.jpg" rel="example1" title="You can place title if you like"><img SRC="images/gallery/imagesfolder/03thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/04.jpg" rel="example1"><img SRC="images/gallery/imagesfolder/04thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/05.jpg" rel="example1" title="You can place title if you like" ><img SRC="images/gallery/imagesfolder/05thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/06.jpg" rel="example1"><img SRC="images/gallery/imagesfolder/06thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/07.jpg" rel="example1" title="You can place title if you like"><img SRC="images/gallery/imagesfolder/07thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/08.jpg" rel="example1"><img SRC="images/gallery/imagesfolder/08thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/09.jpg" rel="example1"><img SRC="images/gallery/imagesfolder/09thumb.jpg" alt="#" /></a></li>
</ul>
</div><!-- end item -->
<div class="item">
<ul>
<li><a HREF="images/gallery/imagesfolder/05.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/05thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/06.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/06thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/07.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/07thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/08.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/08thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/09.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/09thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/01.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/01thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/02.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/02thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/03.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/03thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/04.jpg" rel="example2"><img SRC="images/gallery/imagesfolder/04thumb.jpg" alt="#" /></a></li>
</ul>
</div><!-- end item -->
<div class="item">
<ul>
<li><a HREF="images/gallery/imagesfolder/08.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/08thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/09.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/09thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/01.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/01thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/02.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/02thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/03.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/03thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/04.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/04thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/05.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/05thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/06.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/06thumb.jpg" alt="#" /></a></li>
<li><a HREF="images/gallery/imagesfolder/07.jpg" rel="example3"><img SRC="images/gallery/imagesfolder/07thumb.jpg" alt="#" /></a></li>
</ul>
</div><!-- end item -->
</div><!-- end example1 -->
</div><!-- end wraper -->
</div><!-- END GALLERY CONTENT -->



How can I set up MaxiGallery to obtain an output like this? divs IDs and Classes must be the same from the code above.

Any one who can help me with this?

Please.... any one there who can help me?

I think you should check out EvoGallery. While it does not work from the front-end (only a snippet for output, somewhat like Ditto or Wayfinder as far as using custom chunks for its output, including built-in PHx) it has a very nice module. Multiple uploads are handled via the Uploadify AJAX/Flash file upload script.

I’m using Easy 2 Gallery, another module-based gallery management script, but only because it already has a nice commenting feature and I’m too lazy to add my own to EvoGallery. It also has more out-of-the-box front-end gallery types, as well as multilanguage functionality. But for your purposes, I still think EvoGallery would suit you perfectly.