Gallery, Galleriffic & bootstrap

32 Posts

charismeki Reply #1, 9 years, 1 month ago

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--

32 Posts

charismeki Reply #2, 9 years, 1 month ago

The class="img-responsive" was solved easily...

32 Posts

charismeki Reply #3, 9 years, 1 month ago

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...