View mode buttons fixes, support for hoverView.
This commit is contained in:
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 {
|
#viewControls .viewSwitcher:hover, #viewControls .sel-with-viewSwitcher, #viewControls .hover-with-viewSwitcher {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
#viewControls .sel-with-viewSwitcher {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
#viewControls #grid {
|
#viewControls #grid {
|
||||||
background: url('grid.png') center left no-repeat;
|
background: url('grid.png') center left no-repeat;
|
||||||
text-indent: 20px;
|
text-indent: 20px;
|
||||||
|
44
js/pear.js
44
js/pear.js
@ -254,6 +254,7 @@ $(function() {
|
|||||||
$('#next_detail').click(function(){ swatchImg(currentImg+1); });
|
$('#next_detail').click(function(){ swatchImg(currentImg+1); });
|
||||||
|
|
||||||
if(!slideshowImages.length) opt=1;
|
if(!slideshowImages.length) opt=1;
|
||||||
|
opt=1;
|
||||||
switch (opt) {
|
switch (opt) {
|
||||||
case 1:
|
case 1:
|
||||||
switchToGrid();
|
switchToGrid();
|
||||||
@ -273,9 +274,9 @@ $(function() {
|
|||||||
function switchToGrid()
|
function switchToGrid()
|
||||||
{
|
{
|
||||||
toggleReflex(true);
|
toggleReflex(true);
|
||||||
if($('pearImageFlow')) $('pearImageFlow').hide();
|
$('#pearImageFlow').hide();
|
||||||
$('ContentAlbum').show();
|
$('#ContentAlbum').show();
|
||||||
if(!$('mosaicGridContainer')) return;
|
if(!$('#mosaicGridContainer').length) return;
|
||||||
mosaicView=false;
|
mosaicView=false;
|
||||||
maxSize=225;
|
maxSize=225;
|
||||||
checkCookie();
|
checkCookie();
|
||||||
@ -290,9 +291,9 @@ function switchToGrid()
|
|||||||
function switchToMosaic()
|
function switchToMosaic()
|
||||||
{
|
{
|
||||||
toggleReflex(false);
|
toggleReflex(false);
|
||||||
if($('pearImageFlow')) $('pearImageFlow').hide(); //.hide();
|
$('#pearImageFlow').hide(); //.hide();
|
||||||
$('ContentAlbum').show();
|
$('#ContentAlbum').show();
|
||||||
if(!$('mosaicGridContainer')){return;}
|
if(!$('#mosaicGridContainer').length) return;
|
||||||
mosaicView=true;
|
mosaicView=true;
|
||||||
maxSize=125;
|
maxSize=125;
|
||||||
checkCookie();
|
checkCookie();
|
||||||
@ -344,16 +345,16 @@ function togglePlayPause()
|
|||||||
function focusImage(id)
|
function focusImage(id)
|
||||||
{
|
{
|
||||||
currentImg=id;
|
currentImg=id;
|
||||||
$('imageTitleLabel').update("<h2>"+slideshowImages[id][4]+"</h2>");
|
$('#imageTitleLabel').html("<h2>"+slideshowImages[id][4]+"</h2>");
|
||||||
$('play_detail').hide();
|
$('#play_detail').hide();
|
||||||
$('pause_detail').hide();
|
$('#pause_detail').hide();
|
||||||
swatchImg(id);
|
swatchImg(id);
|
||||||
new Effect.Appear('detailView', { duration: 1.0 });
|
$('#detailView').fadeIn('slow');
|
||||||
hideHoverV = setTimeout("hideHoverView()",3000);
|
hideHoverV = setTimeout("hideHoverView()",3000);
|
||||||
//Image count.
|
//Image count.
|
||||||
detailViewMode=true;
|
detailViewMode=true;
|
||||||
updateHash();
|
updateHash();
|
||||||
new Ajax.Request(slideshowImages[currentImg][1], { method:'get' });
|
$.get(slideshowImages[currentImg][1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
function startImageFlow()
|
function startImageFlow()
|
||||||
@ -419,31 +420,18 @@ function setKeys()
|
|||||||
}
|
}
|
||||||
function showHoverView(){
|
function showHoverView(){
|
||||||
if(hideHoverV != null) clearTimeout(hideHoverV);
|
if(hideHoverV != null) clearTimeout(hideHoverV);
|
||||||
$('hoverView').show();
|
$('#hoverView').show();
|
||||||
hideHoverV = setTimeout("hideHoverView()",3000);
|
hideHoverV = setTimeout("hideHoverView()",3000);
|
||||||
}
|
}
|
||||||
function hideHoverView(){
|
function hideHoverView(){
|
||||||
if(!hovering) $('hoverView').fade();
|
if(!hovering) $('#hoverView').fadeOut();
|
||||||
hideHoverV = null;
|
hideHoverV = null;
|
||||||
}
|
}
|
||||||
var hideHoverV=null;
|
var hideHoverV=null;
|
||||||
var hovering=false;
|
var hovering=false;
|
||||||
function switchMode(mode){
|
function switchMode(mode){
|
||||||
$('mosaic').className="viewSwitcher mosaic mosaic-with-viewSwitcher";
|
$('#mosaic,#grid,#carousel').removeClass("sel sel-with-viewSwitcher");
|
||||||
$('grid').className="viewSwitcher grid grid-with-viewSwitcher";
|
$('#'+mode).addClass("sel sel-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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function preFetch()
|
function preFetch()
|
||||||
|
@ -18,13 +18,13 @@
|
|||||||
<? foreach ($children as $i => $child): ?>
|
<? foreach ($children as $i => $child): ?>
|
||||||
<? $item_class = "g-photo"; ?>
|
<? $item_class = "g-photo"; ?>
|
||||||
<? if ($child->is_album()): ?>
|
<? 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 ?>
|
<? endif ?>
|
||||||
<? $img_class = "g-thumbnail"; ?>
|
<? $img_class = "g-thumbnail"; ?>
|
||||||
<? if ($child->is_photo()): ?>
|
<? if ($child->is_photo()): ?>
|
||||||
<? $img_class = "g-thumbnail p-photo"; ?>
|
<? $img_class = "g-thumbnail p-photo"; ?>
|
||||||
<? endif ?>
|
<? 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) ?>
|
<?= $theme->thumb_top($child) ?>
|
||||||
<? if ($child->is_album()): ?>
|
<? if ($child->is_album()): ?>
|
||||||
<div class="gallery-thumb-round" style="height: 200px; width: 200px;"></div>
|
<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,10 +80,11 @@
|
|||||||
<?= $theme->get_combined("css") ?>
|
<?= $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("css/pear.css") ?>" media="screen,print,projection" />
|
||||||
<link rel="stylesheet" type="text/css" href="<?= $theme->url("icons/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>
|
</head>
|
||||||
|
|
||||||
<body <?= $theme->body_attributes() ?> onload="bodyLoad(1);">
|
<body <?= $theme->body_attributes() ?>>
|
||||||
|
<?= new View("hoverView.html") ?>
|
||||||
<?= $theme->page_top() ?>
|
<?= $theme->page_top() ?>
|
||||||
<?= $theme->site_status() ?>
|
<?= $theme->site_status() ?>
|
||||||
<div id="g-header" class="ui-helper-clearfix" style="display: none;">
|
<div id="g-header" class="ui-helper-clearfix" style="display: none;">
|
||||||
@ -112,7 +113,7 @@
|
|||||||
<span class="count">(<?//$theme->item()->children;?>)</span>
|
<span class="count">(<?//$theme->item()->children;?>)</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="rNavBar">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -136,15 +137,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="" style="" id="viewControls">
|
<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 title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid();">
|
||||||
<!-- <div style="margin-top:-2px;margin-left:-2px;"> -->
|
|
||||||
<div class="label">Grid</div>
|
<div class="label">Grid</div>
|
||||||
</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 style="margin-top:-2px;margin-left:-4px;"> -->
|
||||||
<div class="label">Mosaic</div>
|
<div class="label">Mosaic</div>
|
||||||
</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 style="margin-top:-2px;"> -->
|
||||||
<div class="label">Carousel</div>
|
<div class="label">Carousel</div>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user