Member
I've installed the Highslide theme and it's working perfectly.
What im trying to do is have the theme use the effect shown here: http://highslide.com/example-mini-gallery.html
Here's what i've done so far:
-Copied the highslide-with-gallery.js file to the JS directory in the Highslide theme.
-Copies all the other Highslide JS and Graphic files included in the Highslide download to the proper dir under the highslide theme dir.
-Replaced highslide.js with highslide-with-gallery.js in the header of the album.php file.
-Added the following code to the album.php file
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
window.onload = function() {
hs.preloadImages();
}
</script>
Here's a link to an album page in my gallery: http://www.nwbroweather.com/zenphoto/index.php?album=surf%2F20080304_Oahu
Everything seems to be working fine except the Control Graphics for Next, Previous, Play, Move, Fullsize and Close show up as text links.
Any idea why the Control Graphics aren't showing up?
What im trying to do is have the theme use the effect shown here: http://highslide.com/example-mini-gallery.html
Here's what i've done so far:
-Copied the highslide-with-gallery.js file to the JS directory in the Highslide theme.
-Copies all the other Highslide JS and Graphic files included in the Highslide download to the proper dir under the highslide theme dir.
-Replaced highslide.js with highslide-with-gallery.js in the header of the album.php file.
-Added the following code to the album.php file
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
window.onload = function() {
hs.preloadImages();
}
</script>
Here's a link to an album page in my gallery: http://www.nwbroweather.com/zenphoto/index.php?album=surf%2F20080304_Oahu
Everything seems to be working fine except the Control Graphics for Next, Previous, Play, Move, Fullsize and Close show up as text links.
Any idea why the Control Graphics aren't showing up?
Administrator
Member
I added the following to the album.php file and it does the same thing:
<link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />
Here's my album.php file:
<?php
if (!defined('WEBPATH')) die();
$themeResult = getTheme($zenCSS, $themeColor, 'light');
$firstPageImages = normalizeColumns('2', '6');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><?php printGalleryTitle(); ?> | <?php echo getAlbumTitle();?></title>
<link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />
<?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
<?php zenJavascript(); ?>
<script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide-full.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<script type="text/javascript">
window.onload = function() {
hs.preloadImages();
}
</script>
</head>
<body>
<?php printAdminToolbox(); ?>
<div id="main">
<div id="gallerytitle">
<h2><span><a>" title="Albums Index"><?php echo getGalleryTitle();?></a> | <?php printParentBreadcrumb(); ?></span> <?php printAlbumTitle(true);?></h2>
</div>
<div id="padbox">
<?php printAlbumDesc(true); ?>
<div id="albums">
<?php while (next_album()): ?>
<div class="album">
<div class="thumb">
<a>" title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumThumbImage(getAlbumTitle()); ?></a>
</div>
<div class="albumdesc">
<h3><a>" title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumTitle(); ?></a></h3>
<small><?php printAlbumDate(""); ?></small>
<p><?php printAlbumDesc(); ?></p>
</div>
<p style="clear: both; "></p>
</div>
<?php endwhile; ?>
</div>
<div id="highslide-container"></div>
<div id="images">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb"><a>" class="highslide" onclick="return hs.expand(this)" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></a></div>
</div>
<?php endwhile; ?>
</div>
<!--
(optional). This is how you mark up the caption. The id contains the words 'caption-for-',
then the id of the img tag above.
-->
<div class="highslide-caption" id="caption-for-thumb1">This caption can be styled using CSS.</div>
<?php printPageListWithNav("« prev", "next »"); ?>
<?php printTags(true, 'Tags: '); ?>
</div>
</div>
<div id="credit"><?php printRSSLink('Album', '', 'Album RSS', ''); ?> | <a>?p=archive">Archive View</a> | Powered by zenphoto</div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />
Here's my album.php file:
<?php
if (!defined('WEBPATH')) die();
$themeResult = getTheme($zenCSS, $themeColor, 'light');
$firstPageImages = normalizeColumns('2', '6');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><?php printGalleryTitle(); ?> | <?php echo getAlbumTitle();?></title>
<link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />
<?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
<?php zenJavascript(); ?>
<script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide-full.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<script type="text/javascript">
window.onload = function() {
hs.preloadImages();
}
</script>
</head>
<body>
<?php printAdminToolbox(); ?>
<div id="main">
<div id="gallerytitle">
<h2><span><a>" title="Albums Index"><?php echo getGalleryTitle();?></a> | <?php printParentBreadcrumb(); ?></span> <?php printAlbumTitle(true);?></h2>
</div>
<div id="padbox">
<?php printAlbumDesc(true); ?>
<div id="albums">
<?php while (next_album()): ?>
<div class="album">
<div class="thumb">
<a>" title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumThumbImage(getAlbumTitle()); ?></a>
</div>
<div class="albumdesc">
<h3><a>" title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumTitle(); ?></a></h3>
<small><?php printAlbumDate(""); ?></small>
<p><?php printAlbumDesc(); ?></p>
</div>
<p style="clear: both; "></p>
</div>
<?php endwhile; ?>
</div>
<div id="highslide-container"></div>
<div id="images">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb"><a>" class="highslide" onclick="return hs.expand(this)" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></a></div>
</div>
<?php endwhile; ?>
</div>
<!--
(optional). This is how you mark up the caption. The id contains the words 'caption-for-',
then the id of the img tag above.
-->
<div class="highslide-caption" id="caption-for-thumb1">This caption can be styled using CSS.</div>
<?php printPageListWithNav("« prev", "next »"); ?>
<?php printTags(true, 'Tags: '); ?>
</div>
</div>
<div id="credit"><?php printRSSLink('Album', '', 'Album RSS', ''); ?> | <a>?p=archive">Archive View</a> | Powered by zenphoto</div>
</body>
</html>
Member
hi, i tried to do the same thing, has anybody a solution already?
Administrator
The Highside theme comes with a very basic configuration. No support for a slideshow and no buttons.
Visit the Highslide editor http://highslide.com/editor/ and configure it the way you want it.
When done click the publish button and in the next window accept the licence conditions.
You can then download a ZIP file with all the files/folders necessary for your configuration.(there's also a good tutorial about what to do on the same page)
Replace the old files with the new ones.(no need use the sample images ofcourse)
You'll probably have to change some paths, do some reading and testing... ;-)
Succes
Visit the Highslide editor http://highslide.com/editor/ and configure it the way you want it.
When done click the publish button and in the next window accept the licence conditions.
You can then download a ZIP file with all the files/folders necessary for your configuration.(there's also a good tutorial about what to do on the same page)
Replace the old files with the new ones.(no need use the sample images ofcourse)
You'll probably have to change some paths, do some reading and testing... ;-)
Succes
