Dies ist eine Diashow-Demo, die zusammengestellt wurde, um eine jQuery-Manipulation der CSS3-Rotation und -Übersetzung auszuprobieren. Es basiert auf dem alten View Master-Spielzeug und zeigt Fotos von einem Roadtrip quer durchs Land
Code
<style>
.vmSlideshow {
width: 910px;
height: 910px;
padding-top: 455px;
margin: 0 auto;
display: none;
position: relative;
background: -webkit-gradient(radial, center center, 0, center center, 455, from( rgba(255, 255, 255, 0.6) ), to( transparent ) );
background: -moz-radial-gradient( center center, closest-side, rgba(255, 255, 255, 0.6), transparent );
}
.vmSlideshow .holder {
width: 100px; /* outer ring images size is defined by this width */
margin: 0 auto;
-webkit-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
.vmSlideshow img {
width: 100%;
position: absolute;
border: solid 1px #fff;
cursor: pointer;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
.vmSlideshow .current {
width: 600px;
}
.vmSlideshow .current img {
border-width: 8px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 1);
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
/* Next and Previous Buttons */
.vmSlideshow #prev, .vmSlideshow #next {
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 10;
background: url('arrow.png') no-repeat;
text-indent: -9999em;
opacity: 0.8;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
.vmSlideshow #prev {
left: 85px;
}
.vmSlideshow #next {
right: 85px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1); /* mirror the prev button */
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.vmSlideshow #prev:hover, .vmSlideshow #next:hover {
opacity: 1;
}
.vmSlideshow #prev:active, .vmSlideshow #next:active {
margin-top: -23px; /* 2px bump */
}
</style>
<section class="article__demo">
<section id="gallery">
</section>
<script src="/js_webseite/jquery.js"></script>
<script>
/*
* jQuery ViewMaster plugin
*
* Developed by Matthew Lein
* matthewlein.com
*
* Released under the MIT license.
* Please leave this license info and author info intact.
*
* Copyright 2011
*
* Tested with jQuery 1.5.2
*
* Tested browsers: Safari 4+, Firefox 4+, Chrome 11+, iOS 4.3 Mobile Safari, Opera 11.10
*
* Left/Right arrow key support, click any photo to view it.
* Optional next/prev arrows
*
* Due to local testing security with the xml, test on a server, or visit matthewlein.com/viewmaster/
*/
(function($){
jQuery.fn.viewMaster = function(options) {
// default options
var defaults = {
source : null,
arrows : false
}
var opts = $.extend(defaults, options);
// proceed if a matching element is found
if (this.length) {
return this.each( function(){
var $element = $(this)
$.ajax({
type: "GET",
url: opts.source,
dataType: 'xml',
success: parseXml
});
function parseXml(xml) {
// to store all the images
var images = ""
$(xml).find("image").each(function() {
// if an image filename is found
if ( $(this).find('filename').length ) {
// get its filename
var filename = $(this).find('filename').text(),
title;
// and title
if ( $(this).find('title').length ) {
title = '" title="' + $(this).find('title').text() + '"'
} else {
title = ''
}
// add to the images string
newImg = '<div class="holder"><img src = "' + filename + '"' + title + '></div>'
}
//build a big string for quick injection
images += newImg
});
// put in the slideshow and controls
$element.append('<div class="vmSlideshow"></div>')
if ( opts.arrows ) {
$element.children('.vmSlideshow').append('<a id="prev" href="#"></a><a id="next" href="#"></a>')
}
//put in images
$('.vmSlideshow').append(images)
// start 'er up
init()
}
var rotation;
function init() {
// get the amount of rotation based on the number of images
rotation = (360 / $('.holder').length).toFixed(2)
$('.holder').each(function(index) {
// set all the rotations and store that in data, with index
// the .holder gets all the data
// translateZ for webkit GPU acceleration, downside uses more battery
var transform = 'rotate(' + -(rotation * index) + 'deg) translate(0, 380px)'
$(this).css({
'-webkit-transform' : transform + ' translateZ(0)',
'-moz-transform' : transform,
'-ms-transform' : transform,
'-o-transform' : transform,
'transform' : transform
}).data({
'rotation' : -(rotation * index),
'index' : index
})
});
// set the first one to show
var currentTransform = 'rotate( 0deg ) translate(0, -208px)'
$('.holder').first().css({
'-webkit-transform': currentTransform + ' translateZ(0)',
'-moz-transform' : currentTransform,
'-ms-transform' : currentTransform,
'-o-transform' : currentTransform,
'transform' : currentTransform
}).addClass('current')
//show the slideshow now that its built
$('.vmSlideshow').fadeIn(500)
// set next and prev handlers
$('.vmSlideshow #next').click( controls.nextSlide );
$('.vmSlideshow #prev').click( controls.prevSlide );
$('.holder img').click(function(event) {
controls.advance( $(this).parent('.holder').data('index') )
});
$(document).keydown( function(event) {
var key = event.keyCode
if (key === 37) {
//left arrow
controls.prevSlide(event)
} else if (key === 39) {
//right arrow
controls.nextSlide(event)
}
});
}
controls = {
advance : function(next) {
var currentIndex = $('.current').data('index'),
increment,
direction,
distance;
// There's gotta be an easier way...
if (next > currentIndex) {
if ( next - currentIndex < ( $('.holder').length - next ) + currentIndex ) {
// the next one is closer to the right
direction = 1
distance = next - currentIndex
} else {
// the next one is closer to the left
direction = -1
distance = ( $('.holder').length - next ) + currentIndex
}
} else { // next < currentIndex
if ( currentIndex - next < ( $('.holder').length - currentIndex ) + next ) {
// the next one is closer to the left
direction = -1
distance = currentIndex - next
} else {
// the next one is closer to the right
direction = 1
distance = ( $('.holder').length - currentIndex ) + next
}
}
increment = rotation * distance * direction
$('.holder').each(function( index ) {
var newRotation = $(this).data('rotation') + increment,
newTransform = 'rotate(' + ( newRotation ) + 'deg) translate(0, 380px)'
// set all the rotations and store that in data
$(this).css({
'-webkit-transform': newTransform + ' translateZ(0)',
'-moz-transform' : newTransform,
'-ms-transform' : newTransform,
'-o-transform' : newTransform,
'transform' : newTransform
}).data('rotation', newRotation )
});
//remove current slide
$('.current').removeClass('current')
//set next current and pull it to the center
$('.holder').eq(next).addClass('current')
// Number() to fix odd issue getting 0.14e-14 style numbers that would break it
var nextTransform = 'rotate(' + Number( $('.current').data('rotation') ).toFixed(2) + 'deg) translate(0, -208px)'
$('.current').css({
'-webkit-transform': nextTransform + ' translateZ(0)',
'-moz-transform' : nextTransform,
'-ms-transform' : nextTransform,
'-o-transform' : nextTransform,
'transform' : nextTransform
})
},
nextSlide : function(event) {
var key = event.keyCode,
currentSlide,
nextSlide;
event.preventDefault()
currentSlide = $('.current').data('index')
if (currentSlide === $('.holder').length - 1 ) {
// its at the last slide, go to beginning
nextSlide = 0
} else {
nextSlide = currentSlide + 1
}
controls.advance( nextSlide )
},
prevSlide : function(event) {
var currentSlide,
nextSlide;
event.preventDefault()
currentSlide = $('.current').data('index')
if (currentSlide === 0) {
// its at the first slide, go to end
nextSlide = $('.holder').length - 1
} else {
nextSlide = currentSlide - 1
}
controls.advance( nextSlide )
}
}
})
}
}
})(jQuery);
</script>
<script>
$(document).ready(function() {
$('#gallery').viewMaster({
source : '/daten_webseite/bilder.xml',
arrows : false // hide arrows
})
});
</script>
</section>