def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.nivogallery/js/jquery.nivo.gallery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').nivoGallery({
pauseTime: %(delay)i,
animSpeed: %(duration)i,
effect: 'fade',
startPaused: false,
directionNav: %(directionnav)s,
progressBar: %(progressbar)s
});
});
</script>
""" % {
'portal_url': self.portal_url,
'duration': self.settings.duration,
'timed': jsbool(self.settings.timed),
'delay': self.settings.delay,
'start_automatically': jsbool(self.settings.timed),
'directionnav': jsbool(self.settings.nivogallery_directionnav),
'progressbar': jsbool(self.settings.nivogallery_progressbar),
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.pikachoose/assets/js/jquery.pikachoose.js">
</script>
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.pikachoose/assets/js/jquery.jcarousel.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
var preventStageHoverEffect = function(self){
self.wrap.unbind('mouseenter').unbind('mouseleave');
self.imgNav.append('<a class="tray"></a>');
self.imgNav.show();
self.hiddenTray = true;
self.imgNav.find('.tray').bind('click',function(){
if(self.hiddenTray){
var selector = '.jcarousel-container.jcarousel-container-';
self.list.parents(selector + 'vertical').animate(
{height:"%(verticalheight)ipx"});
self.list.parents(selector + 'horizontal').animate(
{height:"80px"});
}else{
self.list.parents('.jcarousel-container').animate(
{height:"1px"});
}
self.hiddenTray = !self.hiddenTray;
});
}
$("#pikame").PikaChoose({
bindsFinished: preventStageHoverEffect,
transition:[%(transition)i],
animationSpeed: %(duration)i,
fadeThumbsIn: %(fadethumbsin)s,
speed: %(speed)s,
carouselVertical: %(vertical)s,
showCaption: %(showcaption)s,
thumbOpacity: 0.4,
autoPlay: %(autoplay)s,
carousel: 'false',
showTooltips: %(showtooltips)s });
});
</script>
""" % {
"portal_url": self.portal_url,
"duration": self.settings.duration,
"speed": self.settings.delay,
"transition": self.settings.pikachoose_transition,
"autoplay": jsbool(self.settings.timed),
"showcaption": jsbool(self.settings.pikachoose_showcaption),
"showtooltips": jsbool(self.settings.pikachoose_showtooltips),
"carousel": jsbool(self.settings.pikachoose_showcarousel),
"vertical": jsbool(self.settings.pikachoose_vertical),
"thumbopacity": 0.4,
"fadethumbsin": "false",
"verticalheight": self.settings.pikachoose_height - 18,
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria.js"></script>
<script type="text/javascript"
src="%(portal_url)s/%(js_file)s"></script>
<script type="text/javascript">
(function($){
$(document).ready(function() {
// Initialize Galleria
$('#galleria').galleria({
theme: 'classic',
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info)
}
def galleryscript(self):
return u"""
$(document).ready(function() {
$("#gallery").each(function(){
$(this).unitegallery({
%(gallery_theme)s
%(gallery_autoplay)s
%(gallery_play_interval)s
%(slider_transition_speed)s
%(theme_options)s
});
});
});
""" % {
'gallery_theme':
self.theme != 'default' and 'gallery_theme: "' + self.theme + '",'
or '',
'gallery_autoplay':
(self.settings.timed and self.theme in timed_galleries)
and 'gallery_autoplay: ' + jsbool(self.settings.timed) + ',' or '',
'gallery_play_interval':
self.theme in timed_galleries and
'gallery_play_interval: ' + str(self.settings.delay) + ',' or '',
'slider_transition_speed':
self.theme in timed_galleries and 'slider_transition_speed: ' +
str(self.settings.duration) + ',' or '',
'theme_options':
',\n'.join(k + ':' + v for k, v in self.theme_options().items()),
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(base_url)s/jquery.easing.js"></script>
<script type="text/javascript"
src="%(base_url)s/jquery.mousewheel.js"></script>
<script type="text/javascript"
src="%(base_url)s/jquery.fancybox.js"></script>
<script type="text/javascript">
var auto_start = %(start_automatically)s;
var start_image_index = %(start_index_index)i;
(function($){
$(document).ready(function() {
$("a.fancyzoom-gallery").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic'});
var images = $('a.fancyzoom-gallery');
if(images.length <= start_image_index){
start_image_index = 0;
}
if(auto_start){
$(images[start_image_index]).trigger('click');
}
});
})(jQuery);
</script>
""" % {
'start_automatically':
jsbool(self.settings.start_automatically or self.settings.timed),
'start_index_index':
self.start_image_index,
'base_url':
self.typeStaticFiles
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(base_url)s/jquery.easing.js"></script>
<script type="text/javascript"
src="%(base_url)s/jquery.mousewheel.js"></script>
<script type="text/javascript"
src="%(base_url)s/jquery.fancybox.js"></script>
<script type="text/javascript">
var auto_start = %(start_automatically)s;
var start_image_index = %(start_index_index)i;
(function($){
$(document).ready(function() {
$("a.fancyzoom-gallery").fancybox({
'type': 'image',
'transitionIn': 'elastic',
'transitionOut': 'elastic'});
var images = $('a.fancyzoom-gallery');
if(images.length <= start_image_index){
start_image_index = 0;
}
if(auto_start){
$(images[start_image_index]).trigger('click');
}
});
})(jQuery);
</script>
""" % {
'start_automatically': jsbool(
self.settings.start_automatically or self.settings.timed),
'start_index_index': self.start_image_index,
'base_url': self.typeStaticFiles
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria.js"></script>
<script type="text/javascript"
src="%(portal_url)s/%(js_file)s"></script>
<script type="text/javascript">
(function($){
$(document).ready(function() {
// Initialize Galleria
$('#galleria').galleria({
theme: 'classic',
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info)
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.easyslider/easySlider.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: %(controlsShow)s,
controlsBefore: '',
controlsAfter: '',
controlsFade: %(controlsFade)s,
firstId: 'firstBtn',
firstText: 'First',
firstShow: %(firstShow)s,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: %(lastShow)s,
vertical: %(vertical)s,
speed: %(speed)i,
auto: %(auto)s,
pause: %(pause)s,
continuous: %(continuous)s,
numeric: %(numeric)s,
numericId: 'controls',
lis: %(easyslider_lis)i,
});
});
</script>
""" % {
'speed': self.settings.duration,
'portal_url': self.portal_url,
'controlsShow': jsbool(self.settings.easyslider_controlsShow),
'controlsFade': jsbool(self.settings.easyslider_controlsFade),
'firstShow': jsbool(self.settings.easyslider_firstShow),
'lastShow': jsbool(self.settings.easyslider_lastShow),
'vertical': jsbool(self.settings.easyslider_vertical),
'auto': jsbool(self.settings.timed),
'pause': jsbool(self.settings.delay),
'continuous': jsbool(self.settings.easyslider_continuous),
'numeric': jsbool(self.settings.easyslider_numeric),
'easyslider_lis': self.settings.easyslider_lis
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.nivoslider/js/jquery.nivo.slider.pack.js">
</script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: '%(effect)s', // Specify sets like: 'fold,fade,sliceDown'
slices: %(slices)i, // For slice animations
boxCols: %(boxcols)i, // For box animations
boxRows: %(boxrows)i, // For box animations
animSpeed: %(animspeed)i, // Slide transition speed
pauseTime: %(delay)i, // How long each slide will show
directionNav: %(directionnav)s, // Next & Prev navigation
directionNavHide: %(directionnavhide)s, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: true, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
pauseOnHover: %(pauseonhover)s, // Stop animation while hovering
randomStart: %(randomstart)s // Start on a random slide
});
});
</script>
""" % {
'portal_url': self.portal_url,
'effect': self.settings.nivoslider_effect,
'slices': self.settings.nivoslider_slices,
'boxcols': self.settings.nivoslider_boxcols,
'boxrows': self.settings.nivoslider_boxrows,
'animspeed': self.settings.duration,
'delay': self.settings.delay,
'directionnav': jsbool(self.settings.nivoslider_directionnav),
'directionnavhide': jsbool(self.settings.nivoslider_directionnavhide),
'pauseonhover': jsbool(self.settings.nivoslider_pauseonhover),
'randomstart': jsbool(self.settings.nivoslider_randomstart)
}
def theme_options(self):
data = {}
for name in self.schema.names():
field = self.schema[name]
if not IField.providedBy(field):
continue
value = getattr(self.settings, name, None)
if value == None:
continue
name = name.replace(self.theme + '_', '', 1)
if IBool.providedBy(field):
data[name] = jsbool(value)
elif IChoice.providedBy(field) or ITextLine.providedBy(field):
data[name] = '"' + value + '"'
elif IInt.providedBy(field) or IFloat.providedBy(field):
data[name] = str(value)
return data
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria.js"></script>
<script type="text/javascript"
src="%(portal_url)s/%(js_file)s"></script>
<script type="text/javascript">
(function($){
$(document).ready(function() {
// Initialize Galleria
$('#galleria').galleria({
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s,
lightbox: %(lightbox)s,
carousel: %(carousel)s,
responsive: %(responsive)s,
carouselSteps: %(carousel_steps)s,
trueFullscreen: true,
thumbnails: %(thumbnails)s,
showImagenav: %(imagenav)s,
height: %(height)i
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info),
'lightbox': jsbool(self.settings.galleria_lightbox),
'carousel': jsbool(self.settings.galleria_carousel),
'responsive': jsbool(self.settings.galleria_responsive),
'carousel_steps': self.settings.galleria_carousel_steps,
'imagenav': jsbool(self.settings.galleria_imagenav),
'thumbnails': jsbool(self.settings.galleria_thumbnails),
'height': self.settings.galleria_height,
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria.js"></script>
<script type="text/javascript"
src="%(portal_url)s/%(js_file)s"></script>
<script type="text/javascript" id="ptg_custom">
(function($){
$(document).ready(function() {
// Initialize Galleria
$('#galleria').galleria({
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s,
lightbox: %(lightbox)s,
carousel: %(carousel)s,
responsive: %(responsive)s,
carouselSteps: %(carousel_steps)s,
trueFullscreen: true,
thumbnails: %(thumbnails)s,
showImagenav: %(imagenav)s,
height: %(height)i
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info),
'lightbox': jsbool(self.settings.galleria_lightbox),
'carousel': jsbool(self.settings.galleria_carousel),
'responsive': jsbool(self.settings.galleria_responsive),
'carousel_steps': self.settings.galleria_carousel_steps,
'imagenav': jsbool(self.settings.galleria_imagenav),
'thumbnails': jsbool(self.settings.galleria_thumbnails),
'height': self.settings.galleria_height,
}
def javascript(self):
return u"""
<script src="%(portal_url)s/++resource++ptg.galleria/jquery-1.11.3.js"></script>
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria-1.4.2.js"></script>
<script type="text/javascript">
var jq1113 = jQuery.noConflict(true);
jq1113(function(){
Galleria.loadTheme('%(js_file)s');
Galleria.run('#galleria');
Galleria.configure({
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s,
lightbox: %(lightbox)s,
carousel: %(carousel)s,
responsive: %(responsive)s,
carouselSteps: %(carousel_steps)s,
trueFullscreen: true,
thumbnails: %(thumbnails)s,
showImagenav: %(imagenav)s,
height: %(height)i
});
});
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info),
'lightbox': jsbool(self.settings.galleria_lightbox),
'carousel': jsbool(self.settings.galleria_carousel),
'responsive': jsbool(self.settings.galleria_responsive),
'carousel_steps': self.settings.galleria_carousel_steps,
'imagenav': jsbool(self.settings.galleria_imagenav),
'thumbnails': jsbool(self.settings.galleria_thumbnails),
'height': self.settings.galleria_height,
}
def javascript(self):
return u"""
<script src="%(portal_url)s/++resource++ptg.galleria/jquery-1.11.3.js"></script>
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleria/galleria-1.4.2.js"></script>
<script type="text/javascript">
var jq1113 = jQuery.noConflict(true);
jq1113(function(){
Galleria.loadTheme('%(js_file)s');
Galleria.run('#galleria');
Galleria.configure({
transitionSpeed: %(duration)i,
transition: "%(transition)s",
autoplay: %(autoplay)s,
clicknext: true,
showInfo: %(showInfo)s,
lightbox: %(lightbox)s,
carousel: %(carousel)s,
responsive: %(responsive)s,
carouselSteps: %(carousel_steps)s,
trueFullscreen: true,
thumbnails: %(thumbnails)s,
showImagenav: %(imagenav)s,
height: %(height)i
});
});
</script>
""" % {
'portal_url': self.portal_url,
'js_file': self.js_theme_files[self.settings.galleria_theme],
'duration': self.settings.duration,
'transition': self.settings.galleria_transition,
'autoplay': self.settings.timed and \
str(self.settings.delay) or 'false',
'showInfo': jsbool(self.settings.galleria_auto_show_info),
'lightbox': jsbool(self.settings.galleria_lightbox),
'carousel': jsbool(self.settings.galleria_carousel),
'responsive': jsbool(self.settings.galleria_responsive),
'carousel_steps': self.settings.galleria_carousel_steps,
'imagenav': jsbool(self.settings.galleria_imagenav),
'thumbnails': jsbool(self.settings.galleria_thumbnails),
'height': self.settings.galleria_height,
}
def javascript(self):
outlineType = "hs.outlineType = '%s';" % \
self.settings.highslide_outlineType
wrapperClassName = ''
if 'drop-shadow' in outlineType:
wrapperClassName = 'dark borderless floating-caption'
outlineType = ''
elif 'glossy-dark' in outlineType:
wrapperClassName = 'dark'
if len(wrapperClassName) == 0:
wrapperClassName = 'null'
else:
wrapperClassName = "'%s'" % wrapperClassName
return u"""
<script type="text/javascript"
src="%(base_url)s/highslide-with-gallery.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css"
href="%(base_url)s/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '%(base_url)s/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
%(outlineType)s
hs.wrapperClassName = %(wrapperClassName)s;
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
hs.autoplay = %(timed)s;
hs.transitionDuration = %(duration)i;
hs.addSlideshow({
interval: %(delay)i,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
position: '%(overlay_position)s center',
opacity: .7,
hideOnMouseOut: true
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
var auto_start = %(start_automatically)s;
var start_image_index = %(start_index_index)i;
(function($){
$(document).ready(function() {
var images = $('a.highslide');
if(images.length <= start_image_index){
start_image_index = 0;
}
if(auto_start){
$(images[start_image_index]).trigger('click');
}
});
})(jQuery);
</script>
""" % {
'outlineType': outlineType,
'wrapperClassName': wrapperClassName,
'delay': self.settings.delay,
'timed': jsbool(self.settings.timed),
'duration': self.settings.duration,
'start_automatically': jsbool(
self.settings.start_automatically or self.settings.timed),
'start_index_index': self.start_image_index,
'overlay_position': \
self.settings.highslide_slideshowcontrols_position,
'base_url': self.typeStaticFiles
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleriffic/jquery.galleriffic.js"></script>
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleriffic/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
(function($){
$(document).ready(function() {
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
var captionOpacity = 0.7;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: %(delay)i,
numThumbs: %(batch_size)i,
preloadAhead: 10,
enableTopPager: %(toppager)s,
enableBottomPager: %(bottompager)s,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: %(sscontrols)s,
renderNavControls: %(navcontrols)s,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: %(timed)s,
syncTransitions: true,
defaultTransitionDuration: %(duration)i,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(slide, caption, isSync, callback) {
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0,
callback);
caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
},
onTransitionIn: function(slide, caption, isSync) {
var duration = this.getDefaultTransitionDuration(isSync);
slide.fadeTo(duration, 1.0);
var slideImage = slide.find('img');
caption.width(slideImage.width())
.css({
'bottom' : Math.floor((slide.height() -
slideImage.outerHeight()) / 2),
'left' : Math.floor((slide.width() -
slideImage.width()) / 2) +
slideImage.outerWidth() - slideImage.width()
})
.fadeTo(duration, captionOpacity);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
},
onImageAdded: function(imageData, $li) {
$li.opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
}
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'timed': jsbool(self.settings.timed),
'delay': self.settings.delay,
'duration': self.settings.duration,
'batch_size': self.settings.batch_size,
'toppager': jsbool(self.settings.gallerific_toppager),
'bottompager': jsbool(self.settings.gallerific_bottompager),
'sscontrols': jsbool(self.settings.gallerific_sscontrols),
'navcontrols': jsbool(self.settings.gallerific_navcontrols),
}
def javascript(self):
outlineType = "hs.outlineType = '%s';" % \
self.settings.highslide_outlineType
wrapperClassName = ''
if 'drop-shadow' in outlineType:
wrapperClassName = 'dark borderless floating-caption'
outlineType = ''
elif 'glossy-dark' in outlineType:
wrapperClassName = 'dark'
if len(wrapperClassName) == 0:
wrapperClassName = 'null'
else:
wrapperClassName = "'%s'" % wrapperClassName
return u"""
<script type="text/javascript"
src="%(base_url)s/highslide-with-gallery.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css"
href="%(base_url)s/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript">
hs.graphicsDir = '%(base_url)s/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
%(outlineType)s
hs.wrapperClassName = %(wrapperClassName)s;
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
hs.autoplay = %(timed)s;
hs.transitionDuration = %(duration)i;
hs.addSlideshow({
interval: %(delay)i,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
position: '%(overlay_position)s center',
opacity: .7,
hideOnMouseOut: true
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
var auto_start = %(start_automatically)s;
var start_image_index = %(start_index_index)i;
(function($){
$(document).ready(function() {
var images = $('a.highslide');
if(images.length <= start_image_index){
start_image_index = 0;
}
if(auto_start){
$(images[start_image_index]).trigger('click');
}
});
})(jQuery);
</script>
""" % {
'outlineType': outlineType,
'wrapperClassName': wrapperClassName,
'delay': self.settings.delay,
'timed': jsbool(self.settings.timed),
'duration': self.settings.duration,
'start_automatically': jsbool(
self.settings.start_automatically or self.settings.timed),
'start_index_index': self.start_image_index,
'overlay_position': \
self.settings.highslide_slideshowcontrols_position,
'base_url': self.typeStaticFiles
}
def javascript(self):
return u"""
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleriffic/jquery.galleriffic.js"></script>
<script type="text/javascript"
src="%(portal_url)s/++resource++ptg.galleriffic/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
(function($){
$(document).ready(function() {
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
var captionOpacity = 0.7;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: %(delay)i,
numThumbs: %(batch_size)i,
preloadAhead: 10,
enableTopPager: %(toppager)s,
enableBottomPager: %(bottompager)s,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: %(sscontrols)s,
renderNavControls: %(navcontrols)s,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: %(timed)s,
syncTransitions: true,
defaultTransitionDuration: %(duration)i,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(slide, caption, isSync, callback) {
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0,
callback);
caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
},
onTransitionIn: function(slide, caption, isSync) {
var duration = this.getDefaultTransitionDuration(isSync);
slide.fadeTo(duration, 1.0);
var slideImage = slide.find('img');
caption.width(slideImage.width())
.css({
'bottom' : Math.floor((slide.height() -
slideImage.outerHeight()) / 2),
'left' : Math.floor((slide.width() -
slideImage.width()) / 2) +
slideImage.outerWidth() - slideImage.width()
})
.fadeTo(duration, captionOpacity);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
},
onImageAdded: function(imageData, $li) {
$li.opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
}
});
});
})(jQuery);
</script>
""" % {
'portal_url': self.portal_url,
'timed': jsbool(self.settings.timed),
'delay': self.settings.delay,
'duration': self.settings.duration,
'batch_size': self.settings.batch_size,
'toppager' : jsbool(self.settings.gallerific_toppager),
'bottompager': jsbool(self.settings.gallerific_bottompager),
'sscontrols': jsbool(self.settings.gallerific_sscontrols),
'navcontrols': jsbool(self.settings.gallerific_navcontrols),
}
