mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
partial transition done, next cleanup and migration to real zooming...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
92840a1ca3
commit
3799e21a77
@ -18,11 +18,11 @@ XXX zoom animation is odd...
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.square').click(squareClick)
|
||||
$('.image').click(imageClick)
|
||||
|
||||
fieldSize(300, 200)
|
||||
|
||||
$('.current.square').click()
|
||||
$('.current.image').click()
|
||||
})
|
||||
|
||||
function toggleMarkers(){
|
||||
@ -34,7 +34,7 @@ function toggleMarkers(){
|
||||
}
|
||||
}
|
||||
|
||||
function squareClick(){
|
||||
function imageClick(){
|
||||
// set classes...
|
||||
$('.current').removeClass('current')
|
||||
$(this)
|
||||
@ -115,7 +115,7 @@ function squareClick(){
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.square {
|
||||
.image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: silver;
|
||||
@ -130,13 +130,13 @@ function squareClick(){
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.image {
|
||||
.pic {
|
||||
background: no-repeat 50% black;
|
||||
background-size: contain;
|
||||
background-image: url(images/350px/DSC_3501.jpg);
|
||||
}
|
||||
|
||||
.current.square {
|
||||
.current.image {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
@ -166,76 +166,76 @@ Size:
|
||||
<div class="container animated">
|
||||
<div class="field">
|
||||
<div class="ribbon">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon" style="margin-left: 40px;">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon current">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square current">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image current">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon" style="margin-left: -100px;">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square image">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image pic">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
<div class="ribbon">
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="image">1</div>
|
||||
<div class="image">2</div>
|
||||
<div class="image">3</div>
|
||||
<div class="image">4</div>
|
||||
<div class="image">5</div>
|
||||
<div class="image">6</div>
|
||||
<div class="image">7</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-marker"></div>
|
||||
|
||||
@ -46,7 +46,7 @@ function setupGestures(){
|
||||
|
||||
function setupControlElements(){
|
||||
// images...
|
||||
$(".image").click(handleImageClick)
|
||||
$(".image").click(setCurrentImage)
|
||||
|
||||
// buttons...
|
||||
$('.next-image').click(nextImage)
|
||||
@ -70,7 +70,7 @@ function loadImages(json){
|
||||
.css({ 'background-image': 'url('+images[i]+')' })
|
||||
// set a unique id for each image...
|
||||
.attr({'id': i})
|
||||
.click(handleImageClick)
|
||||
.click(setCurrentImage)
|
||||
.appendTo(ribbon)
|
||||
}
|
||||
ribbon.children().first().click()
|
||||
@ -80,7 +80,22 @@ function loadImages(json){
|
||||
|
||||
|
||||
/*************************************************** Event Handlers **/
|
||||
function setCurrentImage(){
|
||||
// set classes...
|
||||
$('.current').removeClass('current')
|
||||
$(this)
|
||||
.addClass('current')
|
||||
.parents('.ribbon')
|
||||
.addClass('current')
|
||||
|
||||
// position the field and ribbons...
|
||||
centerSquare()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// XXX depricated...
|
||||
/*
|
||||
function handleImageClick(e) {
|
||||
var cur = $(this)
|
||||
|
||||
@ -111,6 +126,7 @@ function handleImageClick(e) {
|
||||
// XXX do I need this???
|
||||
e.preventDefault();
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
.image {
|
||||
/* new markup... */
|
||||
float: left;
|
||||
/* old markup...
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
*/
|
||||
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
|
||||
display: inline-block;
|
||||
background: no-repeat 50% black;
|
||||
background-size: contain;
|
||||
|
||||
@ -110,8 +114,11 @@
|
||||
.field {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
/* XXX replace this with transform:scale(...) */
|
||||
zoom: 1;
|
||||
top: 0px;
|
||||
left: -100px;
|
||||
left: 0px;
|
||||
margin-top: 0px;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
@ -127,7 +134,7 @@
|
||||
overflow: visible;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
text-align: center;
|
||||
/*text-align: center;*/
|
||||
opacity: 0.2;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
@ -152,8 +159,10 @@
|
||||
}
|
||||
|
||||
.current.ribbon {
|
||||
/*
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
*/
|
||||
|
||||
opacity: 1.0;
|
||||
|
||||
|
||||
@ -33,6 +33,9 @@ function setup(){
|
||||
setupGestures()
|
||||
setupControlElements()
|
||||
|
||||
// XXX
|
||||
//fieldSize(800, 500)
|
||||
|
||||
// load images...
|
||||
// XXX not allowed...
|
||||
//$.getJSON('images.js', loadImages})
|
||||
|
||||
46
ui/ui.js
46
ui/ui.js
@ -32,16 +32,16 @@
|
||||
|
||||
// get the vertical offset of the center of square from center of container
|
||||
// NOTE: this does not account for field margins
|
||||
function getCurrentVerticalOffset(square){
|
||||
if(square == null){
|
||||
square = $('.square.current')
|
||||
function getCurrentVerticalOffset(image){
|
||||
if(image == null){
|
||||
image = $('.image.current')
|
||||
}
|
||||
|
||||
var zoom = $('.field').css('zoom')
|
||||
|
||||
var ribbons = $('.ribbon')
|
||||
var ribbon = square.parents('.ribbon')
|
||||
var squares = ribbon.children('.square')
|
||||
var ribbon = image.parents('.ribbon')
|
||||
var images = ribbon.children('.image')
|
||||
|
||||
// vertical...
|
||||
var H = $('.container').height()
|
||||
@ -62,23 +62,23 @@ function getCurrentVerticalOffset(square){
|
||||
|
||||
// get the horizontal offset of the center of square from center of container
|
||||
// NOTE: this does not account for field margins
|
||||
function getCurrentHorizontalOffset(square){
|
||||
if(square == null){
|
||||
square = $('.square.current')
|
||||
function getCurrentHorizontalOffset(image){
|
||||
if(image == null){
|
||||
image = $('.image.current')
|
||||
}
|
||||
|
||||
var zoom = $('.field').css('zoom')
|
||||
|
||||
var ribbon = square.parents('.ribbon')
|
||||
var squares = ribbon.children('.square')
|
||||
var ribbon = image.parents('.ribbon')
|
||||
var images = ribbon.children('.image')
|
||||
|
||||
var W = $('.container').width()
|
||||
var w = squares.outerWidth(true)
|
||||
var w = images.outerWidth(true)
|
||||
// margin...
|
||||
// XXX do we need this?
|
||||
var mw = w - squares.outerWidth()
|
||||
var mw = w - images.outerWidth()
|
||||
// current square position (1-based)
|
||||
var sn = squares.index(square) + 1
|
||||
var sn = images.index(image) + 1
|
||||
var l = sn * (w - mw/2)
|
||||
|
||||
return -l + W/2 + w/2
|
||||
@ -94,16 +94,16 @@ function centerSquare(){
|
||||
alignRibbon()
|
||||
}
|
||||
|
||||
function alignRibbon(square, position){
|
||||
function alignRibbon(image, position){
|
||||
// default values...
|
||||
if(square == null){
|
||||
square = $('.square.current')
|
||||
if(image == null){
|
||||
image = $('.image.current')
|
||||
}
|
||||
if(position == null){
|
||||
position = 'center'
|
||||
}
|
||||
|
||||
var ribbon = square.parents('.ribbon')
|
||||
var ribbon = image.parents('.ribbon')
|
||||
|
||||
// account for margined field...
|
||||
// NOTE: this enables us to cheat and shift all the ribbons just
|
||||
@ -112,8 +112,8 @@ function alignRibbon(square, position){
|
||||
if(!cml){
|
||||
cml = 0
|
||||
}
|
||||
var h_offset = getCurrentHorizontalOffset(square) - cml
|
||||
var w = $('.square').outerWidth(true)
|
||||
var h_offset = getCurrentHorizontalOffset(image) - cml
|
||||
var w = $('.image').outerWidth(true)
|
||||
|
||||
switch(position){
|
||||
case 'before':
|
||||
@ -185,8 +185,8 @@ function fitImage(){
|
||||
var H = $('.container').height()
|
||||
var W = $('.container').width()
|
||||
|
||||
var h = $('.square.current').height()
|
||||
var w = $('.square.current').width()
|
||||
var h = $('.image.current').height()
|
||||
var w = $('.image.current').width()
|
||||
|
||||
var f = Math.min(H/h, W/w)
|
||||
|
||||
@ -197,9 +197,9 @@ function fitThreeImages(){
|
||||
var H = $('.container').height()
|
||||
var W = $('.container').width()
|
||||
|
||||
var h = $('.square.current').height()
|
||||
var h = $('.image.current').height()
|
||||
// XXX cheating, need to get three widths...
|
||||
var w = $('.square.current').width()*3
|
||||
var w = $('.image.current').width()*3
|
||||
|
||||
var f = Math.min(H/h, W/w)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user