Die Camera slideshow ist ein responsiver Open-Source-Slider. Die Slideshow funktioniert mit allen gängigen Browsern sowie mobilen Geräten.
Bei Bedarf kann im Konstanten Editor "jQuery Mobile" und "jQuery Easing" geladen werden.
Für die wichtigsten Einstellungen, stehen Optionen in der Flexform bereit (s. Screenshots).
Camera Setup:
plugin.tx_newsslider {
settings {
camera {
# topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
alignment = center
# true, false
autoAdvance = 1
# true, false. Auto-advancing for mobile devices
mobileAutoAdvance = 1
# leftToRight, rightToLeft, topToBottom, bottomToTop
barDirection = leftToRight
# left, right, top, bottom
barPosition = bottom
cols = 6
# for the complete list jqueryui.com/demos/effect/easing.html
easing = easeInOutExpo
# leave empty if you want to display the same easing on mobile devices and on desktop etc.
mobileEasing =
# random, simpleFade, curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop
# N.B.: you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'
fx = random
# leave empty if you want to display the same effect on mobile devices and on desktop etc.
mobileFx =
# to make the grid blocks slower than the slices, this value must be smaller than transPeriod
gridDifference = 250
# here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or auto
height = 50%
# true, false. Pause on state hover. Not available for mobile devices
hover = 1
# the path to the image folder (it serves for the blank.gif, when you want to display videos)
imagePath = EXT:t3sbootstrap/Resources/Public/Styles/Camera/images/
# pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)
loader = pie
loaderColor = #eeeeee
loaderBgColor = #222222
# 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
loaderOpacity = .8
# how many empty pixels you want to display between the loader and its background
loaderPadding = 2
# the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter
loaderStroke = 7
# you can also leave it blank
minHeight = 200px
# if true the navigation button (prev, next and play/stop buttons) will be visible, if false they will be always hidden
navigation = 1
# if true the navigation button (prev, next and play/stop buttons) will be visible on hover state only, if false they will be visible always
navigationHover = 1
mobileNavHover = 1
# true, false. Decide to put a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer)
overlayer = 1
# true, false
pagination = 1
# true or false, to display or not the play/pause buttons
playPause = 1
# true, false. It stops the slideshow when you click the sliders
pauseOnClick = 1
pieDiameter = 38
# 'rightTop', 'leftTop', 'leftBottom', 'rightBottom'
piePosition = rightTop
# true, false. Select true if you don't want that your images are cropped
portrait = 0
rows = 4
# if 0 the same value of cols
slicedCols = 12
# if 0 the same value of rows
slicedRows = 8
# next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide
slideOn = random
# true, false
thumbnails = 0
# milliseconds between the end of the sliding effect and the start of the nex one
time = 7000
# length of the sliding effect in milliseconds
transPeriod = 1500
video.width = 1110
video.height = 555
}
}
}
Weitere Infos: