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

split markers into a seporate set of files... make compleatly standalone...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-24 16:22:14 +04:00
parent 30aaa15226
commit b25b2a3973
4 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,10 @@ XXX zoom animation is odd...
--> -->
<link rel="stylesheet" href="markers.css">
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="markers.js"></script>
<script src="ui.js"></script> <script src="ui.js"></script>
<script> <script>
@ -25,15 +28,6 @@ $(document).ready(function(){
$('.current.image').click() $('.current.image').click()
}) })
function toggleMarkers(){
var marker = $('.v-marker, .h-marker')
if(marker.css('display') == 'none'){
marker.fadeIn()
} else {
marker.fadeOut()
}
}
function imageClick(){ function imageClick(){
// set classes... // set classes...
$('.current').removeClass('current') $('.current').removeClass('current')
@ -65,24 +59,6 @@ function imageClick(){
overflow: hidden; overflow: hidden;
} }
.h-marker {
position: absolute;
border-top: solid blue 1px;
height: 0px;
width: 100%;
top: 50%;
left: 0px;
}
.v-marker {
position: absolute;
border-left: solid blue 1px;
height: 100%;
width: 0px;
top: 0px;
left: 50%;
}
.field { .field {
position: relative; position: relative;
top: 0px; top: 0px;

7
ui/gallery.html
View File

@ -3,6 +3,7 @@
--> -->
<link rel="stylesheet" href="gallery.css"> <link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="markers.css">
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="jquery.touchSwipe.js"></script> <script src="jquery.touchSwipe.js"></script>
@ -17,6 +18,7 @@
<script src="gallery-prototype.js"></script> <script src="gallery-prototype.js"></script>
<script src="ui.js"></script> <script src="ui.js"></script>
<script src="markers.js"></script>
<!--script src="gallery.js"></script--> <!--script src="gallery.js"></script-->
@ -69,6 +71,8 @@ $(document).ready(setup);
<div class="image mock-image"></div--> <div class="image mock-image"></div-->
</div> </div>
</div> </div>
<div class="h-marker"></div>
<div class="v-marker"></div>
</div> </div>
<div class="controller"> <div class="controller">
<div class="demote">^</div> <div class="demote">^</div>
@ -79,6 +83,9 @@ $(document).ready(setup);
</div> </div>
<div class="demo-buttons"> <div class="demo-buttons">
<button onclick="toggleMarkers()">Toggle Guides</button>
<br><br>
<button onclick="firstImage()">first (home)</button> <button onclick="firstImage()">first (home)</button>
<button onclick="prevImage()">prev (left)</button> <button onclick="prevImage()">prev (left)</button>

21
ui/markers.css Executable file
View File

@ -0,0 +1,21 @@
.h-marker {
position: absolute;
border-top: solid blue 1px;
height: 0px;
width: 100%;
top: 50%;
left: 0px;
display: none;
}
.v-marker {
position: absolute;
border-left: solid blue 1px;
height: 100%;
width: 0px;
top: 0px;
left: 50%;
display: none;
}

10
ui/markers.js Executable file
View File

@ -0,0 +1,10 @@
function toggleMarkers(){
var marker = $('.v-marker, .h-marker')
if(marker.css('display') == 'none'){
marker.fadeIn()
} else {
marker.fadeOut()
}
}