jQuery Galleria

Site Index





<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type="text/javascript" src="js/galleria-1.3.5.min.js"></script>

style は最低限の設定





<style>

    #galleria

        {height:460px}

		body .galleria-container{ background:#eccea6; }

</style>

href と src data-big は、同じ画像を使用





<div id="galleria">

    <a href="galleria/img001.jpg"><img src="galleria/img001.jpg",data-big="galleria/img001.jpg" data-title="001" data-description="001"></a>

    <a href="galleria/img002.jpg"><img src="galleria/img002.jpg",data-big="galleria/img002.jpg" data-title="002" data-description="002"></a>

    <a href="galleria/img003.jpg"><img src="galleria/img003.jpg",data-big="galleria/img003.jpg" data-title="003" data-description="003"></a>

	・

	・

</div>

classic を使用する。





画像切替は３秒のフェード

iPad　ではスライドにモディファイされる模様

表示間隔は６秒
<script>

    Galleria.loadTheme('js/themes/classic/galleria.classic.min.js');

	Galleria.configure({

		transition:'fade',

		transitionSpeed:'3000',

		imageCrop: true

	});

    Galleria.run('#galleria',{autoplay:6000});

</script>

galleria ドキュメント
http://galleria.io/docs/options/





以下パラメタ

autoplay

carousel

carouselSpeed

carouselSteps

clicknext

dailymotion

dataConfig( [HTML element] )

dataSelector

dataSort

dataSource

debug

dummy

easing

extend( [ options ] )

fullscreenCrop

fullscreenDoubleTap

fullscreenTransition

height

idleMode

idleTime

idleSpeed

imageCrop

imageMargin

imagePan

imagePanSmoothness

imagePosition

imageTimeout

initialTransition

keepSource

layerFollow

lightbox

lightboxFadeSpeed

lightboxTransitionSpeed

maxScaleRatio

maxVideoSize

overlayBackground

overlayOpacity

pauseOnInteraction

popupLinks

preload

queue

esponsive

show

showCounter

showInfo

showImagenav

swipe

thumbCrop

thumbDisplayOrder

thumbMargin

thumbnails

thumbPosition

thumbQuality

touchTransition

transition

transitionSpeed

trueFullscreen

variation

videoPoster

vimeo

wait

width

youtube




AX