Squashed '3.0/themes/pear4gallery3/' changes from 98195b4..5da2cba

5da2cba Version 2.5 * Support for elastic thumb-margins. * Support for videos.
20a4d37 Elastic padding around thumbs.
4b07153 Fix for carousel view via settings (and iron out some other bugs).
ab1cd0a Fix for carousel view via hash.
88b1fcd Video support.
99e46d8 Disabled console..
f148b5a Fix for 'View at smallest/largest photo size' both give 'Err on page' (Error line 53, Char: 15910, 'undefined' is null or not an object)
342e592 Escaping characters in title (for images).
3613146 version up
bb7c321 Edited views/album.html.php via GitHub
293feae Fix for overflowing height.
067b764 Support for photo view count, including redirects.
77c42a1 Limit of n:o thumbs to show when skimming. Support for exif data from detailview (no longer links to the photo page), breaks the view count.

git-subtree-dir: 3.0/themes/pear4gallery3
git-subtree-split: 5da2cba5ac

admin/controllers/admin_theme_options.php

@@ -87,7 +87,7 @@ class Admin_Theme_Options_Controller extends Admin_Controller {
       ->checked(module::get_var("th_pear4gallery3", "hide_logo"));
     $group->dropdown("mainmenu_view")
       ->label(t("Main page View"))
-      ->options(array("grid" => t("Grid (Default)"), "mosaic" => t("Mosaic")))
+      ->options(array("grid" => t("Grid (Default)"), "mosaic" => t("Mosaic"), "carousel" => t("Carousel")))
       ->selected(module::get_var("th_pear4gallery3", "mainmenu_view"));
     $group->checkbox("show_guest_menu")
       ->label(t("Show Main Menu for Guest Users"))

css/pear.css

@@ -1,8 +1,6 @@
 .gallery-thumb {
 	float: left;
-	margin-bottom: 5px;
-	margin-left: 5px;
-	margin-right: 5px;
+	padding: 3px 5px 7px 5px;
 	position: relative;
 	text-align: center;
 	cursor: pointer;
@@ -40,9 +38,11 @@ th, td {
 .giTitle {
 	font-size: 1.1em;
 	font-weight: bold;
-	margin: 3px 10px !important;
+	margin: 0.3em 3px !important;
 	padding: 0 0; 
 	text-align: left;
+	height: 1.2em;
+	overflow: hidden;
 }
 
 #gsNavBar div {

icons/pear.css

@@ -1,6 +1,17 @@
 .gallery-thumb-round {
 	background: url('rounded.png') no-repeat scroll left top;
 	position: absolute;
+	height: 200px;
+	width: 200px;
+}
+
+.p-video{
+	background: url('movie.png') no-repeat center;
+	position: absolute;
+	width: 200px;
+	height: 200px;
+	left: 0px;
+	top: 0px;
 }
 
 .skimm_div {
@@ -57,9 +68,9 @@ height:40px;
 
 #logoButton {
 	display: block;
-	z-index: 1000;
+	z-index: 100;
 background: transparent url('pear_logo_sml.png') no-repeat center left;
-width: 83px;
+width: 30px;
 height: 40px;
 border: 0px;
 padding: 0px;
@@ -84,7 +95,7 @@ background: transparent url('pear_logo_sml.png') no-repeat center left;
 	padding: 0px 0px;
 	width: auto;
 	float: right;
-	z-index: 10000;
+	z-index: 100;
 	font-size: 12px;
 	top: 11px;
 }
@@ -203,7 +214,7 @@ top: 10px;
 height: 3px;
 width: 154px;
 float: right;
-z-index: 10000;
+z-index: 100;
 }
 
 .sliderView .smaller {	
@@ -301,11 +312,11 @@ cursor: default;
 #viewControls {
 position: relative;
 color: #616161;
-width: 381px;
+width: 334px;
 float: left;
 			 margin-left: 30px;
 			 margin-top: 13px;
-			 z-index: 8000;
+			 z-index: 800;
 			 font-size: 12px;
 			 text-shadow:  #111111 0px -1px 1px;
 }
@@ -400,8 +411,9 @@ background: url('slideshow_active.png') center left no-repeat;
 	top: 0;
 	width: 100%;
 	height: 100%;
-    z-index: 99999;
+	z-index: 999;
 	background-color: #000000;
+	display: none;
 }
 
 #detailView .iMovieVideo {
@@ -535,7 +547,7 @@ background: url('slideshow_active.png') center left no-repeat;
 	bottom: 30px;
 	width: 99%;
 	text-align: center;
-	z-index: 99999;
+	z-index: 999;
 }
 
 #hoverView #hoverViewMenu {

