On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Helloo..
    any one know how to set Galleriffic plugin to display caption in slideshow container like example-4?

    thx for replay and sorry for my bad english..
    • hello, bro.
      kalo gw, biasanya Ctrl+U aja, trus modifikasi sesuai parameter-nya aja.
      udah pernah liat ini belom?
      http://rtfm.modx.com/display/ADDON/Gallery.Plugins.Galleriffic
        Rico
        Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
        MODx is great, but knowing how to use it well makes it perfect!

        www.virtudraft.com

        Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

        Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

        Maintainter/contributor of Babel

        Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.
      • Udah bro..
        tapi aq masih bingung seting konfigurasinya dimana?
        aq pengen tampilan gallerynya kayak ini http://www.twospy.com/galleriffic/example-4.html , yang caption nya ada di dalam slideshow. bukan di bawah gambar.
        • Di edit aja code-nya, bro.


          jQuery(document).ready(function($) {
          var gallery = $(’#thumbs’).galleriffic({
          delay: 3000, // in milliseconds
          numThumbs: 20, // The number of thumbnails to show page
          preloadAhead: 40, // Set to -1 to preload all images
          enableTopPager: false,
          enableBottomPager: true,
          maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
          imageContainerSel: ’’, // The CSS selector for the element within which the main slideshow image should be rendered
          controlsContainerSel: ’’, // The CSS selector for the element within which the slideshow controls should be rendered
          captionContainerSel: ’’, // The CSS selector for the element within which the captions should be rendered
          loadingContainerSel: ’’, // The CSS selector for the element within which should be shown when an image is loading
          renderSSControls: true, // Specifies whether the slideshow’s Play and Pause links should be rendered
          renderNavControls: true, // Specifies whether the slideshow’s Next and Previous links should be rendered
          playLinkText: ’Play’,
          pauseLinkText: ’Pause’,
          prevLinkText: ’Previous’,
          nextLinkText: ’Next’,
          nextPageLinkText: ’Next ›’,
          prevPageLinkText: ’‹ Prev’,
          enableHistory: false, // Specifies whether the url’s hash and the browser’s history cache should update when the current slideshow image changes
          enableKeyboardNavigation: true, // Specifies whether keyboard navigation is enabled
          autoStart: false, // Specifies whether the slideshow should be playing or paused when the page first loads
          syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
          defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
          onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
          onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
          onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
          onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
          onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
          onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
          onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
          });
          });
            Rico
            Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
            MODx is great, but knowing how to use it well makes it perfect!

            www.virtudraft.com

            Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

            Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

            Maintainter/contributor of Babel

            Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.
          • Untuk menggantai CSS nya dmn bro?
            terus untuk mengganti format/template gallery dmn?template nya juga beda.
            cz defaultnya dia pake css dan template dari example-2.
            • sampe saat ini, snippet call elo yang terakhir bentuknya gimana, bro?

              captionContainerSel The CSS selector of the container holding the caption. #gal-gaff-caption
                Rico
                Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
                MODx is great, but knowing how to use it well makes it perfect!

                www.virtudraft.com

                Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

                Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

                Maintainter/contributor of Babel

                Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.
              • Ini masih buggy, tapi mungkin bisa bikin elo ngeh aja sebentar:
                Template:

                <html>
                <head>
                <title>[[++site_name]] - [[*pagetitle]]</title>
                <base href="[[++site_url]]" />
                <script type="text/javascript" src="/modx-2.0.0-pl/assets/components/gallery/packages/galleriffic20/js/jquery-1.3.2.js"></script>
                <script type="text/javascript">
                jQuery(document).ready(function($) {
                // Enable toggling of the caption
                var captionOpacity = 0.0;
                $(’#captionToggle a’).click(function(e) {
                var link = $(this);

                var isOff = link.hasClass(’off’);
                var removeClass = isOff ? ’off’ : ’on’;
                var addClass = isOff ? ’on’ : ’off’;
                var linkText = isOff ? ’Hide Caption’ : ’Show Caption’;
                captionOpacity = isOff ? 0.7 : 0.0;

                link.removeClass(removeClass).addClass(addClass).text(linkText).attr(’title’, linkText);
                $(’#caption span.image-caption’).fadeTo(1000, captionOpacity);

                e.preventDefault();
                });
                });
                </script>
                </head>
                <body>
                .........

                Snippet Call:

                [[!Gallery?
                &toPlaceholder=`gallery`
                &album=`bmw-mini`
                &plugin=`galleriffic`
                &captionContainerSel=`#caption`
                &gallerifficContainerTpl=`example-4`
                &toPlaceholder=`gallery`
                &numThumbs=`12`
                &limit=`14`
                ]]

                [[!GalleryItem?
                &thumbWidth=`50`
                &thumbHeight=`50`
                ]]

                [[!GalleryAlbums? &toPlaceholder=`galleries`]]

                <div style="float: right">
                <h2>Galleries</h2>
                <ul>
                [[+galleries]]
                </ul>
                </div>

                <h2>Item</h2>

                [[!+galitem.image:notempty=`
                <div class="image">
                <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>

                Albums: [[+galitem.albums]]

                Tags: [[+galitem.tags]]
                </div>
                `]]

                <hr />

                [[!+gallery:notempty=`
                <h1><a href="[[~[[*id]]]]">[[+gallery.name]]</a></h1>
                <h2>[[+gallery.description]]</h2>

                [[+gallery]]
                `]]

                Chunk example-4:

                <div class="galleriffic">
                <div id="gal-gaff-gallery" class="gal_main">
                <div id="gal-gaff-controls" class="controls"></div>
                <div class="slideshow-container">
                <div id="gal-gaff-loading" class="loader"></div>
                <div id="gal-gaff-slideshow" class="slideshow"></div>
                <div id="caption" class="caption-container"></div>
                </div>
                <div id="captionToggle">
                <a href="#toggleCaption" class="off" title="Show Caption">Show Caption</a>
                </div>
                </div>
                <div id="gal-gaff-thumbs" class="navigation">
                <ul class="thumbs noscript">
                [[+thumbnails]]
                </ul>
                </div>
                <div style="clear: both;"></div>
                </div>
                  Rico
                  Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
                  MODx is great, but knowing how to use it well makes it perfect!

                  www.virtudraft.com

                  Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

                  Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

                  Maintainter/contributor of Babel

                  Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.