Well, I've got the Highslide set up, it's a fairly nice and straightforward theme. However, I want to alter it to reflect the Highslide JS team's latest options, specifically the option of no border, floating caption (view an example here:
Third picture on the right, top row under "Highslide JS Core", the water droplet image).
I've successfully put in the hs. tags in the album.php page. The javascript section now reads accordingly:
<title><?php printGalleryTitle(); ?> | <?php echo getAlbumTitle();?></title>
<link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
<?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
<?php zenJavascript(); ?>
<script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide.js"></script>
<script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide.config.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages();
hs.dimmingOpacity = 100;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'below';
// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'large-dark',
opacity: '0.6',
position: 'bottom center',
offsetX: '0',
offsetY: '-15',
hideOnMouseOut: true
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
transitions: ['expand', 'crossfade']
};
}
</script>
Now, what this so far does is most of what I wanted. The image is rendered without a border but with a surrounding semi-opaque drop shadow, it animates and expands from the thumbnail's position out to center-page, the caption is pulled from the image's title attribute, and the caption is positioned underneath the picture.
However, the bottom section where the caption is located does not render as white bold text against a transparent background. Instead, it shows up as a square cornered, white-background space with the caption in thin dark standard text on it.
I've played with the code as far as I can understand it but am at my limit of expertise. I know to alter the highslide.js file to do things like turn off credits, but this particular aspect of the design I can't seem to figure out where it's activated/defined. The Highslide JS website only gives me assistance so far as to let me use the editor to configure all this, but that's what got me this far, and no further.
Unfortunately this is being done on my own computer using MAMP as a test server, so I don't have a website link to offer. I'm trying to get this worked out before I put it up live on a friend's website to run his photo gallery. I love ZP's simplicity and ability to browser-upload files (unlike YooGallery and Joomla, which are just overkill for what my friend needs, plus require you to FTP upload your pictures to a directory first and use call-tags in an article, all more than my friend can handle).
Any help would be appreciated. Thanks!
Zenphoto
Comments
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.outlineType = 'rounded-white';
window.onload = function() {
hs.preloadImages();
hs.dimmingOpacity = 100;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'below';
..snip..
</script>
hs.outlineType = 'rounded-white'; tells the highslide where to locate the graphics. So that says you should be getting the rounded white graphics. If you look at the file strucutre for that section you'll see you would just change that to change your setting for which outlines you wanted.
If the highslide team says their codes if functioning properly you could just copy one of the graphics folders, load up your favorite image editor, wipe each image to transparent while retaining their image sizes (so not to skew things) and then resave them.
Just a hack'n'slash way to get it done.