js/pear.js

@@ -5,9 +5,8 @@ var detailViewMode=false;
 var savedHeight = 0;
 var savedWidth = 0;
 
-$(window).resize(function (e) {
-	if (window.innerHeight == savedHeight && 
-		window.innerWidth == savedWidth) { e.stop(); }
+$(window).resize(function () {
+	if (window.innerHeight == savedHeight && window.innerWidth == savedWidth) return; 
 	savedHeight = window.innerHeight;
 	savedWidth = window.innerWidth;
 	mosaicResize();
@@ -24,7 +23,7 @@ function swatchSkin(intSkin){
 		case 'dkgrey' :
 		case 1 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-200px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#262626");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#262626");
 			$('p.giTitle').css("color", "#a9a9a9");
 			$("#dkgrey").addClass("dkgrey sel dkgrey-with-sel-with-swatch");
 			bgcolor="dkgrey";
@@ -33,7 +32,7 @@ function swatchSkin(intSkin){
 		case 'ltgrey' :
 		case 2 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-400px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#d9d9d9");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#d9d9d9");
 			$('p.giTitle').css("color", "#333333");
 			$("#ltgrey").addClass("ltgrey sel ltgrey-with-sel-with-swatch");
 			bgcolor="ltgrey";
@@ -42,7 +41,7 @@ function swatchSkin(intSkin){
 		case 'white' :
 		case 3 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-600px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#ffffff");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#ffffff");
 			$('p.giTitle').css("color", "#444444");
 			$("#white").addClass("white sel white-with-sel-with-swatch");
 			bgcolor="white";
@@ -52,7 +51,7 @@ function swatchSkin(intSkin){
 		case 0 :
 		default:
 			$('div.gallery-thumb-round').css('backgroundPosition' , "0px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#000");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#000");
 			$('p.giTitle').css("color", "#a3a3a3");
 			$("#black").addClass("black sel black-with-sel-with-swatch");
 			bgcolor="black";
@@ -66,14 +65,16 @@ function scaleIt(v,sliding){
 
 	// Remap the 0-1 scale to fit the desired range
 	//v=.26+(v*(1.0-.26));
-	size = (mosaicView) ? v/2 : v;
+	var size = (mosaicView) ? v/2 : v;
 
 	toggleReflex(true);
 	$(".p-photo").each(function (i) {
 		$(this).attr({height: size+'px',width: size + 'px'});
 		$(this).css({height: size+'px',width: size+'px'});});
+	$(".g-photo").css({width: size+'px'});
 	if(!mosaicView && !sliding)
 		toggleReflex(false);
+	thumbPadding();
 }
 function setCookie(c_name,value,expiredays)
 {
@@ -148,14 +149,16 @@ function swatchImg(imageId)
 	if( detailViewMode )
 	{
 		//Image count.
-		$.get(slideshowImages[currentImg][1]);
+		$.get(slideshowImages[currentImg][6]);
 	}
 	updateHash();
+	$('#info_detail').attr('href', slideshowImages[currentImg][1]);
 }
 
-function updateHash()
+function updateHash(viewMode)
 {
-	viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
+	if(typeof viewMode == 'undefined')
+		viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
 	hash = "#img=" + currentImg + "&viewMode=" + viewMode + "&bgcolor=" + bgcolor;
 	window.location.hash = hash;
 }
@@ -185,8 +188,6 @@ function mosaicResize()
 		myWidth = document.body.clientWidth;
 		myHeight = document.body.clientHeight;
 	}
-	if($('#pearImageFlow').length != 0)
-		$('#pearImageFlow').css({'height' : (myHeight-87)+'px', 'width': myWidth+'px', 'minHeight': ((myHeight-70)*0.9)+'px'});
 	if($('#imageflow').length != 0)
 		$('#imageflow').css({'height': (myHeight-53)+'px', 'width': (((myWidth*0.5)<(myHeight-53)) ? myWidth : ((myHeight-65)*2)) +'px'});
 	$('#detailImageView').css({'height': myHeight-165+"px"});
@@ -195,8 +196,13 @@ function mosaicResize()
 		$('#img_detail').css({'height': iHeight+"px", 'width':iWidth+"px"});
 
 	myWidth=myWidth-7;
+	myHeight = myHeight - $('#g-site-status').outerHeight(true);
+	$('#pearFlowPadd').css({'height' : myHeight-90-(Math.round(myWidth / 2.4))+'px'});
 	($('#paginator').length != 0) ? myHeight-=165: myHeight-=138;
+	$('#g-header').css('top', $('#gsNavBar').outerHeight(true)+$('#g-site-status').outerHeight(true)-4);
 
+	if($('#g-movie').length) 
+		myHeight+=18;
 	if ( !mosaicView )
 	{
 		$('#mosaicGridContainer').css({'height': (myHeight+33)+"px", 'width': myWidth+"px"});
@@ -211,20 +217,28 @@ function mosaicResize()
 		(iRatio>(myWidth/myHeight)) ? $('#mosaicImg').attr({height: myWidth/iRatio,width: myWidth}) : $('#mosaicImg').attr({height: myHeight,width: myHeight*iRatio});
 		if(iHeight<myHeight&&iWidth<myWidth) $('#mosaicImg').attr({height:iHeight, width:iWidth});
 	}
+	thumbPadding();
+
 	if($('#conf_imageflow').length) refresh();
 }
+function thumbPadding() {
+/* Padding on thumbs to make them flow nicer */
+	var size = Math.ceil((mosaicView) ? $('#imgSlider').slider('value')/2 : $('#imgSlider').slider('value'))+10;
+	var width =$('#mosaicGridContainer').innerWidth()-15;
+	var margin = width/Math.floor(width/size)-size;
+	console.log(size, width, margin,"px" );
+	$('.gallery-thumb').css({'margin-left': Math.ceil(margin/2) + 'px', 'margin-right': Math.floor(margin/2) + 'px'});
+}
 
 function bodyLoad(viewMode, bgcolor) {
 	/* Parse hash */
 	hash = window.location.hash;
 	var h = $.parseQuery(hash.substring(1));
 	if(h.img != undefined)
-		currentImg = h.img;
+		currentImg = parseInt(h.img);
 	if(h.bgcolor != undefined)
 		swatchSkin(h.bgcolor);
-	if(h.viewMode == 'detail')
-		focusImage(currentImg);
-	else
+	if(h.viewMode != undefined)
 		viewMode = h.viewMode;
 	/* end parse hash */
 	
@@ -250,16 +264,23 @@ function bodyLoad(viewMode, bgcolor) {
 	if (co==null || co=="")
 		swatchSkin(bgcolor);
 
+if(typeof slideshowImages != 'undefined')
 	if(!slideshowImages.length) 
 		viewMode='grid';
 
 	switch (viewMode) {
+		case 'carousel':
+			startImageFlow();
+			break;
 		case 'grid':
 			switchToGrid();
 			break;
 		case 'mosaic':
 			switchToMosaic();
 			break;
+		case 'detail':
+			focusImage(currentImg, h.redirected);
+			break;
 		default:
 			mosaicResize();
 			checkCookie();
@@ -272,7 +293,7 @@ function bodyLoad(viewMode, bgcolor) {
 function switchToGrid()
 {
 	toggleReflex(true);
-	$('#pearImageFlow').hide();
+	$('#pearImageFlow,#pearFlowPadd').hide();
 	$('#mosaicTable').show();
 	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=false;
@@ -283,13 +304,12 @@ function switchToGrid()
 	$('p.giTitle,div.giInfo').each(function(s){$(this).show();});
 	switchMode('grid');
 	mosaicResize();
-	updateHash();
 }
 
 function switchToMosaic()
 {
 	toggleReflex(false);
-	$('#pearImageFlow').hide(); //.hide(); 
+	$('#pearImageFlow,#pearFlowPadd').hide();
 	$('#mosaicTable').show();
 	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=true;
@@ -341,7 +361,7 @@ function togglePlayPause()
 		slideShow=null;
 	}
 }
-function focusImage(id)
+function focusImage(id, redirected)
 {
 	currentImg=id;
 	$('#imageTitleLabel').html("<h2>"+slideshowImages[id][4]+"</h2>");
@@ -350,45 +370,34 @@ function focusImage(id)
 	swatchImg(id);
 	$('#detailView').fadeIn('slow');
 	hideHoverV = setTimeout("hideHoverView()",3000);
-	//Image count.
 	detailViewMode=true;
 	updateHash();
-	$.get(slideshowImages[currentImg][1]);
+	//Image count.
+	if(!redirected)
+		$.get(slideshowImages[currentImg][6]);
+	$('#info_detail').attr('href', slideshowImages[currentImg][1]);
 }
 var pearCarousel;
 function startImageFlow()
 {
 	$('#mosaicTable').hide();
 
-	$('#pearImageFlow').show();
+	$('#pearImageFlow,#pearFlowPadd').show();
 
 	toggleReflex(true);
 
-	for (var i = 0; i < slideshowImages.length; i++) {
-		var img = '<div class="item"><img class="content" src="'+slideshowImages[i][0]+'"/><div class="caption">'+$('#mosaicGridContainer img').eq(i).attr('alt')+'"</div></div>';
-		var img = '<img src="'+slideshowImages[i][0]+'" longdesc="'+i+'" width="'+slideshowImages[i][2]+'" height="'+slideshowImages[i][3]+'" alt="'+slideshowImages[i][4]+'" style="display: none;">';
-		console.log(img);
-		$('#pearImageFlow').append(img); 
-	}
 	if(!pearCarousel){
-	pearCarousel = new ImageFlow();
-	pearCarousel.init({ImageFlowID: 'pearImageFlow', aspectRatio: 2.4, imagesHeight: 0.6, opacity: true, reflections: false, startID: currentImg, onClick: function() {focusImage($(this).attr('longdesc'));}, startAnimation: true, xStep: 200, imageFocusM: 1.7, imageFocusMax: 4, opacityArray: [10, 9, 6, 2], percentOther: 130, captions: false, slider: false});
+		for (var i = 0; i < slideshowImages.length; i++) {
+			var img = '<div class="item"><img class="content" src="'+slideshowImages[i][0]+'"/><div class="caption">'+$('#mosaicGridContainer img').eq(i).attr('alt')+'"</div></div>';
+			var img = '<img src="'+slideshowImages[i][0]+'" longdesc="'+i+'" width="'+slideshowImages[i][2]+'" height="'+slideshowImages[i][3]+'" alt="'+slideshowImages[i][4]+'" style="display: none;">';
+	//		console.log(img);
+			$('#pearImageFlow').append(img); 
+		}
+		pearCarousel = new ImageFlow();
+		pearCarousel.init({ImageFlowID: 'pearImageFlow', aspectRatio: 2.4, imagesHeight: 0.6, opacity: true, reflections: false, startID: currentImg, onClick: function() {focusImage($(this).attr('longdesc'));}, startAnimation: true, xStep: 200, imageFocusM: 1.7, imageFocusMax: 4, opacityArray: [10, 9, 6, 2], percentOther: 130, captions: false, slider: false});
 	}
-/*
-	current=(currentImg)*-xstep;
-	caption_id=currentImg;
-	refresh(true);
-
-	iShow(conf_images);
-	iShow(conf_scrollbar);
-	initMouseWheel();
-	initMouseDrag();
-	mosaicResize();
-
-	moveTo(current);
-	glideTo(current, caption_id);
-*/
 	switchMode('carousel');
+	mosaicResize();
 }
 function setKeys()
 {
@@ -431,6 +440,7 @@ var hovering=false;
 function switchMode(mode){
 	$('#mosaic,#grid,#carousel').removeClass("sel sel-with-viewSwitcher");
 	$('#'+mode).addClass("sel sel-with-viewSwitcher");
+	updateHash(mode);
 }
 
 function preFetch()

theme.info

@@ -1,6 +1,6 @@
 name = ".Pear Theme"
 description = "A theme with the intention to mimic Apples mobile me gallery."
-version = 2.1
+version = 2.5
 author = "Fredrik Erlandsson <fredrik.e@gmail.com>"
 site = 1
 admin = 0

views/album.html.php

@@ -30,20 +30,27 @@ $(function() {
     <? if ($child->is_photo()): ?>
       <? $img_class = "g-thumbnail p-photo"; ?>
     <? endif ?>
+    <? if ($child->is_movie()): ?>
+      <a href="<?= $child->url() ?>">
+    <? endif ?>
   <div id="g-thumb-id-<?= $child->id ?>" class="g-item gallery-thumb <?= $item_class ?>" title="<?= $child->description?>">
     <?= $theme->thumb_top($child) ?>
-    <? if ($child->is_album()): ?>
-		<div class="gallery-thumb-round" style="height: 200px; width: 200px;"></div>
+    <? if ($child->is_album() || $child->is_movie()): ?>
+		<div class="gallery-thumb-round"></div>
     <? endif ?>
       <? if ($child->has_thumb()): ?>
 		<?= $child->thumb_img(array("class" => $img_class, "id" => "thumb_$child->id", "style" => "width: 200px; height 200px;")) ?>
+    <? if ($child->is_movie()): ?>
+      <span class="p-video"></span>
+    <? endif ?>
       <? endif ?>
 <?// Begin skimming 
 if($child->is_album()):
 	$granchildren = $child->viewable()->children();
 	$offset = 0;
-	$step = round(200/count($granchildren));
+	$step = round(200/min(count($granchildren),50));
 	foreach ($granchildren as $i => $granchild):?>
+      <? if(++$i > 50) break; ?>
       <? if ($granchild->has_thumb()): ?>
       <?= $granchild->thumb_img(array("style" => "display: none;")) ?>
 	<div class="skimm_div" style="height: 200px; width: <?=$step?>px; left: <?=$offset?>px; top: 0px;" onmouseover="$('#thumb_<?=$child->id?>').attr('src', '<?=$granchild->thumb_url()?>');skimimg=<?=$i?>;" id="area_<?=$granchild->id?>"></div>
@@ -52,9 +59,12 @@ if($child->is_album()):
 endforeach; 
 endif; 
 // End skimming // ?>
-	<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify($child->title) ?> </p>
+	<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify(text::limit_chars($child->title, 20)) ?> </p>
 	<? if($child->is_album()): ?><div class="giInfo"><?= count($granchildren)?> photos</div><? endif ?>
 </div>
+    <? if ($child->is_movie()): ?>
+      </a>
+    <? endif ?>
    <?/* <?= $theme->thumb_bottom($child) ?>
     <?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
     <h2><span class="<?= $item_class ?>"></span>
@@ -68,7 +78,7 @@ endif;
   var slideshowImages = new Array();
 <? foreach ($children as $i => $child): ?>
 <? if(!($child->is_album() || $child->is_movie())): ?>
-    slideshowImages.push(['<?= $child->resize_url() ?>', '<?= $child->url() ?>', '<?= $child->width ?>','<?= $child->height ?>', '<?= $child->title ?>', '<?= $child->file_url() ?>']);
+    slideshowImages.push(['<?= $child->resize_url() ?>', '<?= url::site("exif/show/$child->id") ?>', '<?= $child->width ?>','<?= $child->height ?>', '<?= htmlentities($child->title, ENT_QUOTES) ?>', '<?= $child->file_url() ?>', '<?= $child->url() ?>']);
 	<? endif ?>
 <? endforeach ?>
 </script>
@@ -86,4 +96,5 @@ endif;
 <?= $theme->album_bottom() ?>
 
 <?= $theme->paginator() ?>
-<div id="pearImageFlow" class="imageflow"> </div>
+<div id="pearFlowPadd" class="imageflow" style="display: none;"></div>
+<div id="pearImageFlow" class="imageflow" style="display: none;"> </div>

views/hoverView.html.php

@@ -1,5 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="detailView" style="display: none; z-index:99997;" onmousemove="showHoverView();">
+<div id="detailView" onmousemove="showHoverView();">
 	<div class="overlay"> </div>
 	<div class="content">
 		<div class="imageContainer">
@@ -16,7 +16,7 @@
 				<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 id="info_detail" title="Show more information about this photo" class="info_detail g-dialog-link"> </div>
 			</div>
 		</div>
 	</div>

views/movie.html.php

@@ -1,9 +1,12 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<script type="text/javascript">
+$(function() { bodyLoad('grid',''); });
+</script>
 <div id="g-item">
   <?= $theme->photo_top() ?>
 
   <?= $theme->paginator() ?>
-
+<div id="mosaicGridContainer">
   <div id="g-movie" class="ui-helper-clearfix">
     <?= $theme->resize_top($item) ?>
     <?= $item->movie_img(array("class" => "g-movie", "id" => "g-item-id-{$item->id}")) ?>
@@ -14,6 +17,6 @@
     <h1><?= html::purify($item->title) ?></h1>
     <div><?= nl2br(html::purify($item->description)) ?></div>
   </div>
-
+</div>
   <?= $theme->photo_bottom() ?>
 </div>

views/page.html.php

@@ -4,7 +4,7 @@
 		if(!($child->is_album() || $child->is_movie()))
    		if($child->url() == $_SERVER['REQUEST_URI']):?>
 				<html><body>
-					<script type="text/javascript">window.location = '<? echo end($parents)->url() . "#img=$i&viewMode=detail"?>';</script>
+					<script type="text/javascript">window.location = '<? echo end($parents)->url() . "#img=$i&viewMode=detail&redirected=true"?>';</script>
 					</body></html>
 					<? die(0) ?>
 <? endif ?>
@@ -154,8 +154,8 @@
 <div id="footerWrapper">
 	<div title="Change size of photos" id="sliderView" class="sliderView">
 		<div class="sliderRightCap"></div>
-		<div title="View at smallest photo size" class="smaller" onclick="$('#slider').slider('value', 0);"></div>
-		<div title="View at largest photo size" class="larger" onclick="$('#slider').slider('value', 250);"></div>
+		<div title="View at smallest photo size" class="smaller" onclick="$('#imgSlider').slider('value', 0);"></div>
+		<div title="View at largest photo size" class="larger" onclick="$('#imgSlider').slider('value', 250);"></div>
 		<div id="imgSlider" class="track">
 		</div>
 	</div>
@@ -169,6 +169,7 @@
 	</div>
 
 	<div class="" style="" id="viewControls">
+<? if ($theme->page_subtype != "movie"): ?>
 		<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>
@@ -185,6 +186,7 @@
 			<div class="label">Slideshow</div>
 		</div>
 		<div class="clear"></div>
+<? endif ?>
 	</div>
 	<? if (!module::get_var("th_pear4gallery3", "hide_logo")): ?><button id="logoButton"></button><?endif?>
 </div>