<![CDATA[ Modify Gallery and Galleriffic - My Forums]]> https://forums.modx.com/thread/?thread=50575 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296128 http://modxcms.com/forums/index.php/topic,54062.msg312403.html#msg312403
]]> webprosmo Sep 07, 2010, 10:35 PM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296128 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296127 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>
]]> goldsky Sep 05, 2010, 11:54 PM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296127 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296126

captionContainerSel The CSS selector of the container holding the caption. #gal-gaff-caption
]]> goldsky Sep 05, 2010, 08:41 PM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296126 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296125 terus untuk mengganti format/template gallery dmn?template nya juga beda.
cz defaultnya dia pake css dan template dari example-2.]]> ceplo Sep 05, 2010, 08:16 PM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296125 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296124

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 &rsaquo;’,
prevPageLinkText: ’&lsaquo; 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) { ... }
});
});
]]> goldsky Sep 03, 2010, 04:11 AM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296124 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296123 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.]]> ceplo Sep 03, 2010, 01:49 AM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296123 <![CDATA[Re: Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296122 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]]> goldsky Sep 02, 2010, 12:33 AM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296122 <![CDATA[Modify Gallery and Galleriffic]]> https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296121 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..]]> ceplo Sep 01, 2010, 11:02 PM https://forums.modx.com/thread/50575/modify-gallery-and-galleriffic#dis-post-296121