View mode buttons fixes, support for hoverView.
This commit is contained in:
Fredrik Erlandsson
parent
ced08c6dfb
commit
b6d2ac9be5
|
|
@ -335,7 +335,9 @@ cursor: hand; /* for IE 5.x */
|
|||
#viewControls .viewSwitcher:hover, #viewControls .sel-with-viewSwitcher, #viewControls .hover-with-viewSwitcher {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#viewControls .sel-with-viewSwitcher {
|
||||
cursor: default;
|
||||
}
|
||||
#viewControls #grid {
|
||||
background: url('grid.png') center left no-repeat;
|
||||
text-indent: 20px;
|
||||
|
|
|
|||
44
js/pear.js
44
js/pear.js
|
|
@ -254,6 +254,7 @@ $(function() {
|
|||
$('#next_detail').click(function(){ swatchImg(currentImg+1); });
|
||||
|
||||
if(!slideshowImages.length) opt=1;
|
||||
opt=1;
|
||||
switch (opt) {
|
||||
case 1:
|
||||
switchToGrid();
|
||||
|
|
@ -273,9 +274,9 @@ $(function() {
|
|||
function switchToGrid()
|
||||
{
|
||||
toggleReflex(true);
|
||||
if($('pearImageFlow')) $('pearImageFlow').hide();
|
||||
$('ContentAlbum').show();
|
||||
if(!$('mosaicGridContainer')) return;
|
||||
$('#pearImageFlow').hide();
|
||||
$('#ContentAlbum').show();
|
||||
if(!$('#mosaicGridContainer').length) return;
|
||||
mosaicView=false;
|
||||
maxSize=225;
|
||||
checkCookie();
|
||||
|
|
@ -290,9 +291,9 @@ function switchToGrid()
|
|||
function switchToMosaic()
|
||||
{
|
||||
toggleReflex(false);
|
||||
if($('pearImageFlow')) $('pearImageFlow').hide(); //.hide();
|
||||
$('ContentAlbum').show();
|
||||
if(!$('mosaicGridContainer')){return;}
|
||||
$('#pearImageFlow').hide(); //.hide();
|
||||
$('#ContentAlbum').show();
|
||||
if(!$('#mosaicGridContainer').length) return;
|
||||
mosaicView=true;
|
||||
maxSize=125;
|
||||
checkCookie();
|
||||
|
|
@ -344,16 +345,16 @@ function togglePlayPause()
|
|||
function focusImage(id)
|
||||
{
|
||||
currentImg=id;
|
||||
$('imageTitleLabel').update("<h2>"+slideshowImages[id][4]+"</h2>");
|
||||
$('play_detail').hide();
|
||||
$('pause_detail').hide();
|
||||
$('#imageTitleLabel').html("<h2>"+slideshowImages[id][4]+"</h2>");
|
||||
$('#play_detail').hide();
|
||||
$('#pause_detail').hide();
|
||||
swatchImg(id);
|
||||
new Effect.Appear('detailView', { duration: 1.0 });
|
||||
$('#detailView').fadeIn('slow');
|
||||
hideHoverV = setTimeout("hideHoverView()",3000);
|
||||
//Image count.
|
||||
detailViewMode=true;
|
||||
updateHash();
|
||||
new Ajax.Request(slideshowImages[currentImg][1], { method:'get' });
|
||||
$.get(slideshowImages[currentImg][1]);
|
||||
}
|
||||
|
||||
function startImageFlow()
|
||||
|
|
@ -419,31 +420,18 @@ function setKeys()
|
|||
}
|
||||
function showHoverView(){
|
||||
if(hideHoverV != null) clearTimeout(hideHoverV);
|
||||
$('hoverView').show();
|
||||
$('#hoverView').show();
|
||||
hideHoverV = setTimeout("hideHoverView()",3000);
|
||||
}
|
||||
function hideHoverView(){
|
||||
if(!hovering) $('hoverView').fade();
|
||||
if(!hovering) $('#hoverView').fadeOut();
|
||||
hideHoverV = null;
|
||||
}
|
||||
var hideHoverV=null;
|
||||
var hovering=false;
|
||||
function switchMode(mode){
|
||||
$('mosaic').className="viewSwitcher mosaic mosaic-with-viewSwitcher";
|
||||
$('grid').className="viewSwitcher grid grid-with-viewSwitcher";
|
||||
$('carousel').className="viewSwitcher carousel carousel-with-viewSwitcher";
|
||||
|
||||
switch(mode){
|
||||
case 'grid':
|
||||
$('grid').className="sel grid viewSwitcher grid-with-sel grid-with-viewSwitcher sel-with-viewSwitcher grid-with-sel-with-viewSwitcher";
|
||||
break;
|
||||
case 'mosaic':
|
||||
$('mosaic').className="mosaic viewSwitcher sel mosaic-with-viewSwitcher sel-with-viewSwitcher mosaic-with-sel mosaic-with-sel-with-viewSwitcher";
|
||||
break;
|
||||
case 'carousel':
|
||||
$('carousel').className="sel carousel viewSwitcher carousel-with-sel carousel-with-viewSwitcher sel-with-viewSwitcher carousel-with-sel-with-viewSeitcher";
|
||||
break;
|
||||
}
|
||||
$('#mosaic,#grid,#carousel').removeClass("sel sel-with-viewSwitcher");
|
||||
$('#'+mode).addClass("sel sel-with-viewSwitcher");
|
||||
}
|
||||
|
||||
function preFetch()
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@
|
|||
<? foreach ($children as $i => $child): ?>
|
||||
<? $item_class = "g-photo"; ?>
|
||||
<? if ($child->is_album()): ?>
|
||||
<? $item_class = "g-album\" \"onclick=\"window.location='".$child->url()."/'+getAlbumHash(skimimg);"; ?>
|
||||
<? $item_class = "g-album\" onclick=\"window.location='".$child->url()."/'+getAlbumHash(skimimg);"; ?>
|
||||
<? endif ?>
|
||||
<? $img_class = "g-thumbnail"; ?>
|
||||
<? if ($child->is_photo()): ?>
|
||||
<? $img_class = "g-thumbnail p-photo"; ?>
|
||||
<? endif ?>
|
||||
<div id="g-thumb-id-<?= $child->id ?>" class="gallery-thumb <?= $item_class ?>">
|
||||
<div id="g-thumb-id-<?= $child->id ?>" class="g-item gallery-thumb <?= $item_class ?>">
|
||||
<?= $theme->thumb_top($child) ?>
|
||||
<? if ($child->is_album()): ?>
|
||||
<div class="gallery-thumb-round" style="height: 200px; width: 200px;"></div>
|
||||
|
|
|
|||
23
views/hoverView.html.php
Normal file
23
views/hoverView.html.php
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?php defined("SYSPATH") or die("No direct script access.") ?>
|
||||
<div id="detailView" style="display: none; z-index:99997;" onmousemove="showHoverView();">
|
||||
<div class="overlay"> </div>
|
||||
<div class="content">
|
||||
<div class="imageContainer">
|
||||
<div id="backToAlbumLink" class="dark_theme">
|
||||
<button id="backToAlbumButton" class="large push large-with-push" title="Back to Album" onclick="hideDetailView();"> <div class="outer"> <div id="backToAlbumButtonLabel" class="label">Back to Album</div> </div> </button>
|
||||
</div>
|
||||
<div id="detailImageView" class=""> <img style="visibility: visible;" src="" alt="" id="img_detail"/> </div>
|
||||
<div class="titleLabel" id="imageTitleLabel" style="bottom: width: 624px;"></div>
|
||||
</div>
|
||||
<div id="hoverView" class="" onmouseover="hovering=true;" onmouseout="hovering=false;">
|
||||
<div id="hoverViewMenu">
|
||||
<div id="download_detail" title="Download this photo" class="download_detail" onclick="document.location=slideshowImages[currentImg][5]"> </div>
|
||||
<div id="prev_detail" title="(P)revious" class="prev_detail"> </div>
|
||||
<div id="pause_detail" style="display: none;" title="Pause" class="pause_detail" onclick="togglePlayPause();"> </div>
|
||||
<div id="play_detail" style="display: none;" title="Play" class="play_detail" onclick="togglePlayPause();"> </div>
|
||||
<div id="next_detail" title="(N)ext" class="next_detail"> </div>
|
||||
<div id="info_detail" title="Show more information about this photo" class="info_detail" onclick="document.location=slideshowImages[currentImg][1]"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,11 +80,12 @@
|
|||
<?= $theme->get_combined("css") ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?= $theme->url("css/pear.css") ?>" media="screen,print,projection" />
|
||||
<link rel="stylesheet" type="text/css" href="<?= $theme->url("icons/pear.css") ?>" media="screen,print,projection" />
|
||||
<script type="text/javascript" src="<?= $theme->url("js/pear.js") ?>" />
|
||||
<script type="text/javascript" src="<?= $theme->url("js/pear.js"); ?>"></script>
|
||||
</head>
|
||||
|
||||
<body <?= $theme->body_attributes() ?> onload="bodyLoad(1);">
|
||||
<?= $theme->page_top() ?>
|
||||
<body <?= $theme->body_attributes() ?>>
|
||||
<?= new View("hoverView.html") ?>
|
||||
<?= $theme->page_top() ?>
|
||||
<?= $theme->site_status() ?>
|
||||
<div id="g-header" class="ui-helper-clearfix" style="display: none;">
|
||||
<div id="g-banner">
|
||||
|
|
@ -112,7 +113,7 @@
|
|||
<span class="count">(<?//$theme->item()->children;?>)</span>
|
||||
</div>
|
||||
<div class="rNavBar">
|
||||
<button class="large push large-with-push" onclick="$('#g-header').css('display', 'block');toggleSidebar('ContentAlbum','sidebar'); return false;"> <div class="outer"> <div class="label" id="sidebarButton">Show Options</div></div></button>
|
||||
<button class="large push large-with-push" onclick="$('#g-header').slideToggle('normal', function(){$('#g-header').is(':hidden') ? $('#sidebarButton').text('Show Options') : $('#sidebarButton').text('Hide Options')});//);toggleSidebar('ContentAlbum','sidebar'); return false;"> <div class="outer"> <div class="label" id="sidebarButton">Show Options</div></div></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -136,15 +137,14 @@
|
|||
</div>
|
||||
|
||||
<div class="" style="" id="viewControls">
|
||||
<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher grid-with-sel grid-with-viewSwitcher sel-with-viewSwitcher grid-with-sel-with-viewSwitcher" onclick="switchToGrid();"><!--the extra class names, i.e. grid, mosaic, carousel, and slideshow, are for IE6, because it won't do #id.classname sometimes. Flaky. -->
|
||||
<!-- <div style="margin-top:-2px;margin-left:-2px;"> -->
|
||||
<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid();">
|
||||
<div class="label">Grid</div>
|
||||
</div>
|
||||
<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic mosaic-with-viewSwitcher" onclick="switchToMosaic();">
|
||||
<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic" onclick="switchToMosaic();">
|
||||
<!-- <div style="margin-top:-2px;margin-left:-4px;"> -->
|
||||
<div class="label">Mosaic</div>
|
||||
</div>
|
||||
<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher carousel-with-viewSwitcher" onclick="startImageFlow();">
|
||||
<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher" onclick="startImageFlow();">
|
||||
<!-- <div style="margin-top:-2px;"> -->
|
||||
<div class="label">Carousel</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in New Issue
Block a user