flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 10:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

partial transition done, next cleanup and migration to real zooming...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-24 15:38:54 +04:00
parent 92840a1ca3
commit 3799e21a77
5 changed files with 118 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
ui/experiment-ribbon-navigation-n-zoom.html
View File

@ -18,11 +18,11 @@ XXX zoom animation is odd...
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
$('.square').click(squareClick) $('.image').click(imageClick)
fieldSize(300, 200) fieldSize(300, 200)
$('.current.square').click() $('.current.image').click()
}) })
function toggleMarkers(){ function toggleMarkers(){
@ -34,7 +34,7 @@ function toggleMarkers(){
} }
} }
function squareClick(){ function imageClick(){
// set classes... // set classes...
$('.current').removeClass('current') $('.current').removeClass('current')
$(this) $(this)
@ -115,7 +115,7 @@ function squareClick(){
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.square { .image {
width: 50px; width: 50px;
height: 50px; height: 50px;
background: silver; background: silver;
@ -130,13 +130,13 @@ function squareClick(){
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.image { .pic {
background: no-repeat 50% black; background: no-repeat 50% black;
background-size: contain; background-size: contain;
background-image: url(images/350px/DSC_3501.jpg); background-image: url(images/350px/DSC_3501.jpg);
} }
.current.square { .current.image {
background-color: gray; background-color: gray;
} }
@ -166,76 +166,76 @@ Size:
<div class="container animated"> <div class="container animated">
<div class="field"> <div class="field">
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon" style="margin-left: 40px;"> <div class="ribbon" style="margin-left: 40px;">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon current"> <div class="ribbon current">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square current">3</div> <div class="image current">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon" style="margin-left: -100px;"> <div class="ribbon" style="margin-left: -100px;">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square image">5</div> <div class="image pic">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
<div class="ribbon"> <div class="ribbon">
<div class="square">1</div> <div class="image">1</div>
<div class="square">2</div> <div class="image">2</div>
<div class="square">3</div> <div class="image">3</div>
<div class="square">4</div> <div class="image">4</div>
<div class="square">5</div> <div class="image">5</div>
<div class="square">6</div> <div class="image">6</div>
<div class="square">7</div> <div class="image">7</div>
</div> </div>
</div> </div>
<div class="h-marker"></div> <div class="h-marker"></div>

20
ui/gallery-prototype.js
View File

@ -46,7 +46,7 @@ function setupGestures(){
function setupControlElements(){ function setupControlElements(){
// images... // images...
$(".image").click(handleImageClick) $(".image").click(setCurrentImage)
// buttons... // buttons...
$('.next-image').click(nextImage) $('.next-image').click(nextImage)
@ -70,7 +70,7 @@ function loadImages(json){
.css({ 'background-image': 'url('+images[i]+')' }) .css({ 'background-image': 'url('+images[i]+')' })
// set a unique id for each image... // set a unique id for each image...
.attr({'id': i}) .attr({'id': i})
.click(handleImageClick) .click(setCurrentImage)
.appendTo(ribbon) .appendTo(ribbon)
} }
ribbon.children().first().click() ribbon.children().first().click()
@ -80,7 +80,22 @@ function loadImages(json){
/*************************************************** Event Handlers **/ /*************************************************** 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) { function handleImageClick(e) {
var cur = $(this) var cur = $(this)
@ -111,6 +126,7 @@ function handleImageClick(e) {
// XXX do I need this??? // XXX do I need this???
e.preventDefault(); e.preventDefault();
} }
*/

15
ui/gallery.css
View File

@ -1,10 +1,14 @@
.image { .image {
/* new markup... */
float: left;
/* old markup...
position: relative; position: relative;
display: inline-block;
*/
width: 350px; width: 350px;
height: 350px; height: 350px;
display: inline-block;
background: no-repeat 50% black; background: no-repeat 50% black;
background-size: contain; background-size: contain;
@ -110,8 +114,11 @@
.field { .field {
position: relative; position: relative;
overflow: visible; overflow: visible;
/* XXX replace this with transform:scale(...) */
zoom: 1;
top: 0px; top: 0px;
left: -100px; left: 0px;
margin-top: 0px;
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
@ -127,7 +134,7 @@
overflow: visible; overflow: visible;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
text-align: center; /*text-align: center;*/
opacity: 0.2; opacity: 0.2;
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
@ -152,8 +159,10 @@
} }
.current.ribbon { .current.ribbon {
/*
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
*/
opacity: 1.0; opacity: 1.0;

3
ui/gallery.html
View File

@ -33,6 +33,9 @@ function setup(){
setupGestures() setupGestures()
setupControlElements() setupControlElements()
// XXX
//fieldSize(800, 500)
// load images... // load images...
// XXX not allowed... // XXX not allowed...
//$.getJSON('images.js', loadImages}) //$.getJSON('images.js', loadImages})

46
ui/ui.js
View File

@ -32,16 +32,16 @@
// get the vertical offset of the center of square from center of container // get the vertical offset of the center of square from center of container
// NOTE: this does not account for field margins // NOTE: this does not account for field margins
function getCurrentVerticalOffset(square){ function getCurrentVerticalOffset(image){
if(square == null){ if(image == null){
square = $('.square.current') image = $('.image.current')
} }
var zoom = $('.field').css('zoom') var zoom = $('.field').css('zoom')
var ribbons = $('.ribbon') var ribbons = $('.ribbon')
var ribbon = square.parents('.ribbon') var ribbon = image.parents('.ribbon')
var squares = ribbon.children('.square') var images = ribbon.children('.image')
// vertical... // vertical...
var H = $('.container').height() var H = $('.container').height()
@ -62,23 +62,23 @@ function getCurrentVerticalOffset(square){
// get the horizontal offset of the center of square from center of container // get the horizontal offset of the center of square from center of container
// NOTE: this does not account for field margins // NOTE: this does not account for field margins
function getCurrentHorizontalOffset(square){ function getCurrentHorizontalOffset(image){
if(square == null){ if(image == null){
square = $('.square.current') image = $('.image.current')
} }
var zoom = $('.field').css('zoom') var zoom = $('.field').css('zoom')
var ribbon = square.parents('.ribbon') var ribbon = image.parents('.ribbon')
var squares = ribbon.children('.square') var images = ribbon.children('.image')
var W = $('.container').width() var W = $('.container').width()
var w = squares.outerWidth(true) var w = images.outerWidth(true)
// margin... // margin...
// XXX do we need this? // XXX do we need this?
var mw = w - squares.outerWidth() var mw = w - images.outerWidth()
// current square position (1-based) // current square position (1-based)
var sn = squares.index(square) + 1 var sn = images.index(image) + 1
var l = sn * (w - mw/2) var l = sn * (w - mw/2)
return -l + W/2 + w/2 return -l + W/2 + w/2
@ -94,16 +94,16 @@ function centerSquare(){
alignRibbon() alignRibbon()
} }
function alignRibbon(square, position){ function alignRibbon(image, position){
// default values... // default values...
if(square == null){ if(image == null){
square = $('.square.current') image = $('.image.current')
} }
if(position == null){ if(position == null){
position = 'center' position = 'center'
} }
var ribbon = square.parents('.ribbon') var ribbon = image.parents('.ribbon')
// account for margined field... // account for margined field...
// NOTE: this enables us to cheat and shift all the ribbons just // NOTE: this enables us to cheat and shift all the ribbons just
@ -112,8 +112,8 @@ function alignRibbon(square, position){
if(!cml){ if(!cml){
cml = 0 cml = 0
} }
var h_offset = getCurrentHorizontalOffset(square) - cml var h_offset = getCurrentHorizontalOffset(image) - cml
var w = $('.square').outerWidth(true) var w = $('.image').outerWidth(true)
switch(position){ switch(position){
case 'before': case 'before':
@ -185,8 +185,8 @@ function fitImage(){
var H = $('.container').height() var H = $('.container').height()
var W = $('.container').width() var W = $('.container').width()
var h = $('.square.current').height() var h = $('.image.current').height()
var w = $('.square.current').width() var w = $('.image.current').width()
var f = Math.min(H/h, W/w) var f = Math.min(H/h, W/w)
@ -197,9 +197,9 @@ function fitThreeImages(){
var H = $('.container').height() var H = $('.container').height()
var W = $('.container').width() var W = $('.container').width()
var h = $('.square.current').height() var h = $('.image.current').height()
// XXX cheating, need to get three widths... // 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) var f = Math.min(H/h, W/w)