On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi together,

    i am working on an architecture page where references are listed. each reference page should contain a big starter image to the left and beneath I embedded all other thumbnails of the album with

    <div class="row">
    	<div class="col-xs-12 col-sm-7 col-md-6">
    		[[Gallery?
    		   &album=`[[*gallery]]`
    		   &plugin=`galleriffic`
    		   &enableTopPager=`0`
    		   &enableBottomPager=`0`
    		   &renderNavControls=`1`
    		   &renderSSControls=`0`
    		   &gallerifficThumbTpl=`refthumbstpl`
    		   &gallerifficContainerTpl=`refimagetpl`
    		   &useCss=`0`
    		   &defaultTransitionDuration=`0`
    		   &imageWidth=`555`
    		   &imageHeight=`auto`
    		   &gallerifficThumbWidth=`79` 
    		   &gallerifficThumbHeight=`auto` 
    		   &imageZoomCrop=`0`
    		   &prevLinkText=`<`
    		   &nextLinkText=`>`
    		]]
    	</div>
          </div>
    


    The both chunks are:
    1. refimagetpl:
    <div id="gal-gaff-controls" class="controls"></div>
    <div id="gal-gaff-slideshow" class="slideshow"></div>
    <div id="gal-gaff-thumbs">
        <div class="row">
    		<div class="col-md-12">
    			<ul class="list-inline thumbs noscript">
    		        [[+thumbnails]]
    			</ul>
    		</div>
        </div>
    </div>
    


    2. refthumbstpl
    <li>
        <a class="thumb" name="[[+name]]" href="[[+image]]">
            <img class="img-responsive" src="[[+thumbnail]]" alt="[[+name]]" />
        </a>
    </li>


    My problem is that the thumbnails don't consum the full width of the colum col-md-12. Thus I want to remove the ul tag from the refimagetpl. But in this moment the responding image of the thumbnails do not show up. Secondly I would like to add a class="img responsive" to the output of [[+thumbnails]] but I dont get a way in. Is there somebody who could help me with a tipp? The site could be found at brauns architektur de startseite.html (Kick the spaces.) > portfolio > Addis Abeba e.g. .

    Thx and best,
    c--
    • The class="img-responsive" was solved easily...
      • found this in galleriffic.js:

        				// Add the element to the DOM
        				if (!thumbExists) {
        					// Update thumbs passing in addition post transition out handler
        					this.updateThumbs(function() {
        						var $thumbsUl = gallery.find('ul.thumbs');
        						if (insert)
        							$thumbsUl.children(':eq('+position+')').before($li);
        						else
        							$thumbsUl.append($li);
        						
        						if (gallery.onImageAdded)
        							gallery.onImageAdded(imageData, $li);
        					});
        				}


        Looks like to change that to get it working with my markup...