I'm been trying to build a simple Carousel effect for a set of photos. Its is easy to do using the Effects library with PrototypeJS but I'm having problems understanding how to implement this with CSS3.
I've built out some solutions but they have only worked if there order of the photos in the HTML is also the order in which you plan to navigate. That is not the case here.
Regardless of the order of the photos:
- To be able to use CSS3 based rules (translateX/transition etc) to animate the removal of the active image from view
- Replace it with any other image, as selected in the drop-down menu
- They both go in the same direction, as determined by the drop-down menu
- They both appear side by side
For example:
- The first photo is 'active' and in view
- I select "from Left to Right" format he menu
- I select "3" as the Photo Number
- I click "Go"
- As the 1st DIV of class 'photo' moves to the Right, the 3rd DIV (of class 'photo') is located to its left, and is also being moving in-sync to the Right
Some considerations:
- @webkit preferred, but whatever
- The CSS for layout, position, etc is intentionally non-existent so as not to hamper any solution
- I use PrototypeJS for the sake of simplicity, and you can too, or no library at all, but NOT jquery (sorry)
Example Markup to base Ideas & Suggestions Around
I tried to include the full html/css/js of the example page here but it kept rendering in part during Preview, so just in case it is linked here:
http://www.gimee.org/question.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Question</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<style>
#demo {
float: left;
width: 520px;
height: 100%;
overflow: hidden;
}
#container {
width: 3000px;
}
.photo {
float: left;
: 500px;
padding: 10px;
}
#controls {
float: left;
}
</style>
</head>
<body>
<div id="demo">
<div id="container">
<div class="active photo">
<img src="http://farm2.static.flickr.com/1161/4727417148_ed8d691aa3.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1013/4730980370_75cceea5be.jpg">
</div>
<div class="photo">
<img src="http://farm2.static.flickr.com/1401/4606449779_1bc79e6078.jpg">
</div>
<div class="photo">
<img src="http://farm5.static.flickr.com/4053/4690748949_db09007187.jpg">
</div>
</div>
</div>
<div id="controls">
<p>Direction:</p>
<select id="direction">
<option value="right">from Left to Right</option>
<option value="left">from Right to Left</option>
</select>
<p>Photo Number:</p>
<select id="photoNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p><a href="#" id="go">Go</a></p>
</div>
<script>
var Demo = {
run: function() {
console.log('Init');
Event.observe('go', 'click', this.go.bind(this));
},
go: function(e) {
var direction = $('direction').value;
var photoNum = $('photoNumber').value - 1;
console.log('direction:', direction, 'photoNum:', photoNum);
var container = $('container');
var photoCurrent = container.select('.active')[0];
var photoNext = container.select('.photo')[photoNum];
if (photoCurrent != photoNext) {
if (direction=="right") {
/*
Move the two photos, appearing side-by-side, from Left to Right
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Left to Right');
} else {
/*
Move the two photos, appearing side-by-side, from Right to Left
so that the 'Next' photo appears to push the 'Current' photo out
*/
console.log('from Right to Left');
}
} else {
console.log("Do nothing since you're asking for the currently active photo");
}
}
};
Demo.run();
</script>
</body>
</html>