Camera Slideshow

t3s_headerslider hs-1

Camera is a responsive beautiful open source slideshow project.

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:

https://www.pixedelic.com/plugins/camera/

Slick Slider

Responsive, Einstellungen pro Breakpoint, CSS3, Swipes, Indikatoren, Pfeilen, Mouse-Dragging, Autoplay, Lazy-Loading, Fading, Infinite-Looping, einer…

Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market.

Camera Slideshow

Camera is a responsive beautiful open source slideshow project.

Flex Slider

An awesome, fully responsive jQuery slider.

Installation & Konfiguration

Bevor die EXT:newsslider installiert werden kann, muss die EXT:news (aus dem TER) installiert werden.